[Possible BUG] Chart sometimes does not load the given api

[Dana]

The chart I'm using using an API datasource sometimes does not work. Forcing a refresh on the browser may not solve the issue.

These are the syncfusion version I'm using.

    "@syncfusion/ej2-navigations": "^15.4.17",

"@syncfusion/ej2-ng-charts": "^15.4.17",

"@syncfusion/ej2-ng-dropdowns": "^15.4.17",

"@syncfusion/ej2-ng-navigations": "^15.4.17",

Attachment: getData_6f39a5bf.zip

[Dharanidharan Dharmasivam]

Hi Dana, 

Thanks for using Syncfusion product. 

We have  analyzed your query and found that you are getting  data for the series after the chart got rendered. So in this case we need to refresh the chart, after we assigned data to the series. We have prepared a sample based on your requirement, on initial loading, chart is rendered without data, in a button click we have updated a series with data to the chart using addSeries method.  

Plunker : http://plnkr.co/edit/9bzOQhREgPYdmAmm5nTX?p=preview 

Code Snippet : 

onClick(event) : void { 

    var value = document.getElementById('chart-container'); 

    

    value.ej2_instances[0].addSeries([{name :'Update', fill:'red', dataSource : this.app.getM(),  

                                          xName :  'OrderDate', yName : 'Freight' , type :'Column' }]); 

     

  } 

Please let us know, if you have any queries. 

  

Regards, 

Dharanidharan D

[Albert K]

Hi,

Let say that we have a websocket connection to that gets livefeed of data.  Is there a way to update the data source or are we to resort to using the chart addSeries method to refresh the chart upon receiving new data?    If not, what is the best practice approach?.

Thank you.

[Dharanidharan Dharmasivam]

Hi Albert, 

Thanks for the update. 

     If you need to add new series to the chart, then you can use the addSeries method(as stated in our previous update). If you need to update the data source for the already added series, then you can make changes to your data source and use the refresh method to reflect the updated data source in chart. We have prepared a sample in which we have updated the data source(added a point for every 500ms) and called the refresh method as highlighted below to reflect the updated data source in chart. Kindly find the code snippet below to achieve this scenario. 

Angular: 

 

//Method to update the data source and called refresh method to render the chart with updated data source  

    function step() { 

        let chartComponent: Chart = getInstance('#container', Chart); 

        let len : number = chartComponent.series[0].dataSource.length; 

        

       //Adding points to data source  

       chartComponent.series[0].dataSource.push({x : len , y : 10 + (Math.random() * 2.0) }) 

 

      //Updated chart with new data source by calling refresh method 

       chartComponent.refresh(); 

    } 

     

    let intervalId : number = setInterval(function () { 

        if (document.getElementById('container') === null) { 

            clearInterval(intervalId); 

        } 

        else { 

            step(); 

        } 

    }, 500); 

Sample for reference can be find from below link. 

http://plnkr.co/edit/AgOz2mLGMTea7GsMGi6Q?p=preview  

  

Kindly revert us, if you have any concerns. 

Thanks, 

Dharani.