This is a migrated thread and some comments may be shown as answers.

Low Performance Rendering in Line Chart

6 Answers 545 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

answered on 12 May 2020, 05:19 PM

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

answered on 13 May 2020, 01:37 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 13 May 2020, 05:07 PM

linechartsexample-(2).jpg

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

answered on 14 May 2020, 01:36 PM

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