Js function running so slow in qml6

[Aminsl]

I'm currently working on a line chart and trying to generate a random series of points for it. I wrote some js codes in order to generate a random series for my line chart but when I want to generate 17000 points or even more , my code runs so slow and it takes about 1 minute to generate the series for my line chart. I don't know if I'm writing inefficiently in js or should I write it in a separate thread ?

ChartView {
                id: centralLineChartView
                legend.visible: false
                antialiasing: true
                anchors.fill: parent
                axes: [
                    ValuesAxis {
                        id: xAxis
                        min: 0
                        max: 1000
                    } ,
                    ValuesAxis {
                        id: yAxis
                        min: -130
                        max: 10
                    }
                ]

 Component.onCompleted: {
     var series = centralLineChartView.createSeries(ChartView.SeriesTypeLine , "Series" , xAxis , yAxis);
      series.color = Qt.rgba(Math.random() , Math.random() , Math.random() , 1);
       series.hovered.connect(function(point, state{console.log(point);});

   for(var i = 0; i <= 1000; i ++){
     var y = Math.random() * (-120 - (-95)) +(-95);
     series.append(i , y);

                    }
                }
            }

Please let me know if I have to provide more code .

[JonB]

@Aminsl
It is slow because you are doing many individual append()s, and Qt Charts is poor at that, speed-wise. Read the discussion in https://forum.qt.io/topic/140576/qt-charts-extremely-slow-qlineseries. Backed up by https://forum.qt.io/topic/145620/chartview-is-too-slow and others. Consider the workaround there: build the points into a JS list and use replace().

[Aminsl]

@JonB I just did but it didn't work properly and no series has drawn into the chart. Did I do anything wrong ? According to the document , this replace() function only accepts numerical values not a whole list , right ?

Component.onCompleted: {
        var series = centralLineChartView.createSeries(ChartView.SeriesTypeLine , "Series" , xAxis , yAxis);
         series.color = Qt.rgba(Math.random() , Math.random() , Math.random() , 1);
         series.hovered.connect(function(point, state) {console.log(point);});

                    var pointsList = [];

                    for(var i = 0; i <= 17000; i ++){
                        var y = Math.random() * (-120 - (-95)) +(-95);
                        pointsList[i] = Qt.point(i,y);
                    }

                    series.replace(pointsList);

                }

[piervalli]

@Aminsl

If you call "series.append(i , y)" I think that you call the paint event for each append.

try with
var pointsList = new Array(17000), it creates an array wih 17000 empty records ,assign points, than you should creates ChartView with already array.
I neve tested but should be a good point.

[JonB]

@Aminsl

this replace() function only accepts numerical values not a whole list , right ?

Sorry, I don't know what this means.
Your code looks reasonable to me. I don't use QML. From my recollection of JS it is OK to just extend an array by assigning to higher indexes. But the example I pointed to showed

for i in self.x:
     points.append(QPointF(i, self.y[i]))   # filling points with my prepared data 
serie1.replace(points)  # fill list of points in one call

so I don't know why you didn't just use that. Or pre-allocate per @piervalli 's suggestion. Per the references others have found this works for them, and reduces the time dramatically, that's all I know.

[Aminsl]

@piervalli you mean I create the series in another class and pass it back to my chart view ?

[piervalli]

@Aminsl
Yes,