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 = [];