CODEWITHSUNDEEP
javascriptcssajaxjqplot
Aaron
Aaron

Reputation: 1208

Plotting large dataset using JQPlot

I have an application that needs to plot at least over 5k data points and the size can nearly be limitless.

The plot goes:

X-Axis -> DateTime

Y-Axis -> Temperature

This is my current plot

    var plot1 = $.jqplot('chartdiv', dataArray, {
        title: 'Default Date Axis',
        axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } },
        series: [{ lineWidth: 4, markerOptions: { style: 'square' } }],
        numberTicks: 10   
    });

with data array containing at least 5k points in the ['Date', 'Temperature'] format.

enter image description here

The problem with this is that it'x extremely inefficient and makes the browser freeze up. I don't need it to literally put a label on every datapoint, maybe a few. Can anyone give me tips on how to optimize this?

Upvotes: 1

Views: 1099

Answers (2)

Douglas Nassif Roma Junior
Douglas Nassif Roma Junior

Reputation: 2102

If working with Primefaces 5, do this:

<p:chart id="lineChart" type="line" model="#{managedBean.lineModel}" />
<h:outputScript>
    function chartExtender() {
    // this = chart widget instance        
    // this.cfg = options     
    this.cfg.seriesDefaults = {
        lineWidth: 2, shadow: false,
        rendererOptions: { varyBarColor: true, smooth: false },
        markerOptions: { show: true, shadow: false } 
      };
    }
</h:outputScript>

On Managedbean:

LineChartModel lineModel = new LineChartModel();
//...
lineModel.setExtender("chartExtender");
//...

Greatly improved the performance for me.

Others options here.

Upvotes: 0

Jonathan
Jonathan

Reputation: 1225

You can get better performance by changing your marker types and removing shadows. I've been using these options in my plots with pretty good success:

    seriesDefaults: {
        lineWidth: 1, shadow: false, 
        rendererOptions: { smooth: false },
        markerOptions: { show: true, shadow: false, size: 2 } 
    }

Here's an example which adds 50k points to a jqplot: http://jsfiddle.net/xf8d36kc/

We have a project where we are consistently plotting 20-30k points fairly quickly. Once we start getting towards around 100k points it's still quick to display but zooming and interacting with the plot starts to have lag times of 1-3 seconds but still doesn't freeze up the browser. We experience more delay in bringing the data in from our database then actual draw time for jqplot.

I haven't looked much in to plotting sets much bigger than 100k, but after that you may want to start grouping the data serverside to limit the number of points and then expand them as you zoom in for more detail.

Upvotes: 2

Related Questions