Author: croberts Date: 2011-10-12 15:06:26 +0000 (Wed, 12 Oct 2011) New Revision: 5057
Modified: branches/noflash/cumin/python/cumin/stat.py branches/noflash/cumin/python/cumin/stat.strings branches/noflash/cumin/resources/app.js Log: Some more progress on the way to eliminating the flash charts in favor of a pure JavaScript method. This checkpoint replaces all of the line/area graphs with their JavaScript replacements. There's still plenty of tweaking and tuning to be done, most notably, getting the updates to work and allow the changing of the intervals.
Modified: branches/noflash/cumin/python/cumin/stat.py =================================================================== --- branches/noflash/cumin/python/cumin/stat.py 2011-10-12 13:18:24 UTC (rev 5056) +++ branches/noflash/cumin/python/cumin/stat.py 2011-10-12 15:06:26 UTC (rev 5057) @@ -235,6 +235,9 @@
def render_height(self, session): return 120 + + def render_id_nodots(self, session): + return self.render_id(session).replace(".", "_")
class ImageCache(object): def __init__(self):
Modified: branches/noflash/cumin/python/cumin/stat.strings =================================================================== --- branches/noflash/cumin/python/cumin/stat.strings 2011-10-12 13:18:24 UTC (rev 5056) +++ branches/noflash/cumin/python/cumin/stat.strings 2011-10-12 15:06:26 UTC (rev 5057) @@ -298,30 +298,13 @@ <div class="StatValueChart{fullpageable}" id="{id}"> <h2>{title}</h2> <div class="duration">{duration}</div> - <div id="{id}_chart"> - <img id="{id}" src="{img_href}" height="{img_height}" width="{img_width}" alt="stats" /> + <div id="{id_nodots}_chart" class="jqplotgraph" style="height:150px;width:400px;"> + <a rel="api" type="application/json" href="{href}" style="display:none">Data</a> <div class="loading" style="display:none;"><span>Loading...</span></div> </div> </div> </div> -<script type="text/javascript"> -//<![CDATA[ - var flashversion = swfobject.getFlashPlayerVersion(); - if (flashversion.major < 9) { - wooly.addPageUpdateListener(function () {if (document.images["{id}"].className == "Loading") return; cumin.updateChart("{id}");}); - cumin.setupChart('{id}', {width}); - } else { - swfobject.embedSWF("resource?name=open-flash-chart.swf", "{id}_chart", "{width}", "{height}", "9.0.0", "", - {"data-file":"{href}", "id":"{id}"}, {wmode: "opaque"});
- wooly.addPageUpdateListener(function () { cumin.updateFlashChart('{id}'); }); - window.addEvent('domready',function () { - cumin.setFullpageHandler('{id}', '{fullpage_href}'); - }); - } -//]]> -</script> - [GenericChart.css] div.FullpageChart { margin: 1.5em;
Modified: branches/noflash/cumin/resources/app.js =================================================================== --- branches/noflash/cumin/resources/app.js 2011-10-12 13:18:24 UTC (rev 5056) +++ branches/noflash/cumin/resources/app.js 2011-10-12 15:06:26 UTC (rev 5057) @@ -560,3 +560,127 @@ } return false; } + +window.addEvent("domready", function() { + $$('.jqplotgraph').each(function(thisdiv) { + var div = $(thisdiv); + var jsonurl = $(div).getElements('a').get('href'); + var jsonRequest = new Request.JSON({ + url : jsonurl, + + onComplete : function(response) { + console.log("complete: " + response); + }, + onFailure : function(error) { + console.log(error.responseText); + }, + onSuccess : function(json) { + console.log("Success"); + dataContainer = parseJson(json); + drawChart($(div).get('id'), dataContainer); + } + }).get(); // the .get() here fires-off the json request + }); +}); + +parseJson = function(json) { + var dataContainer = new Object(); + dataContainer['end_secs'] = json.end_secs; + dataContainer['tnow'] = json.tnow; + dataContainer['x_axis_values'] = []; + for ( var i = 0; i < json.x_axis.labels.labels.length; i++) { + dataContainer['x_axis_values'] = dataContainer['x_axis_values'] + .append([ json.x_axis.labels.labels[i].text ]); + } + + dataContainer['x_coordinate_values'] = new Array(); + for ( var i = 0; i < json.elements.length; i++) { + dataContainer['x_coordinate_values'][i] = new Array(); + for ( var j = 0; j < json.elements[i].values.length; j++) { + dataContainer['x_coordinate_values'][i] + .append([ json.elements[i].values[j].dt ]); + } + } + + dataContainer['y_coordinate_values'] = new Array(); + for ( var i = 0; i < json.elements.length; i++) { + dataContainer['y_coordinate_values'][i] = new Array(); + for ( var j = 0; j < json.elements[i].values.length; j++) { + dataContainer['y_coordinate_values'][i].append([ [ + json.elements[i].values[j].dt - dataContainer['tnow'], + json.elements[i].values[j].y ] ]); + } + } + + dataContainer['labels'] = new Array(json.elements.length); + for ( var i = 0; i < json.elements.length; i++) { + dataContainer['labels'][i] = json.elements[i].text; + } + + for ( var i = 0; i < json.x_axis.labels.labels.length; i++) { + 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("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; +} + +getSeries = function(dataContainer) { + var series = new Array(dataContainer['labels'].length); + for(var i=0; i < dataContainer['labels'].length; i++) { + series[i] = {yaxis: 'y2axis', label: dataContainer['labels'][i]}; + } + return series; +} + +drawChart = function(holder, dataContainer) { + $j.jqplot.config.enablePlugins = true; + + + $j.jqplot(holder, dataContainer['y_coordinate_values'], { + grid: { background: '#FFFFFF' }, + legend: {show:true, + location: 'n', + renderer: $j.jqplot.horizontalLegendRenderer, + yoffset: 0, + xoffset: 0, + placement: "outsideGrid"}, + axes: { + y2axis: {autoscale: true, min:0}, + xaxis: {autoscale: false, pad:0, min:-3600, max:0, + // probably need to pass in min/max based on current selection + // renderer:$j.jqplot.DateAxisRenderer, + // tickOptions: {formatString: '%#M'}, + } + }, + series: getSeries(dataContainer), + seriesColors: ['#cc0000', '#00cc00', '#0000cc'], + seriesDefaults: { + fill:true, + fillAndStroke:true, + fillAlpha: 0.4, + rendererOptions: { + highlightMouseOver: false, + highlightMouseDown: false, + highlightColor: null, + markerRenderer: $j.jqplot.MarkerRenderer, + }, + markerOptions: {show:true, + lineWidth:2, + style:'filledCircle', + size:4}, + }, + cursor:{show:true, + zoom:true, + looseZoom:true, + showCursorLegend:false} + + }); +} + +