How to value the datasources of a line chart through an ajax call?

[nimue]

Hi

I would need to enhance the datasources of a  line chart not through the ViewBag, but in a dynamic way, through an ajax call to the data on the server.

Can you help me?

Thanks in advance for your support.

Barbara Inzitari.

[Dharanidharan Dharmasivam]

Hi Inzitari, 

 

We have created a simple sample based on your requirement. In that sample, we have created chart with single line series. Here, we have obtained the data in ajax success event and assigned to the chart series in the chart load event. You can modify this with respect to your scenario. 

 

Please find the below code snippet to achieve this requirement, 

 

Controller.cs: 

          

   public ActionResult GetServerData() 

        { 

           List<LineChart> data1 = new List<LineChart>(); 

            data1.Add(new LineChart("India", 1)); 

            //…  

            return Json(data1); 

        } 

 

cshtml: 

 

     @Html.EJS().Chart("container") 

          .Series(series => { 

             series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Add(); 

          }).Load("chartLoad").Render() 

 

<script> 

    var chartLoad = function (args) { 

        $.ajax({ 

            type: "POST", 

            url: '@Url.Action("GetServerData","Home")', 

            async: false, 

            success: function (data) { 

             // Assign the ajax returned data to chart series data source 

                args.chart.series[0].dataSource = data; 

                args.chart.series[0].xName = "x"; 

                args.chart.series[0].yName = "y"; 

            } 

        }); 

    } 

</script> 

 

Screenshot: 

 

 

Sample for your reference, can be find from below link, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ajaxdata-1307379735 

 

Thanks, 

Dharani. 

[nimue]

Hi Dharani,

Thanks for your answer I did as from the example you sent me and now everything works perfectly.

Thanks again.

Barbara Inzitari.

[Dharanidharan Dharmasivam]

Hi Inzitari, 

 

Most welcome. We are happy to hear that provided solution works at your end. Kindly get in touch with us, if you would require further assistance.  

 

Thanks, 

Dharani. 

[Dwi Latifah]

Hi everyone,

I'm trying to do something similar, but I want a graph that updates data every second or minute.

Do you know how to create realtime chart using ajax?

Thanks...

[Durga Gopalakrishnan]

Hi Dwi,

We have prepared live data sample based on your requirement. In the sample, we have used chart load event to generate data for chart series points and javascript setInterval, clearInterval methods to perform live update. Please check with the below sample.

@(Html.EJS().Chart("container").Render())

<script>

    var intervalId;

    var value = 130, count = 1;

    var setTimeoutValue = 2000;

    intervalId = setInterval(

        function () {

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

                clearInterval(intervalId);

            } else {

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

                for (var j = 0; j < chart.series.length; j++) {

                    chart.series[j].dataSource.shift();

                    var dataSource = chart.series[j].dataSource;

                    var xVal = dataSource[dataSource.length - 1].x;

                    if (Math.random() > .5) {

                        value += Math.random() * 2;

                    }

                    else {

                        value -= Math.random() * 2;

                    }

                    dataSource.push(

                        {

                            x: new Date(xVal.setFullYear(xVal.getFullYear() + count)),

                            y: Math.round(value)

                        }

                    );

                }

                chart.refresh();

            }

        }, setTimeoutValue);

</script>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/LiveChart1777798113.zip

Please revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.