1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Update chart data in real time

Update chart data in real time

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

3 Replies
BP Baby Palanidurai Syncfusion Team June 22, 2018 05:55 AM UTC

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, 
  
Kindly revert us, if you have any concerns. 
  
Thanks, 
Baby. 


MA Marco Andrade June 26, 2018 04:44 PM UTC

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

Thanks,
Marco Andrade

BP Baby Palanidurai Syncfusion Team June 27, 2018 09:43 AM UTC

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,
 
Kindly revert us, if you have any concerns.
 
Thanks,
Baby.


Loader.
Up arrow icon