Low Performance Rendering in Line Chart

[alb4tro]

Hello,

i've the following problem with the Line chart component: 

From back end i receive a data-set of 10000 points...with a method transformation making an averange of this points my result becomes 60 (an array with 60 points "one for each row"), withnotstanding that when the charts is rendered the loadind still appear again very slow!!(20 seconds roughly for rendering the charts)..i've seen that exist some workaround solution for the jquery version...for react version is possible to do something...if yes...how?

My best

Alberto

[Stefan]

Hello, Alberto,

I made an example with 60 points and it was rendered almost instantly:

https://stackblitz.com/edit/react-mxfn1p?file=app/main.jsx

Is it possible to share an example reproducing the performance issue and I will be happy to inspect it and share optimization options?

Regards,
Stefan
Progress Telerik

[alb4tro]

i try to reproduce an example : 

export class OtdrGraph extends Component{

constructor(){

super();

this.state={...}

}

render(){

return(

      <Chart zoomable={true} transitions={false}>
        <ChartTooltip background="grey"/>
        <ChartValueAxis>
          <ChartValueAxisItem crosshair={this.state.crossair} title={{ text: "Y     " }} axisCrossingValue={[-40,40]}></ChartValueAxisItem>
        </ChartValueAxis>
        <ChartLegend position="bottom" orientation="horizontal" />
        <ChartSeriesDefaults seriesDefaults={this.state.seriesDefaults} />
        <ChartTitle text={this.state.name} />
        <ChartAxisDefaults  crosshair={this.state.crossair} />
        <ChartCategoryAxis>
          <ChartCategoryAxisItem
            title={{text:"X"}}
            categories={this.state.points ? 
                        this.getSparseToFixedArrA() :
                                           this.getSparseToFixedArrB()
                      }
           line={{visible:false}}
            crosshair={this.state.crossair}
            />
          </ChartCategoryAxis>
        <ChartSeries>
          {series && series.map((item, idx) => (
            <ChartSeriesItem
              markers={{visible:false}} 
              key={idx}
              data={item.data}
              noteTextField="extremum"
              notes={this.state.notes}
              type="line"
              field="loss"
              name={item.name}
              color={item.color}
              title={{text:"LOSS"}}
            > 
          </ChartSeriesItem>
        ))}
        </ChartSeries>
      </Chart>

)

}

}

basically...i've received two types of data and both data set contains 10000 points  in terms of what i choiced the graph render A or B B, or together A+B...but for doing that i'm using a map()...could be enough as information?

my best

[Stefan]

Hello, Alberto,

I would like to confirm some numbers to ensure that I have a good understating of the setup:

- There are 10000 points, but they are programmatically processed and only 60 of them are passed to the Chart? Is that correct or the Chart receives all 10000 points?

- There are two series A and B, which can be rendered alone or both. They both have 60 data points each?

- Is it possible to see the rendered Chart from the Real applications see how it looks? You can blur some parts of it if there is sensitive data.

- The content of these two functions this.getSparseToFixedArrA() and this.getSparseToFixedArrB() as they are executed on each render, and I would like to double-check if they can cause any side effects.

This information will help me better understand the scenario, perform tests and performance optimizations.

Regards,
Stefan
Progress Telerik

[alb4tro]

Hello,

- There are 10000 points, but they are programmatically processed and only 60 of them are passed to the Chart? Is that correct or the Chart receives all 10000 points?

sorry i wrong to explain the part relative of how the points are processed...actually the all points are inserted in the property "categories" of components <ChartCategoryAxisItem>....the method getSparseToFixedArrA() or getSparseToFixedArrB  take the original array (data took from the server) and with some operation it recreates the same array with the same length but with only the "int value".. for example : 

getSparseToFixedArrA()

input ---> [0.1,1,0.2,2,0.3,3,...n]

result

output-->[  ,1 ,   ,2,   ,3,   ,...k-int]

so the result of the array let the "int value" at the same row but the other values are deleted,thus the rows will be empty. Therefore the property category take effectivelly 10000 points.

 -There are two series A and B, which can be rendered alone or both. They both have 60 data points each?

it depends of the selection...for example if you select the first you'll get only 100000 for the first line chart but...conversely for the the second...or both that in this case you'll get 20000 points.

 

- Is it possible to see the rendered Chart from the Real applications see how it looks? You can blur some parts of it if there is sensitive data.

i've attached .

 

 

yes...that's all...plus i've noted that with this settings the value that i want to display with the tooltip does not displayed correctly for the horizontal axis maybe because of the too points  inside the array.

My best

 

 

[alb4tro]

hello,

sorry i've forgotten to say that getSparseToFixedArrA() is declared inside the property of categories' ChartCategoryAxisItem because in this way it displays on the horizontal axis the values in dynamic way....because not findind a way of how to display all data for entire horizontal axis (in static way)...at the end i thought to get the solution in dynamic way.

[Stefan]

Hello, Alberto,

Thank you for the clarification.

Indeed rendering 10000 points on the Chart is a heavy operation and I can suggest some performance optimization methods. Based on the application requirements you can use some of them only or all of them:

1) Rendering the Chart as canvas can improve the performance:

https://www.telerik.com/kendo-react-ui/components/charts/api/ChartProps/#toc-renderas

2) Turning off animations:

https://www.telerik.com/kendo-react-ui/components/charts/api/ChartProps/#toc-transitions

3) Disabling gradients:

https://www.telerik.com/kendo-react-ui/components/charts/api/ChartSeriesDefaultsProps/#toc-overlay

4) Reducing the number of initially rendered elements by adding pan and zoom:

https://www.telerik.com/kendo-react-ui/components/charts/chart/pan-zoom/

Also, when testing performance in React, please ensure to test with a production build as React is times faster in production:

https://reactjs.org/docs/optimizing-performance.html

I hope some of these options will prove helpful.

Regards,
Stefan
Progress Telerik