Plotting large dataset using JQPlot

Question

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.

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?

Answer 1

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.