CODEWITHSUNDEEP
javascripthighcharts
onkami
onkami

Reputation: 9421

Fast switching of many graphs in highchart

I have a Highcharts library to show my graphs. I have a cycle like

     * Shows/ hides plots based on scope.stationstoshow
     */
    var showHideStations = function (show) {
        var start0 = performance.now();
        angular.forEach(chart.series, function (s) {

            //sets a cahr visible
            s.setVisible((show.indexOf(s.options.id)>=0));

        });
        var duration = performance.now() - start0;
        console.log("showHide: All charts took "+duration/1000.0 + "sec");
    };

When I have ~30-40 series in one graph, operation takes about two seconds (they have plenty of points). So it is not immediate and makes UI feels slow. How can I possibly switch many charts on/off at once?

Upvotes: 0

Views: 56

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You have the line:

    s.setVisible((show.indexOf(s.options.id)>=0));

Here you are doing a redraw after each change. This costs a lot of resources. If you instead postpone the redraw until you have changed the visibility of each series it should save you a substantial amount of time.

For example:

var showHideStations = function (show) {
    var start0 = performance.now();

    angular.forEach(chart.series, function (s) {
        s.setVisible((show.indexOf(s.options.id)>=0), false); // false to stop redraw
    });

    chart.redraw(); // Manually redraw after all changes

    var duration = performance.now() - start0;
    console.log("showHide: All charts took "+duration/1000.0 + "sec");
};

Upvotes: 2

Related Questions