python - Performance issue adding series through loop in Highcharts

Question

I have to create a scatter chart with Highcharts taking the data from an api. The api is written in Python using Django Rest Framework and returns me data starting from a Pandas Dataframe that will be converted to list and passed as JSON.

I have a main dataframe called data with 3 columns and a structure like this:

| speed                | acc                 | id    |
| 0.09588048242649731  | 0.16578595340251923 | 185.0 |
| 1.8956370379738738   | 1.2269583940505981  | 192.0 |
| 0.12784064323532973  | 0.2449648529291153  | 185.0 |
...

I divide this dataframe into N small dataframes grouping the rows by the column id and I return the N small dataframes in a list. So the api view in python is this one:

    @action(detail=True, methods=['get'])
    def chart_points(self, request, pk):
        instance = MyObject.objects.get(pk=pk)
        data = instance.data
        data_list = {
            "data_list": [v.values.tolist() for k, v in data.groupby('id')]
        }
        return Response(data_list)

That gives me a response like this when I call it:

{ "data_list": [
            [
                [
                    0.09588048242649731,
                    0.16578595340251923,
                    185.0
                ],
                [
                    0.12784064323532973,
                    0.2449648529291153,
                    185.0
                ],
                [
                    0.14382072363974596,
                    0.14911147952079773,
                    185.0
                ],
                ...
             ],
             [
                [
                    1.8956370379738738,
                    0.18043938279151917,
                    192.0
                ],
                [
                    1.8976345480244257,
                    1.2269583940505981,
                    192.0
                ],
                [
                    1.8986333030497016,
                    0.2929287254810333,
                    192.0
                ],
                ...
             ],
             ...
}

I am using Backbonejs for the client side of the app and I have a model that call the previous endpoint and save the data of the response.

The retrive of the data is relative quickly ( it takes around 10 seconds, that is the same time I wait if I call manually the api ).

During this time I create the empty chart on the page and I wait for the api response. When I retrieved the data, i loop through them and I add each series to the chart in this way:

var data_list = this.model.get('data_list');
for( let i = 0; i < data_list.length; i++ ) {
    this.chart.addSeries({
        type: 'scatter',
        name: `Element number ${data_list[i][0][2]}`,
        data: data_list[i],
    });
}

where this.chart is the Highcharts chart I am going to fill with all the N series.

The problem is that this final process is very slow (it requires more and more minutes, and also freeze the page).

I noticed that if I add to the chart the same series N times ( also the series with the maximum length ) , it takes much less time. For example in this way:

var data_list = this.model.get('data_list');
for( let i = 0; i < data_list.length; i++ ) {
    this.chart.addSeries({
        type: 'scatter',
        name: `Element number ${data_list[0][0][2]}`,
        data: data_list[0],
    });
}

Is there something I can do to increase the performance ?

Answer 1

The chart is redrawn after each iteration, you can prevent that by setting the redraw argument in addSeries method call to false and call redraw after the loop.

for( let i = 0; i < data_list.length; i++ ) {
  this.chart.addSeries({
    name: ...,
    data: ...,
  }, false);
}

chart.redraw();

---

Live demo: http://jsfiddle.net/yqo8hrbn/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://api.highcharts.com/class-reference/Highcharts.Chart#redraw