JQPlot: how to rearrange

Question

JQPlot: how to rearrange

So, I need to display about 120 bar charts on my screen, so I do the following

var barPlot = $.jqplot(targetDiv, jsonBarObj, createBarChartOption(jsonLegendObj, jsonColsObj))

targetDiv is the identifier of another div on the page, for example barDiv1 , barDiv2 ...

In IE9, the browser hangs very often. so my idea is to store the JQPlot object before barPlot , as mentioned above, then, if not null, then barPlot.replot() . The problem I am facing is how to specify a new target Id . I'm trying to

 barPlot.targetId = "#" + targetDiv;

but it does not work. Please, help

EDIT : here's jsfiddle: http://jsfiddle.net/YX9wX/5/

Click on download, and if you added Alt + Tab and Alt_TAB, you can see how it hangs on IE9 and hang until it finishes all the drawings

+4

javascript jquery jqplot

Thang pham Dec 28 '12 at 20:16

source share

3 answers

Maybe I misunderstood your question, but ... you have some goals for the HTML div (20?):

 <div id="targetDiv1"></div> <div id="targetDiv2"></div> <div id="targetDiv3"></div>

General data (any):

 var data = [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]];

One first plot in the target div with some specific rendering options (e.g. blue):

 var barPlot = $.jqplot("targetDiv1", data, {series: [{color: "#0000ff"}]});

And then you want to reorder the same data in some different div objects with different rendering options?

If so, try calling init and then replot :

 barPlot.init("targetDiv2", barPlot.data, {series: [{color: "#ff0000"}]}); barPlot.replot({clear: false}); barPlot.init("targetDiv3", barPlot.data, {series: [{color: "#ff00ff"}]}); barPlot.replot({clear: false});

+3

Juan mellado Jan 2 '13 at 15:37

source share

I would try a different approach.

Well, IE freezes when you create 20 graphs, but other browsers also hang, but only shorter. If you download a lot of data on your charts, all browsers will hang. It also depends on the performance of the computer and specific forms, such as browsers, for example, on phones.

The best basic design pattern I know for loading large content is to use a loading layer and load a page with large content using the jQuery load() function. This function will cause the browser to freeze (synchronous mode), but for understanding the user will see a message with an image.

In your case, you may have a graphs-container div hidden by default on your web page, use the div to display the loading animation (or apply a CSS class loading layer to your graphs-container , apparently the default in this case), then load your large page using the jQuery load() function. With the success loading callback, you can hide the loading layer and open the loaded page, all the graphics in your case.

Usually I compose a loadable layer class with an animated gif wheel and plain text.

To improve rendering performance and preserve user bandwidth, you can also compress web pages using PHP ob-gzhandler or directly using .htaccess rules: http://www.xpertdeveloper.com/2012/04/htaccess-gzip-compression /

Another tip would be to download JS libs only once, JQPlot has many plugins that you definitely use, which takes time to load.

The following is a possible implementation of a loading div layer for displaying text with animation loading graphs:

 <!-- The loading layer with loading message and animated GIF --> <div id='graphs-loading-layer' class='loading'>Loading in progress...</div> <!-- The target div to load all your graphs --> <div id='graphs-container'></div> <!-- Loading class example --> <style> .loading{ border:1px dotted black; font-size:25px; background-color:white; background-image:url(./loading.gif); background-repeat:no-repeat; background-position:center center; opacity:0.6; z-index:200; width:99%; min-height:442px; border-radius: 10px; position:relative; text-align:center; line-height:300px; } </style> <script> //allJQPlotGraphs.php is the file (or a call to a controller in MVC model) where the graphs are generated $('#graphs-container').hide().load('allJQPlotGraphs.php',{/*JSON map data*/},function(){ //Here is the success callback, fade out the loading layer div $('#graphs-loading-layer').fadeOut(300,function(){ //Then, display the graphs container with all graphs loaded $('#graphs-container').fadeIn(300); }); }); </script>

+1

sdespont Jan 6 '13 at 16:44

source share

ic3b3rg · Accepted Answer · 2013-01-02T16:25:32+0000

I think the best way to deal with IE freezing is to give the browser a short break after each plot:

 $(function(){createPlot(1);}); function createPlot(plotIndex){ var targetDiv = "barDiv" + plotIndex; // define jsonBarObj, jsonLegendObj & jsonColsObj here $.jqplot(targetDiv, jsonBarObj, createBarChartOption(jsonLegendObj, jsonColsObj)) if(plotIndex < 20) setTimeout(function(){createPlot(++plotIndex);},1); }

Edit

Jsfiddle

Here's the full working html:

 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/jquery.jqplot.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.barRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.cursor.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.canvasTextRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.highlighter.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.categoryAxisRenderer.js"></script> <script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/81ec4eb933068c5009958b504feef3f27e1b1129/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script> <style> //jquery.jqplot.css /*rules for the plot target div. These will be cascaded down to all plot elements according to css rules*/ .jqplot-target { position: relative; color: #666666; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1em; /* height: 300px; width: 400px;*/ } /*rules applied to all axes*/ .jqplot-axis { font-size: 0.75em; } .jqplot-xaxis { margin-top: 10px; } .jqplot-x2axis { margin-bottom: 10px; } .jqplot-yaxis { margin-right: 10px; } .jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis { margin-left: 10px; margin-right: 10px; } /*rules applied to all axis tick divs*/ .jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick { position: absolute; white-space: pre; } .jqplot-xaxis-tick { top: 0px; /* initial position untill tick is drawn in proper place */ left: 15px; /* padding-top: 10px;*/ vertical-align: top; } .jqplot-x2axis-tick { bottom: 0px; /* initial position untill tick is drawn in proper place */ left: 15px; /* padding-bottom: 10px;*/ vertical-align: bottom; } .jqplot-yaxis-tick { right: 0px; /* initial position untill tick is drawn in proper place */ top: 15px; /* padding-right: 10px;*/ text-align: right; } .jqplot-yaxis-tick.jqplot-breakTick { right: -20px; margin-right: 0px; padding:1px 5px 1px 5px; /* background-color: white;*/ z-index: 2; font-size: 1.5em; } .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick { left: 0px; /* initial position untill tick is drawn in proper place */ top: 15px; /* padding-left: 10px;*/ /* padding-right: 15px;*/ text-align: left; } .jqplot-yMidAxis-tick { text-align: center; white-space: nowrap; } .jqplot-xaxis-label { margin-top: 10px; font-size: 11pt; position: absolute; } .jqplot-x2axis-label { margin-bottom: 10px; font-size: 11pt; position: absolute; } .jqplot-yaxis-label { margin-right: 10px; /* text-align: center;*/ font-size: 11pt; position: absolute; } .jqplot-yMidAxis-label { font-size: 11pt; position: absolute; } .jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label { /* text-align: center;*/ font-size: 11pt; margin-left: 10px; position: absolute; } .jqplot-meterGauge-tick { font-size: 0.75em; color: #999999; } .jqplot-meterGauge-label { font-size: 1em; color: #999999; } table.jqplot-table-legend { margin-top: 12px; margin-bottom: 12px; margin-left: 12px; margin-right: 12px; } table.jqplot-table-legend, table.jqplot-cursor-legend { background-color: rgba(255,255,255,0.6); border: 1px solid #cccccc; position: absolute; font-size: 0.75em; } td.jqplot-table-legend { vertical-align:middle; } /* These rules could be used instead of assigning element styles and relying on js object properties. */ /* td.jqplot-table-legend-swatch { padding-top: 0.5em; text-align: center; } tr.jqplot-table-legend:first td.jqplot-table-legend-swatch { padding-top: 0px; } */ td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active { cursor: pointer; } .jqplot-table-legend .jqplot-series-hidden { text-decoration: line-through; } div.jqplot-table-legend-swatch-outline { border: 1px solid #cccccc; padding:1px; } div.jqplot-table-legend-swatch { width:0px; height:0px; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; border-right-width: 6px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; } .jqplot-title { top: 0px; left: 0px; padding-bottom: 0.5em; font-size: 1.2em; } table.jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; } .jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208,208,208,0.5); padding: 1px; } .jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208,208,208,0.5); padding: 1px; } .jqplot-point-label { font-size: 0.75em; z-index: 2; } td.jqplot-cursor-legend-swatch { vertical-align: middle; text-align: center; } div.jqplot-cursor-legend-swatch { width: 1.2em; height: 0.7em; } .jqplot-error { /* Styles added to the plot target container when there is an error go here.*/ text-align: center; } .jqplot-error-message { /* Styling of the custom error message div goes here.*/ position: relative; top: 46%; display: inline-block; } div.jqplot-bubble-label { font-size: 0.8em; /* background: rgba(90%, 90%, 90%, 0.15);*/ padding-left: 2px; padding-right: 2px; color: rgb(20%, 20%, 20%); } div.jqplot-bubble-label.jqplot-bubble-label-highlight { background: rgba(90%, 90%, 90%, 0.7); } div.jqplot-noData-container { text-align: center; background-color: rgba(96%, 96%, 96%, 0.3); } </style> </head> <body id="b"> <button class="button">Load</button> <div class="chart" id="chart0" style="width: 300px; height: 200px"></div> <div class="chart" id="chart1" style="width: 300px; height: 200px"></div> <div class="chart" id="chart2" style="width: 300px; height: 200px"></div> <div class="chart" id="chart3" style="width: 300px; height: 200px"></div> <div class="chart" id="chart4" style="width: 300px; height: 200px"></div> <div class="chart" id="chart5" style="width: 300px; height: 200px"></div> <div class="chart" id="chart6" style="width: 300px; height: 200px"></div> <div class="chart" id="chart7" style="width: 300px; height: 200px"></div> <div class="chart" id="chart8" style="width: 300px; height: 200px"></div> <div class="chart" id="chart9" style="width: 300px; height: 200px"></div> <div class="chart" id="chart10" style="width: 300px; height: 200px"></div> <div class="chart" id="chart11" style="width: 300px; height: 200px"></div> <div class="chart" id="chart12" style="width: 300px; height: 200px"></div> <div class="chart" id="chart13" style="width: 300px; height: 200px"></div> <div class="chart" id="chart14" style="width: 300px; height: 200px"></div> <div class="chart" id="chart15" style="width: 300px; height: 200px"></div> <div class="chart" id="chart16" style="width: 300px; height: 200px"></div> <div class="chart" id="chart17" style="width: 300px; height: 200px"></div> <div class="chart" id="chart18" style="width: 300px; height: 200px"></div> <div class="chart" id="chart19" style="width: 300px; height: 200px"></div> <div class="chart" id="chart20" style="width: 300px; height: 200px"></div> <div class="chart" id="chart21" style="width: 300px; height: 200px"></div> <div class="chart" id="chart22" style="width: 300px; height: 200px"></div> <div class="chart" id="chart23" style="width: 300px; height: 200px"></div> <div class="chart" id="chart24" style="width: 300px; height: 200px"></div> <div class="chart" id="chart25" style="width: 300px; height: 200px"></div> <div class="chart" id="chart26" style="width: 300px; height: 200px"></div> <div class="chart" id="chart27" style="width: 300px; height: 200px"></div> <div class="chart" id="chart28" style="width: 300px; height: 200px"></div> <div class="chart" id="chart29" style="width: 300px; height: 200px"></div> <div class="chart" id="chart30" style="width: 300px; height: 200px"></div> <div class="chart" id="chart31" style="width: 300px; height: 200px"></div> <div class="chart" id="chart32" style="width: 300px; height: 200px"></div> <div class="chart" id="chart33" style="width: 300px; height: 200px"></div> <div class="chart" id="chart34" style="width: 300px; height: 200px"></div> <div class="chart" id="chart35" style="width: 300px; height: 200px"></div> <div class="chart" id="chart36" style="width: 300px; height: 200px"></div> <div class="chart" id="chart37" style="width: 300px; height: 200px"></div> <div class="chart" id="chart38" style="width: 300px; height: 200px"></div> <div class="chart" id="chart39" style="width: 300px; height: 200px"></div> <div class="chart" id="chart40" style="width: 300px; height: 200px"></div> <div class="chart" id="chart41" style="width: 300px; height: 200px"></div> <div class="chart" id="chart42" style="width: 300px; height: 200px"></div> <div class="chart" id="chart43" style="width: 300px; height: 200px"></div> <div class="chart" id="chart44" style="width: 300px; height: 200px"></div> <div class="chart" id="chart45" style="width: 300px; height: 200px"></div> <div class="chart" id="chart46" style="width: 300px; height: 200px"></div> <div class="chart" id="chart47" style="width: 300px; height: 200px"></div> <div class="chart" id="chart48" style="width: 300px; height: 200px"></div> <div class="chart" id="chart49" style="width: 300px; height: 200px"></div> <div class="chart" id="chart50" style="width: 300px; height: 200px"></div> <div class="chart" id="chart51" style="width: 300px; height: 200px"></div> <div class="chart" id="chart52" style="width: 300px; height: 200px"></div> <div class="chart" id="chart53" style="width: 300px; height: 200px"></div> <div class="chart" id="chart54" style="width: 300px; height: 200px"></div> <div class="chart" id="chart55" style="width: 300px; height: 200px"></div> <div class="chart" id="chart56" style="width: 300px; height: 200px"></div> <div class="chart" id="chart57" style="width: 300px; height: 200px"></div> <div class="chart" id="chart58" style="width: 300px; height: 200px"></div> <div class="chart" id="chart59" style="width: 300px; height: 200px"></div> <div class="chart" id="chart60" style="width: 300px; height: 200px"></div> <div class="chart" id="chart61" style="width: 300px; height: 200px">2</div> <div class="chart" id="chart62" style="width: 300px; height: 200px"></div> <div class="chart" id="chart63" style="width: 300px; height: 200px"></div> <div class="chart" id="chart64" style="width: 300px; height: 200px"></div> <div class="chart" id="chart65" style="width: 300px; height: 200px"></div> <div class="chart" id="chart66" style="width: 300px; height: 200px"></div> <div class="chart" id="chart67" style="width: 300px; height: 200px"></div> <div class="chart" id="chart68" style="width: 300px; height: 200px"></div> <div class="chart" id="chart69" style="width: 300px; height: 200px"></div> <div class="chart" id="chart70" style="width: 300px; height: 200px"></div> <div class="chart" id="chart71" style="width: 300px; height: 200px"></div> <div class="chart" id="chart72" style="width: 300px; height: 200px"></div> <div class="chart" id="chart73" style="width: 300px; height: 200px"></div> <div class="chart" id="chart74" style="width: 300px; height: 200px"></div> <div class="chart" id="chart75" style="width: 300px; height: 200px"></div> <div class="chart" id="chart76" style="width: 300px; height: 200px"></div> <div class="chart" id="chart77" style="width: 300px; height: 200px"></div> <div class="chart" id="chart78" style="width: 300px; height: 200px"></div> <div class="chart" id="chart79" style="width: 300px; height: 200px"></div> <div class="chart" id="chart80" style="width: 300px; height: 200px"></div> <div class="chart" id="chart81" style="width: 300px; height: 200px"></div> <div class="chart" id="chart82" style="width: 300px; height: 200px"></div> <div class="chart" id="chart83" style="width: 300px; height: 200px"></div> <div class="chart" id="chart84" style="width: 300px; height: 200px"></div> <div class="chart" id="chart85" style="width: 300px; height: 200px"></div> <div class="chart" id="chart86" style="width: 300px; height: 200px"></div> <div class="chart" id="chart87" style="width: 300px; height: 200px"></div> <div class="chart" id="chart88" style="width: 300px; height: 200px"></div> <div class="chart" id="chart89" style="width: 300px; height: 200px"></div> <div class="chart" id="chart90" style="width: 300px; height: 200px"></div> <div class="chart" id="chart91" style="width: 300px; height: 200px"></div> <div class="chart" id="chart92" style="width: 300px; height: 200px"></div> <div class="chart" id="chart93" style="width: 300px; height: 200px"></div> <div class="chart" id="chart94" style="width: 300px; height: 200px"></div> <div class="chart" id="chart95" style="width: 300px; height: 200px"></div> <div class="chart" id="chart96" style="width: 300px; height: 200px"></div> <div class="chart" id="chart97" style="width: 300px; height: 200px"></div> <div class="chart" id="chart98" style="width: 300px; height: 200px"></div> <div class="chart" id="chart99" style="width: 300px; height: 200px"></div> <div class="chart" id="chart100" style="width: 300px; height: 200px"></div> <div class="chart" id="chart101" style="width: 300px; height: 200px"></div> <div class="chart" id="chart102" style="width: 300px; height: 200px"></div> <div class="chart" id="chart103" style="width: 300px; height: 200px"></div> <div class="chart" id="chart104" style="width: 300px; height: 200px"></div> <div class="chart" id="chart105" style="width: 300px; height: 200px"></div> <div class="chart" id="chart106" style="width: 300px; height: 200px"></div> <div class="chart" id="chart107" style="width: 300px; height: 200px"></div> <div class="chart" id="chart108" style="width: 300px; height: 200px"></div> <div class="chart" id="chart109" style="width: 300px; height: 200px"></div> <div class="chart" id="chart110" style="width: 300px; height: 200px"></div> <div class="chart" id="chart111" style="width: 300px; height: 200px"></div> <div class="chart" id="chart112" style="width: 300px; height: 200px"></div> <div class="chart" id="chart113" style="width: 300px; height: 200px"></div> <div class="chart" id="chart114" style="width: 300px; height: 200px"></div> <div class="chart" id="chart115" style="width: 300px; height: 200px"></div> <div class="chart" id="chart116" style="width: 300px; height: 200px"></div> <div class="chart" id="chart117" style="width: 300px; height: 200px"></div> <div class="chart" id="chart118" style="width: 300px; height: 200px"></div> <div class="chart" id="chart119" style="width: 300px; height: 200px"></div> <div class="chart" id="chart120" style="width: 300px; height: 200px"></div> </body> <script> var data = [[2.609466E7],[4272988.0],[999165.0],[123805.0]]; var label = ["Business Workstations","Home Desktops","Display Devices","Accessories"]; var colorsSpec = ['#fab818', '#c1e800', '#9ed927', '#00c2b4', '#33ccff', '#2bacf8', '#4c8ded', '#7079db', '#753374', '#e63262', '#f77a19', '#fedb00']; jQuery('.button').click(function(){ loadChart(1); }); function loadChart(chartIndex){ var size = jQuery('.chart').size(); var targetDiv = 'chart' + chartIndex; generateStackedBarCharts(data, label, [''], targetDiv); if(chartIndex < size) { setTimeout(function(){loadChart(++chartIndex);}); } } function generateStackedBarCharts(jsonDataObj, jsonLegendObj, jsonColsObj, targetDiv) { plot3 = $.jqplot(targetDiv, jsonDataObj, { // Only animate if we're not using excanvas (not in IE 7 or IE // 8).. animate: !$.jqplot.use_excanvas, animateReplot: !$.jqplot.use_excanvas, seriesColors: colorsSpec, // Tell the plot to stack the bars. stackSeries: true, captureRightClick: true, seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { // Put a 30 pixel margin between bars. barMargin: 30, // Highlight bars when mouse button pressed. // Disables default highlighting on mouse over. highlightMouseDown: true }, pointLabels: { show: true, hideZeros: true, edgeTolerance: -5 } }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: jsonColsObj, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: -30, fontFamily: 'Arial', fontSize: '9pt' } }, yaxis: { // Don't pad out the bottom of the data range. By default, // axes scaled as if data extended 10% above and below the // actual range to prevent data points right on grid // boundaries. // Don't want to do that here. padMin: 0, min: 0 } }, legend: { show: true, labels: jsonLegendObj, location: 'e', placement: 'outside' }, cursor: { show: true, zoom: true, showTooltip: true, followMouse: true } }); } </script> </html>

EDIT FROM THANG FAM

Combined with this, you can call destroy () on the jqplot object to free it in order to fix a memory leak problem. However, since call destroy () on the jqplot object will make the chart disappear, I will convert the jqplot chart to an image using

https://bitbucket.org/cleonello/jqplot/issue/14/export-capabilities#comment-554274

the method from the link above will return a base64 image string that can be passed to <img> using jQuery. Once this is done, you can safely call destroy () on the jqplot object.

JQPlot: how to rearrange

Edit

Jsfiddle

More articles: