Jquery Flot Slow & freezes IE

Question

I currently have to plot in the neighborhood of 8000 - 32000 points (4 lines * 8000 points) I am getting my data via a JSON request and that works perfectly actually the data is returned to me in less than a second. However whenever I get to the $.plot point it freezes IE8 and it takes forever to load that many points. Here is my code:

var data = [];

        function onDataReceived(seriesData) {
            var p = $.plot(placeholder, seriesData.seriesData, options);
        }
        $.ajax({
            url: '/Charts/LineChart?DataTypesToGraph=' + dataTypes + '&DatePull=' + chartDate + '&AssetID=' + $('#AssetID').val(),
            method: 'GET',
            async: true,
            cache: true,
            dataType: 'json',
            success: onDataReceived
        });

How can I speed up my $.plot to make it load a lot faster. Also is there a way I can do it so it does not freeze IE8?

Thanks so much!

Answer 1

You're seeing a 'freeze' because Flot doesn't (yet) support incremental drawing; it renders the entire plot before giving control back to the browser. There's no way around that besides hacking the code, but there are two things you can do to help:

1. You're probably using Excanvas; try switching to Flashcanvas. In my experience it works just as well with Flot, and delivers dramatically better performance. The $31 necessary to license the 'pro' version is not going to break most budgets.

2. You have 8000 points per line, and most displays max out at 1920 pixels wide, with the average being more like 1280. If you're showing the whole line, without some sort of zoom/pan, then you're rendering 4-6 times more data than is actually visible onscreen. Some server-side filtering/aggregation to bring the number of points down to 2k would dramatically improve performance.

But no matter what you do, you're never going to get great performance on IE8 with large datasets. It's an almost four-year-old browser, released before the JavaScript performance wars, using an emulated canvas; you can only do so much.