0

I am using highstock with ajax call to update data on each zoom. During each zoom the chart data is updated via API call. On each redraw the line color gets changed randomly. How can I avoid this?

Zoom 1 Zoom 1 Zoom 2 Zoom 2

Please note that I am using angularjs.

JS:

var afterSetExtremes = function(e) {
    if (!firstTimeLoad) {
        var fromDate = moment(Math.round(e.min)).format();
        var toDate = moment(Math.round(e.max)).format();
        var dataToSend = {
            graph: selectedChannels,
            fromDate: fromDate,
            toDate: toDate
        };
        //API call
        graphService.create({}, {}, dataToSend, {}).then(function(response) {
            if (response.status) {
                var hasData = false;
                response.data.records.map(function(op) {
                    if (op.data.length) {
                        hasData = true;
                    }
                });
                if (hasData) {
                    graphData = response.data;
                    // Updating chart series data
                    chartConfig.series = graphData.records;
                } else {
                    notify.error('No data found');
                }
            } else {
                notify.error('No data found');
            }
        }, function(reason) {
            notify.error('Application encountered some issues, please try again.');
        });
    }
    firstTimeLoad = false;

};

var chartConfig = {

    options: {
        chart: {
            renderTo: 'container',
            type: 'spline',
            zoomType: 'x'
        },
        legend: {
            enabled: true
        },
        xAxis: {
            events: {
                afterSetExtremes: afterSetExtremes
            }
        },
        yAxis: {
            floor: 0,
            labels: {
                format: '{value} ' + data.unit
            }
        },
        rangeSelector: {
            buttons: [{
                type: 'day',
                count: 1,
                text: '1d'
            }, {
                type: 'day',
                count: 7,
                text: '7d'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
            buttonTheme: {
                fill: 'none',
                stroke: 'none',
                'stroke-width': 0,
                r: 8,
                style: {
                    color: '#039',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {},
                    select: {
                        fill: '#039',
                        style: {
                            color: 'white'
                        }
                    }
                }
            },
            // inputEnabled: true, // it supports only days
            selected: 4 // all
        },
        navigator: {
            enabled: true,
            adaptToUpdatedData: false,
            series: {
                includeInCSVExport: false
            }
        },
        plotOptions: {
            series: {
                animation: {
                    complete: function() {
                        $(window).resize(function() {
                            resizeToCover();
                        });
                        $(window).trigger('resize');
                        $('#chart1').css('display', 'block');

                    }
                }
            }
        },
        scrollbar: {
            liveRedraw: false
        }
    },
    series: graphData.records,
    title: {
        text: 'Graph'
    },
    loading: false,
    useHighStocks: true
};
Afsal
  • 349
  • 3
  • 10
  • In series object set `color` property. You probably add/remove series in the chart, so when color is taken from `colors` array, index is increased. – Paweł Fus Dec 08 '15 at 12:37
  • @PawełFus Thanks for the comment. But I can't set it to a single color because graph may show multiple number of lines dynamically. – Afsal Dec 08 '15 at 12:40
  • Without live demo it is hard to say what may be the reason and how to workaround this. I guess my explanation above is correct one. In that case, instead of using `addSeries()` use `setData()` - should resolve the issue. – Paweł Fus Dec 08 '15 at 12:44
  • @PawełFus updated with code. – Afsal Dec 08 '15 at 13:10
  • How about adding something like this: `each(graphData.records, function(i, rec) { rec.color = chart.series[i] ? chart.series[i].color : null; }); chartConfig.series = graphData.records;` ? So you will get color from the current series and use for a new one. Of course, that require the same order of series. – Paweł Fus Dec 08 '15 at 13:25

0 Answers0