AJAX data to Line Chart is failing

[lavanyadeepak]

Dear Team,

This is a follow-up of the post https://www.syncfusion.com/forums/126169/need-assistance-to-identify-the-contextual-charting

I have modified the code to try load the data via Ajax. However I am getting errors like sender is not defined. I have even initialized the sender to ejChart instance of the page. Also for some reason if I use ViewBag. format to assign the value to var chart, the " and ' are escaped causing Javascript errors. Is this format not supported.

And what is the issue with Ajax?

    $(document).ready(function () {

        $.get("home/GetData", function (data) {

            

            var chartData = data;

            $("#chart").ejChart("option", { series: [{ dataSource: data }] });

            var chartObj = $("#chart").ejChart("instance");

            for (var i = 0; i < chartObj.model.series.length; i++) {

                chartObj.model.series[i].dataSource = chartData[i].points;

                chartObj.model.series[i].xName = "index";

            }

            chartObj.model.series[0].yName = "parameterX";

            chartObj.model.series[1].yName = "parameterY";

            chartObj.model.series[2].yName = "parameterZ";

            chartObj.model.series[3].yName = "inputX";

            chartObj.model.series[4].yName = "inputY";

            chartObj.model.series[5].yName = "inputZ";

        });

    });

Thanks,

Deepak 

[Dharanidharan Dharmasivam]

Hi Deepak, 

Thanks for using Syncfusion product. 

We have analyzed your query. You are trying to  get the instance for the chart using ajax call in the $(document).ready() function, but at this point chart won’t get loaded in the page and hence you might get this error. In this case you can use window.onload() function, this will executed only after the page is fully loaded, so that you can get instance for the chart. Find the code snippet below, 

Code Snippet: 

ASP.NET MVC 

window.onload=function () { 

        $.ajax({ 

            type: "POST", 

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

            async: false, 

            success: function (data) { 

                var resp = eval("" + data + ""); 

                var chart = $("#Container").ejChart("instance"); 

                chart.model.series = []; 

                for (var i = 0; i < 6; i++) { 

                    chart.model.series.push({ dataSource: resp[i].points }); 

                    chart.model.series[i].xName = "index"; 

                } 

                chart.model.series[0].yName = "parameterX"; 

                chart.model.series[1].yName = "parameterY"; 

                chart.model.series[2].yName = "parameterZ"; 

                chart.model.series[0].yAxisName = "yAxis1"; 

                chart.model.series[1].yAxisName = "yAxis1"; 

                chart.model.series[2].yAxisName = "yAxis1"; 

                chart.model.series[3].yName = "inputX"; 

                chart.model.series[4].yName = "inputY"; 

                chart.model.series[5].yName = "inputZ"; 

                chart.redraw(); 

            }, 

        }); 

      } 

 

Screenshot: 

 

 

For your reference, we have attached the sample. Kindly find the attachment below, 

Sample Link: http://www.syncfusion.com/downloads/support/forum/126246/ze/WebApplication2905987949  

We are not clear with the query  also for some reason if I use ViewBag. format to assign the value to var chart, the " and ' are escaped causing Javascript errors. Are you passing any format to the chart from ViewBag? Kindly provide us more information on this query and modify the sample/provide your sample with replication steps, so that we can able to provide the solution sooner. 

Thanks, 

Dharani.