summaryrefslogtreecommitdiff
path: root/doc/lib/rrdFlot_js.html
blob: 75479edda0dc7e9fd1d3a99562d1aad0e5184b3c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
	<TITLE>rrdFlot module</TITLE>
	<META NAME="GENERATOR" CONTENT="OpenOffice.org 3.0  (Linux)">
	<META NAME="Info 1" CONTENT="">
	<META NAME="Info 2" CONTENT="">
	<META NAME="Info 3" CONTENT="">
	<META NAME="Info 4" CONTENT="">
	<STYLE TYPE="text/css">
	<!--
		@page { margin: 0.79in }
		TD P { margin-bottom: 0.08in }
		H1 { margin-bottom: 0.08in }
		H1.western { font-family: "Liberation Sans", sans-serif; font-size: 22pt }
		P { margin-bottom: 0.08in }
		H2.heading-2-western { font-family: "Liberation Serif", serif; font-size: 16pt }
		TH P { margin-bottom: 0.08in }
		A:link { so-language: zxx }
	-->
	</STYLE>
</HEAD>
<BODY LANG="en-US" DIR="LTR">
<H1 CLASS="western">rrdFlot module</H1>
<TABLE WIDTH=50% CELLPADDING=2 CELLSPACING=2>
	<TR>
		<TD>
			<HR>
			<P>The <A HREF="../../src/lib/rrdFlot.js">rrdFlot Javascript
			module</A> implements a class used to represents a
			<A HREF="http://oss.oetiker.ch/rrdtool/">RDD archive</A> 
	                as a <A HREF="http://code.google.com/p/flot/">Flot</A> plot.</P>
			<HR>
		</TD>
	</TR>
</TABLE>
<H2 CLASS="heading-2-western">Overview</H2>
<P>This module provide a single class: <A HREF="#rrdFlot">rrdFlot</A>.</P>
<P>Given a 
<A HREF="rrdFile_js.html#RRDFile">RRDFile</A> object, this class
creates an interactive
<A HREF="http://code.google.com/p/flot/">Flot</A> plot.</P>

<P>In order to use this module, you also need to include:
<UL>
 <LI><A HREF="rrdFlotSupport_js.html">rrdFlotSupport.js</A>
 <LI><A HREF="http://code.google.com/p/flot/">jquery.flot.js</A>
 <LI><A HREF="http://jquery.com/">jquery.js</A>
</UL></P>

<H2 CLASS="heading-2-western"><A NAME="rrdFlot"></A>Class rrdFlot</H2>
<P>The rrdFlot constructor has three arguments:</P>
<DIV ALIGN=RIGHT>
	<TABLE WIDTH=90% BORDER=1 CELLPADDING=2 CELLSPACING=3>
		<COL WIDTH=51*>
		<COL WIDTH=205*>
		<THEAD>
			<TR VALIGN=TOP>
				<TH WIDTH=20%>
					<P ALIGN=LEFT>Argument</P>
				</TH>
				<TH WIDTH=80%>
					<P ALIGN=LEFT>Description</P>
				</TH>
			</TR>
		</THEAD>
		<TBODY>
			<TR VALIGN=TOP>
				<TD WIDTH=20%>
					<P>html_id</P>
				</TD>
				<TD WIDTH=80%>
					<P>ID of a HTML element, possibly a DIV.</P>
				</TD>
			</TR>
			<TR VALIGN=TOP>
				<TD WIDTH=20%>
					<P>rrd_file</P>
				</TD>
				<TD WIDTH=80%>
					<P>An object of type <A HREF="rrdFile_js.html#RRDFile">RRDFile</A>, or equivalent.</P>
				</TD>
			</TR>
			<TR VALIGN=TOP>
				<TD WIDTH=20%>
					<P>graph_options</P>
				</TD>
				<TD WIDTH=80%>
					<P>Graphing options.</P>
                                        <P>The default graphing options are:
<PRE>
  graph_options = {
    legend: {position:"nw",noColumns:3},
    yaxis: { autoscaleMargin: 0.20},
  };
</PRE></P>
				</TD>
			</TR>
      </TABLE>
</DIV>
<P>Once instatiated, the object will automatically dra the plot and handle user interaction.</P>
</BODY>
</HTML>