Reputation: 38705

JQPlot: How to replot at different position

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

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

targetDiv is the id of different div on the page like barDiv1, barDiv2 ...

In IE9, the browser hang very often. so my idea to store the JQPlot object to barPlot like above, then if not null, then barPlot.replot(). The problem I ran into is how do I specify the a new target Id. I try

barPlot.targetId = "#" + targetDiv;

but this does not work. Please help

EDIT: here is jsfiddle: http://jsfiddle.net/YX9wX/5/

Click load, and if you alt+tab away and alt_tab back, you can see it hang on IE9, and hang until it finish all the drawing

Upvotes: 4

Answers (3)

ic3b3rg

Reputation: 14927

I think the best way to deal with IE hanging 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 a 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 Pham

In combine with this, you can call destroy() on jqplot object to release it to fix the issue with leaking memory. However since call destroy() on jqplot object will make the chart disappear, I convert the jqplot chart to image using

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

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

Upvotes: 3

sdespont

Reputation: 14025

I would try a different approach.

Ok, IE hangs when you are creating 20 graphs, but other browsers hang also, but just shorter. If you are loading a lot of data in your graphs, all browsers will hang. It is also depending on the computer performance and specific plateforms like browsers on phones for example.

The best basic design pattern I know to load big content is to use a loading layer and load a page with big content using JQuery load() function. This function will hang your browser durring loading (synchrone mode), but a message with an image will be displayed for the user comprehension.

In your case, you could have a div graphs-container hidden by default in your web page, use a div to display a loading animation (or apply a loading layer by CSS class to your graphs-container visible by default in this case), then load your big page using JQuery load() function. In the success loading callback, you can hide the loading layer and reveal the loaded page, all the graphs in your case.

Usually, I compose the loading layer class with an animate gif wheel and a simple text.

To improve the rendering performance and save the 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 load JS libs only once, JQPlot have a lot of plugins you are certainly using which take time to load.

Here is a possible implementation of a loading layer div to display a text with an animation durring the graphs-loading:

<!-- 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>

Upvotes: 1

Juan Mellado

Reputation: 15113

Perhaps I misunderstood your question, but... you have some HTML div targets (20?):

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

A common 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 a div target with some concrete render options (say, blue color):

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

And then do you want to replot the same data in some different div targets with other render options?

If so, try to call the initmethod 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});

Upvotes: 3

JQPlot: How to replot at different position

Answers (3)

Edit

JSFiddle

Related Questions