diff options
author | Frank Wuerthwein <fkw@ucsd.edu> | 2009-03-13 02:50:09 +0000 |
---|---|---|
committer | Frank Wuerthwein <fkw@ucsd.edu> | 2009-03-13 02:50:09 +0000 |
commit | a13bec31de18f9268d99fa027a7014e6592147e8 (patch) | |
tree | c4598272a9af8ebb9b4dd60d8aa973ef69de3ed7 /doc/lib/rrdFlotSupport_js.html | |
parent | 25dcc4f9ef72b417470dba880e4c600c4f5cb2ab (diff) |
rrdFlotSupport module
Diffstat (limited to 'doc/lib/rrdFlotSupport_js.html')
-rw-r--r-- | doc/lib/rrdFlotSupport_js.html | 343 |
1 files changed, 343 insertions, 0 deletions
diff --git a/doc/lib/rrdFlotSupport_js.html b/doc/lib/rrdFlotSupport_js.html new file mode 100644 index 0000000..c3f2747 --- /dev/null +++ b/doc/lib/rrdFlotSupport_js.html @@ -0,0 +1,343 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> +<HTML> +<HEAD> + <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8"> + <TITLE>rrdFlotSupport 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">rrdFlotSupport module</H1> +<TABLE WIDTH=50% CELLPADDING=2 CELLSPACING=2> + <TR> + <TD> + <HR> + <P>The <A HREF="../../src/lib/rrdFlotSupport.js">rrdFlotSupport Javascript module</A> + implements a set of commonly used functions an classes that may be used while plotting + <A HREF="http://oss.oetiker.ch/rrdtool/">RRD files</A> with + <A HREF="http://code.google.com/p/flot/">Flot</A>.</P> + <HR> + </TD> + </TR> +</TABLE> +<H2 CLASS="heading-2-western">Overview</H2> +<P>This module provides two types of support: +<UL> + <LI>Functions providing support in converting raw data into Flot-friendly format: + <A HREF="#rrdDS2FlotSeries">rrdDS2FlotSeries</A> and + <A HREF="#rrdRRA2FlotObj">rrdRRA2FlotObj</A>. + <LI>A class providing support for handling the plotting: + <A HREF="#rrdFlotSelection">rrdFlotSelection</A>. +</UL> +</P> +<H2 CLASS="heading-2-western"><A NAME="rrdDS2FlotSeries"></A>Function rrdDS2FlotSeries</H2> +<P>This function extracts a specific DS from a specific RRA and returns an object that +contains the data in format flot expects.</P> +<P> +Input parameters: +</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>Parameter</P> + </TH> + <TH WIDTH=80%> + <P ALIGN=LEFT>Description</P> + </TH> + </TR> + </THEAD> + <TBODY> + <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>ds_id</P> + </TD> + <TD WIDTH=80%> + <P>Identifier of the desired DS (as accepted by + <A HREF="rrdFile_js.html#RRDFile">RRDFile.getDS()</A>).</P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>rra_idx</P> + </TD> + <TD WIDTH=80%> + <P>Index of the desired RRA.</P> + </TD> + </TR> + </TBODY> + </TABLE> +</DIV> +<P> +The output is an object containing: +</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>Attribute</P> + </TH> + <TH WIDTH=80%> + <P ALIGN=LEFT>Description</P> + </TH> + </TR> + </THEAD> + <TBODY> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>data</P> + </TD> + <TD WIDTH=80%> + <P>A list of datapoints suitable to be fed to <A HREF="http://code.google.com/p/flot/">Flot</A>. Each element is a (Timestamp in ms, value) pair.<P> + <P>An example of use with Flot:<BR> +<PRE> +var fd=rrdDS2FlotSeries(...); +var plot = $.plot("#myplot", [{data:fd.data}], options); +</PRE> + </P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>label</P> + </TD> + <TD WIDTH=80%> + <P>The DS name.</P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>min</P> + </TD> + <TD WIDTH=80% ROWSPAN=2> + <P>Min and max timestamp in ms.</P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>max</P> + </TD> + </TR> + </TBODY> + </TABLE> +</DIV> +<H2 CLASS="heading-2-western"><A NAME="rrdDS2FlotObj"></A>Function rrdDS2FlotObj</H2> +<P>This function extracts a set of DSs from a specific RRA and returns an object that +contains the data in format flot expects.</P> +<P> +Input parameters: +</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>Parameter</P> + </TH> + <TH WIDTH=80%> + <P ALIGN=LEFT>Description</P> + </TH> + </TR> + </THEAD> + <TBODY> + <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>rra_idx</P> + </TD> + <TD WIDTH=80%> + <P>Index of the desired RRA.</P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>ds_list</P> + </TD> + <TD WIDTH=80%> + <P>List of DS identifiers (as accepted by + <A HREF="rrdFile_js.html#RRDFile">RRDFile.getDS()</A>).</P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>want_label</P> + </TD> + <TD WIDTH=80%> + <P>Should the DS name be included as label in the output? + (If false, only the order distinguishes the requested DSs)</P> + </TD> + </TR> + </TBODY> + </TABLE> +</DIV> +<P> +The output is an object containing: +</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>Attribute</P> + </TH> + <TH WIDTH=80%> + <P ALIGN=LEFT>Description</P> + </TH> + </TR> + </THEAD> + <TBODY> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>data</P> + </TD> + <TD WIDTH=80%> + <P>A list of objects suitable to be fed to <A HREF="http://code.google.com/p/flot/">Flot</A>. Each element is an object composed of two attributes:<UL> + <LI>data - A list of (Timestamp in ms, value) pairs.</LI> + <LI>label - The (optional) DS name.</LI></UL></P> + <P>An example of use with Flot:<BR> +<PRE> +var fd=rrdDS2FlotObj(...); +var plot = $.plot("#myplot", fd.data, options); +</PRE> + </P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>min</P> + </TD> + <TD WIDTH=80% ROWSPAN=2> + <P>Min and max timestamp in ms.</P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>max</P> + </TD> + </TR> + </TBODY> + </TABLE> +</DIV> +<H2 CLASS="heading-2-western"><A NAME="rrdFlotSelection"></A>Class rrdFlotSelection</H2> +<P>Helper class to handle <A HREF="http://code.google.com/p/flot/">Flot</A> selections. +</P> +<DIV ALIGN=RIGHT> + <TABLE WIDTH=90% BORDER=1 CELLPADDING=2 CELLSPACING=3> + <COL WIDTH=52*> + <COL WIDTH=204*> + <THEAD> + <TR VALIGN=TOP> + <TH WIDTH=20%> + <P ALIGN=LEFT>Method</P> + </TH> + <TH WIDTH=80%> + <P ALIGN=LEFT>Description</P> + </TH> + </TR> + </THEAD> + <TBODY> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>reset()</P> + </TD> + <TD WIDTH=80%> + <P>Clear the selection. (isSet() will return False)</P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>isSet()</P> + </TD> + <TD WIDTH=80%> + <P>Was a selection set?</P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>setFromFlotRanges(ranges)</P> + </TD> + <TD WIDTH=80%> + <P>Set the selection to ranges.xaxis. See plotselected + <A HREF="http://code.google.com/p/flot/">Flot</A> + event for more info on ranges. (isSet() will return True, and getFlotRanges() can now be called.)</P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>getFlotRanges()</P> + </TD> + <TD WIDTH=80%> + <P>Return a ranges object. See plotselected + <A HREF="http://code.google.com/p/flot/">Flot</A> + event for more info on ranges.</P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>trim_flot_data(flot_data)</P> + </TD> + <TD WIDTH=80%> + <P>Create a new Flot data object by selecting only the data points within the current selection.</P> + <P>An example Flot data object is +<PRE> +rrdDS2FlotObj(...).data +</PRE></P> + </TD> + </TR> + <TR VALIGN=TOP> + <TD WIDTH=20%> + <P>trim_data(data_list)</P> + </TD> + <TD WIDTH=80%> + <P>Create a new data list by selecting only the data points within the current selection.</P> + <P>An example data list is +<PRE> +rrdDS2FlotSeries(...).data +</PRE></P> + </TD> + </TR> + </TBODY> + </TABLE> +</DIV> +</BODY> +</HTML> |