Author: croberts Date: 2011-10-12 20:23:14 +0000 (Wed, 12 Oct 2011) New Revision: 5062
Modified: branches/noflash/cumin/python/cumin/stat.strings branches/noflash/cumin/resources/app.js Log: Fixing the overlapping chart problem. We now keep an array of all charts for the given page and use that to manage the clear/redraw cycle on updates.
Modified: branches/noflash/cumin/python/cumin/stat.strings =================================================================== --- branches/noflash/cumin/python/cumin/stat.strings 2011-10-12 18:33:46 UTC (rev 5061) +++ branches/noflash/cumin/python/cumin/stat.strings 2011-10-12 20:23:14 UTC (rev 5062) @@ -298,8 +298,9 @@ <div class="StatValueChart{fullpageable}" id="{id}"> <h2>{title}</h2> <div class="duration">{duration}</div> - <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> + <!-- don't put this data url inside the holder div, jqplot will kill it on a zoom --> + <a rel="api" type="application/json" href="{href}" style="display:none">Data</a> + <div id="{id_nodots}_chart" class="jqplotgraph" style="height:150px;width:400px;"> <div class="loading" style="display:none;"><span>Loading...</span></div> </div> </div>
Modified: branches/noflash/cumin/resources/app.js =================================================================== --- branches/noflash/cumin/resources/app.js 2011-10-12 18:33:46 UTC (rev 5061) +++ branches/noflash/cumin/resources/app.js 2011-10-12 20:23:14 UTC (rev 5062) @@ -561,6 +561,7 @@ return false; }
+var allCharts = new Object(); window.addEvent("domready", function() { drawAllCharts(); }); @@ -568,7 +569,7 @@ drawAllCharts = function() { $$('.jqplotgraph').each(function(thisdiv) { var div = $(thisdiv); - var jsonurl = $(div).getElements('a').get('href'); + var jsonurl = $(div).getParent().getElements('a')[3].get('href'); var jsonRequest = new Request.JSON({ url : jsonurl, @@ -649,8 +650,7 @@ drawChart = function(holder, dataContainer, dataopts) { $j.jqplot.config.enablePlugins = true;
- - $j.jqplot(holder, dataContainer['y_coordinate_values'], { + var chartOptionsObject = { grid: { background: '#FFFFFF' }, legend: {show:true, location: 'n', @@ -689,7 +689,15 @@ looseZoom:true, showCursorLegend:false} - }); + } + var divName = $(holder).get('id'); + if(allCharts[divName]) { + allCharts[divName].redraw(true); + allCharts[divName] = $j.jqplot(holder, dataContainer['y_coordinate_values'],chartOptionsObject); + } else { + allCharts[divName] = $j.jqplot(holder, dataContainer['y_coordinate_values'],chartOptionsObject); + } + console.log("Done"); }