jquery.flot.charting.js

/* Flot plugin that makes charting easier and more efficient.

Copyright (c) 2007-2015 National Instruments
Licensed under the MIT license.
*/
/*global jQuery, requestAnimationFrame*/

window.addEventListener('beforeunload', function() {
    console.log('RELOADING');
    debugger;
});

(function ($) {
    'use strict';

    // flot hook which decimates the data from the historyBuffer and converts it into a format that flot understands
    function processRawData(plot, dataSeries, x, datapoints) {
        var indexMap; // this a "dictionary" from 0 based indexes in the history buffer to target values
        if (dataSeries.historyBuffer) {
            var historyBuffer = dataSeries.historyBuffer;
            indexMap = historyBuffer.indexMap;
            var data;

            var index = plot.getData().indexOf(dataSeries);

            if (index < historyBuffer.width) {
                data = dataRange(historyBuffer, index);
                dataSeries.index = index;
            } else {
                data = [];
            }

            var points = datapoints.points;

            for (var i = 0; i < data.length; i+=2) {
                points[i] = indexMap ? indexMap[data[i]] : data[i];
                points[i + 1] = data[i + 1];
            }

            points.length = data.length;
            datapoints.pointsize = 2;
            dataSeries.decimate = decimateChartData;
            dataSeries.decimatePoints = decimateChartData;
        }
    }

    function dataRange(historyBuffer, index) {
        var data = historyBuffer.rangeX(index);
        var result = [];

        if (data.xmin === undefined || data.xmax === undefined || data.deltamin === undefined) {
            return [];
        }

        result[0] = data.xmin;
        result[2] = data.xmax;
        result[4] = data.xmax - data.deltamin;
        result[1] = 0;
        result[3] = 1;
        result[5] = 2;


        return result;
    }

    function decimateChartData (series, start, end, width) {
        var historyBuffer = series.historyBuffer,
            size = end - start,
            indexMap = historyBuffer.indexMap,
            datapoints = series.datapoints,
            step = Math.floor(size / width),
            data;

        var index = series.index;
        if (index < historyBuffer.width) {
            var data = series.historyBuffer.query(start, end, step, index);
        } else {
            data = [];
        }

        var points = datapoints.points;
        for (var i = 0; i < data.length; i+=2) {
            points[i] = indexMap ? indexMap[data[i]] : data[i];
            points[i+1] = data[i+1];
        }

        points.length = data.length;
        datapoints.pointsize = 2;

        return points;
    }

    // remove old data series and trigger the computation of a new one from the history buffer
    function updateSeries(plot, historyBuffer) {
        var dataSeries = plot.getData();
        for (var i = 0; i < historyBuffer.width; i++) {
            if (typeof dataSeries[i] === 'object') {
                dataSeries[i].data = [];
                // although it would be nice to reuse data points, flot does nasty
                // things with the dataSeries (deep copy, showing with ~50% percent
                // on the timeline)
                dataSeries[i].datapoints = undefined;
            } else {
                dataSeries[i] = {
                    data: [],
                };
            }
        }

        plot.setData(dataSeries);
    }

    function setYAxisRange(plot, yaxis) {
        if (yaxis.direction !== 'y' || yaxis.options.autoscale === "none")
            return;
        var i, j, k, points, pointsLength, xmin, xmax, range, index,
            dataSeries = plot.getData(),
            yseries = dataSeries
                .filter(function(series) {
                    return series.yaxis === yaxis;
                }),
            yseriesLength = yseries.length;
        for (j = 0; j < yseriesLength; j++) {
            index = yseries[j].index;
            xmin =  yseries[j].xaxis.min ? yseries[j].xaxis.min : yseries[j].xaxis.options.min;
            xmax =  yseries[j].xaxis.max ? yseries[j].xaxis.max : yseries[j].xaxis.options.max;
            if (j < yseries[j].historyBuffer.width) {
                range =  yseries[j].historyBuffer.rangeY(xmin, xmax, index);
                if (j === 0) {
                    yaxis.datamin = range.ymin;
                    yaxis.datamax = range.ymax;
                } else {
                    yaxis.datamin = Math.min(yaxis.datamin, range.ymin);
                    yaxis.datamax = Math.max(yaxis.datamax, range.ymax);
                }
            }
        }
    }

    // draw the chart
    function drawChart(plot) {
        plot.setupGrid();
        plot.draw();
    }

    // plugin entry point
    function init(plot) {
        var isShutdown = false;

        // called on every history buffer change.
        function triggerDataUpdate(plot, historyBuffer) {
            if (!plot.dataUpdateTriggered) {
                plot.dataUpdateTriggered = requestAnimationFrame(function () { // throttle charting computation/drawing to the browser frame rate
                    if (!isShutdown) {
                        updateSeries(plot, historyBuffer);
                        drawChart(plot);
                    }
                    plot.dataUpdateTriggered = null;
                });
            }
        }

        plot.hooks.processOptions.push(function (plot) {
            var historyBuffer = plot.getOptions().series.historyBuffer; // looks for the historyBuffer option
            if (historyBuffer) {
                plot.hooks.processRawData.push(processRawData); // enable charting plugin for this flot chart
                historyBuffer.onChange(function () {
                    triggerDataUpdate(plot, historyBuffer); // call triggerDataUpdate on every historyBuffer modification
                });
                updateSeries(plot, historyBuffer);

                plot.hooks.setRange.push(setYAxisRange);

                plot.hooks.shutdown.push(function() {
                    isShutdown = true;
                });
            }
        });
    }

    $.plot.plugins.push({
        init: init,
        name: 'charting',
        version: '0.3'
    });
})(jQuery);