Update chart data in real time

[Marco Andrade]

Hi!

I am developing an application that uses Signalr and need to update the chart data in real time. 

Can you give me an example of a graph that updates the data through a UrlAdaptor (or another suggestion) and not through ViewBag?

Thanks,

Marco Andrade

[Baby Palanidurai]

Hi Marco, 

  

Thanks for using syncfusion products, 

  

     We have analyzed your query as per your requirement we have prepared a sample. In that sample we are getting data by using urlAdaptor. While getting the data from datamanager by using urlAdaptor, you should return the sample response object 

  

{ 

result: [ {..}, {..}, {..}…. ], 

count: 230 

} 

   

For more information on url adaptor sample response object, kindly find the help document. 

  

Please find the below code snippet to achieve this requirement, 

  

            List<EmployeeModel> revenue = new List<EmployeeModel>(); 

            revenue.Add(new EmployeeModel() { Year = "2018-06-13T00:00:00", yValue = 30, yValue1= 30 }); 

            revenue.Add(new EmployeeModel() { Year = "2018-06-14T00:00:00", yValue = 20, yValue1=40 }); 

            revenue.Add(new EmployeeModel() { Year = "2018-06-15T00:00:00", yValue = 15, yValue1=50 }); 

            revenue.Add(new EmployeeModel() { Year = "2018-06-16T00:00:00", yValue = 80, yValue1=45 }); 

            revenue.Add(new EmployeeModel() { Year = "2018-06-17T00:00:00", yValue = 60, yValue1=60 }); 

            revenue.Add(new EmployeeModel() { Year = "2018-06-18T00:00:00", yValue = 70, yValue1=70 }); 

            revenue.Add(new EmployeeModel() { Year = "2018-06-19T00:00:00", yValue = 10, yValue1=40 }); 

            revenue.Add(new EmployeeModel() { Year = "2018-06-20T00:00:00", yValue = 90, yValue1=46 }); 

            revenue.Add(new EmployeeModel() { Year = "2018-06-21T00:00:00", yValue = 30, yValue1=56 }); 

            revenue.Add(new EmployeeModel() { Year = "2018-06-22T00:00:00", yValue = 20, yValue1=20 }); 

 

            return new { result = revenue, count = revenue.Count() }; 

  

Screenshot: 

 

  

Sample for your reference can be find from below link, 

 http://www.syncfusion.com/downloads/support/forum/138238/ze/urladaptorSample-1529567261 

  

Kindly revert us, if you have any concerns. 

  

Thanks, 

Baby. 

[Marco Andrade]

Works like a charm but it is possible to add a button for refresh the data?

Thanks,

Marco Andrade

[Baby Palanidurai]

Hi Marco,

 

We have analyzed your query and as per your requirement we have prepared sample with button. In that button click we have refreshed the data  by using refresh method in chart option. Please find the below code snippet to achieve this requirement,

 

var dataManager = new ej.data.DataManager({

        url: 'http://localhost:54290/api/Values',

        crossDomain: true,

        adaptor: new ej.data.UrlAdaptor

    });

 

    var query = new ej.data.Query().select(["Year", "yValue", "yValue1"]).take(5);

    function changeData() {

        var chart = document.getElementById('container').ej2_instances[0];

        chart.series[0].dataSource = dataManager;

        chart.series[0].query = query;

        chart.refresh();

    }

 

Screenshot:

Before button click:

 

After button click:

 

Sample for your reference can be find from below link,

 http://www.syncfusion.com/downloads/support/directtrac/general/ze/webapi1891280935.zip 

 

Kindly revert us, if you have any concerns.

 

Thanks,

Baby.