Author: croberts
Date: 2011-11-30 20:53:45 +0000 (Wed, 30 Nov 2011)
New Revision: 5156
Modified:
branches/noflash/cumin/resources/app.js
Log:
Taking a moment to introduce some badly needed documentation into the jqplot charts.
Modified: branches/noflash/cumin/resources/app.js
===================================================================
--- branches/noflash/cumin/resources/app.js 2011-11-30 16:17:44 UTC (rev 5155)
+++ branches/noflash/cumin/resources/app.js 2011-11-30 20:53:45 UTC (rev 5156)
@@ -427,28 +427,52 @@
return false;
}
+/*
+ This block of code sets up the allCharts object which is where all of the
+ charts will be stored. If a given chart already exists in the allCharts
+ object, it will be redrawn rather than fully rebuilt to preserve client side
+ cycles/memory
+*/
var allCharts = new Object();
chart_href = 0; //used if we rearrange the divs that show the charts
window.addEvent("domready", function() {
drawAllCharts();
});
+
+/*
+ This function grabs all of the charts [with the .joplotgraph class] on the page and
+ triggers a draw [or redraw] for each of them
+*/
drawAllCharts = function() {
$$('.jqplotgraph').each(function(thisdiv) {
drawSingleChart(thisdiv);
});
}
+/*
+ This function grabs the data url (chart.json) from the div that will house the chart.
+ It then uses the wooly.setIntervalUpdate to fetch the data via AJAX and will call the
stathandler
+ function after that data is fetched
+*/
drawSingleChart = function(id) {
var jsonurl =
$(id).getParent().getElements('a')[chart_href].get('href');
var passback = "";
wooly.setIntervalUpdate(jsonurl, stathandler, 0, passback, true);
}
+/*
+ This function sets up the timer that will trigger the updating of each chart
+*/
startChartMonitor = function(id) {
setInterval(function() {drawSingleChart(id)}, 10000);
}
+/*
+ This function is meant to take the JSON response from cumin and do some basic work on
it (determine max/min).
+ A lot of the dirtier work is done in the parseJson function.
+ After getting the data into the dataContainer object, the drawChart function is
called
+*/
stathandler = function(response) {
try {
response = JSON.decode(response);
@@ -463,6 +487,13 @@
return true;
}
+
+/*
+ The parseJson function takes the output from cumin and massages it into
+ something that is useful for the charting library in use (currently jqplot).
+ It is most definitely easier to tweak this function as needed than it is to
+ make significant (and possibly temporary) adjustments to the cumin output
+*/
parseJson = function(json) {
var dataContainer = new Object();
dataContainer['end_secs'] = json.end_secs;
@@ -517,17 +548,20 @@
dataContainer['x_axis_values'] = dataContainer['x_axis_values']
.append([ json.x_axis.labels.labels[i].text ]);
}
-
-
-// console.log("end_secs: " + dataContainer['end_secs'] + "
tnow: "
-// + dataContainer['tnow']);
+// console.log("end_secs: " + dataContainer['end_secs'] + "
tnow: " + dataContainer['tnow']);
// console.log("x-axis vals: " + dataContainer['x_axis_values']);
// console.log("x_coord_vals: " +
dataContainer['x_coordinate_values']);
// console.log("y_coord_vals: " +
dataContainer['y_coordinate_values']);
return dataContainer;
}
-
+
+
+/*
+ This function takes the dataContainer and formats the data (and labels)
+ for jqplot library. The resultant series array is used in the options
+ passed to draw the chart.
+*/
getSeries = function(dataContainer) {
var series = new Array(dataContainer['labels'].length);
for(var i=0; i < dataContainer['labels'].length; i++) {
@@ -535,10 +569,15 @@
}
return series;
}
-
+
+/*
+ This function will render a jqplot chart for the given div (holder), dataContainer
(lists of data) and options on that data (dataopts)
+*/
drawChart = function(holder, dataContainer, dataopts) {
- $j.jqplot.config.enablePlugins = true;
+ $j.jqplot.config.enablePlugins = true; // needed when using pie and non-pie charts
since pie charts explicitly turn off enablePlugins
+ // The chartOptionsObject is where the action is. Pretty much every characteristic of
the chart is defined here.
+ // Details on usage are found here:
http://www.jqplot.com/docs/files/usage-txt.html
var chartOptionsObject = {
title: {
text: '',
@@ -572,7 +611,6 @@
pad:0,
min:dataopts['xmin'] / dataContainer['x_axis_normalizer'],
max:dataopts['xmax'] / dataContainer['x_axis_normalizer'],
- //ticks:[[-3600, "60 min"], [-2700, "45 min"], [-1800, "30
min"], [-900, "15 min"], [0, "0"]]
tickOptions:{formatString:'%.0f ' +
dataContainer['x_axis_unit_label'], formatter: x_axis_Formatter,},
}
},
@@ -587,44 +625,47 @@
highlightMouseOver: false,
highlightMouseDown: false,
highlightColor: null,
- markerRenderer: $j.jqplot.MarkerRenderer,
+ markerRenderer: $j.jqplot.MarkerRenderer,
},
markerOptions: {show:true,
lineWidth:2,
style:'filledCircle',
size:4,
- },
+ },
},
highlighter: {
- tooltipaxes:'xy',
- show: true,
- formatString:'<table
class="jqplot-highlighter"><tr><td>Time:</td><td>%s</td></tr><tr><td>Value:</td><td>%s</td></tr></table>'
+ tooltipaxes:'xy',
+ show: true,
+ formatString:'<table
class="jqplot-highlighter"><tr><td>Time:</td><td>%s</td></tr><tr><td>Value:</td><td>%s</td></tr></table>'
},
cursor:{show:true,
- zoom:true,
- looseZoom:true,
- showCursorLegend:false,
- constrainZoomTo: 'x'
- },
-
- }
+ zoom:true,
+ looseZoom:true,
+ showCursorLegend:false,
+ constrainZoomTo: 'x'
+ },
+ }; // end of chartOptionsObject
+
var divName = $(holder).get('id');
+
+ // if the chart already exists, perform a "replot()" on the chart, otherwise,
draw the chart from scratch
if(allCharts[divName]) {
for(i=0; i < allCharts[divName].series.length; i++) {
allCharts[divName].series[i].data =
dataContainer['y_coordinate_values'][i];
}
- try{
-
allCharts[divName].replot({resetAxes:(!allCharts[divName].plugins.cursor._zoom.isZoomed),
axes:{y2axis:{autoscale:true,min:0,numberTicks:4,}, xaxis:{min:dataopts['xmin'] /
dataContainer['x_axis_normalizer'], max:dataopts['xmax'] /
dataContainer['x_axis_normalizer'],tickOptions:{formatString:'%.0f ' +
dataContainer['x_axis_unit_label'], formatter: x_axis_Formatter,}}}})
- } catch (err) {
- // this is needed in the event of the first draw for a fullpage chart
- allCharts[divName] = $j.jqplot(holder,
dataContainer['y_coordinate_values'],chartOptionsObject);
- }
+ try {
+
allCharts[divName].replot({resetAxes:(!allCharts[divName].plugins.cursor._zoom.isZoomed),
axes:{y2axis:{autoscale:true,min:0,numberTicks:4,}, xaxis:{min:dataopts['xmin'] /
dataContainer['x_axis_normalizer'], max:dataopts['xmax'] /
dataContainer['x_axis_normalizer'],tickOptions:{formatString:'%.0f ' +
dataContainer['x_axis_unit_label'], formatter: x_axis_Formatter,}}}})
+ } catch (err) {
+ // this is needed in the event of the first draw for a fullpage chart
+ allCharts[divName] = $j.jqplot(holder,
dataContainer['y_coordinate_values'],chartOptionsObject);
+ }
} else {
allCharts[divName] = $j.jqplot(holder,
dataContainer['y_coordinate_values'],chartOptionsObject);
startChartMonitor(divName);
}
-}
-
+} // end functio drawChart
+
+// used in axis:tickOptions:formatter to override the default axis label formatting
x_axis_Formatter = function (format, val) {
if (typeof val == 'number') {
if (!format) {
@@ -637,6 +678,7 @@
}
}
+// used in axis:tickOptions:formatter to override the default axis label formatting
y_axis_Formatter = function (format, val) {
tickval = "";
if (typeof val == 'number') {
@@ -659,6 +701,10 @@
return tickval;
}
+/*
+ This function draws or updates the pie located in "piediv"
+ with the given data (vals) and specified colors
+*/
updatePieChart = function (piediv, vals, colors) {
$j.jqplot.config.enablePlugins = false;
var data = vals;
@@ -696,6 +742,8 @@
);
}
+// utility for Pie chart drawing since cumin gives us separate lists for data values and
labels.
+// This returns a single list of the format [[label1,data1], [labelN, dataN]]
combineValsAndLegend = function (vals, legend) {
var index, length;
var result = [];