Low Performance Rendering in Line Chart

7 posts, 0 answers
  1. alb4tro
    alb4tro avatar
    4 posts
    Member since:
    May 2020

    Posted 12 May 2020 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 12 May 2020 Link to this post

    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

    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.
  3. alb4tro
    alb4tro avatar
    4 posts
    Member since:
    May 2020

    Posted 12 May 2020 in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 13 May 2020 Link to this post

    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.
  5. alb4tro
    alb4tro avatar
    4 posts
    Member since:
    May 2020

    Posted 13 May 2020 Link to this post

    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

     

     

  6. alb4tro
    alb4tro avatar
    4 posts
    Member since:
    May 2020

    Posted 13 May 2020 in reply to alb4tro Link to this post

    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.

  7. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 14 May 2020 Link to this post

    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

    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.
Back to Top