Generate Chart from json

[Gian Carlo]

Hi i need to generate a line chart i use this 

 public JsonResult UpdateChart2(int place)

        {

            var propRep = new RepoDapper();

            var sele = propRep.VentasMenSuc(place, 1, 2018).ToList();

            var a = (from x in sele orderby x.total descending select new { x.day, x.total});

            return Json(a, JsonRequestBehavior.AllowGet);

        }

this generate a total of 23 rows with Day and Total 

i have this on my view but is not working

(Html.EJ().Chart("chart")

      .IsResponsive(true)

      )

<script>

    $.ajax({

        url: "@Url.Action("UpdateChart2", "Farmacias")",

        type: "POST",

        data: {

            suc: 4

        },

        success: function (data) {

            var chartData = [

                { mm: data.month, total: data.total }

                ];

  

            

            $("#chart").ejChart({

                    

                series: [{

                    type: 'line',

                    dataSource: chartData, 

                    xName: "mm", 

                    yName: "total"

                }]

                // ...

            });

        }

    });

[Dharanidharan Dharmasivam]

Hi Gian, 

Thanks for using Syncfusion products. 

We have analyzed your query. From the provided code snippet we found that, instead of binding the data directly to chart obtained on success event of ajax request, you have bind the data as highlighted below, so the chart might not have rendered. 

$.ajax({ 

        success: function (data) { 

            var chartData = [{ mm: data.month, total: data.total }]; 

            $("#chart").ejChart({ 

 

                series: [{ 

                    type: 'line', 

                    dataSource: chartData, 

                    xName: "mm", 

                    yName: "total" 

                }] 

 

                // ... 

            }); 

        } 

    }); 

If the data obtained in the success event is of type list or json, you can bind the data directly to chart, so that the chart will render properly. From the provided code snippet, we found that you are passing the json data to the success event, so you can directly bind the data. Kindly find the code snippet below to achieve this requirement. 

 

<div id="chart"></div> 

 

$.ajax({ 

            type: "POST", 

            url: '@Url.Action("chartData", "Chart")', 

            async: false, 

            success: function (data) { 

                $("#chart").ejChart({ 

 

                    series: [{ 

                        type: 'line', 

                    //Bind the data directly to chart and map the values to xName and yName properties 

                        dataSource: data, 

                        xName: "month", 

                        yName: "total" 

                    }], 

                    //... 

                }); 

                 

            } 

        }); 

If your data structure is different, kindly revert us the structure of your data source that is returned in the success event or provide your data source, so that we can provide you the solution sooner. 

And also from the provided code snippet, we found that, you have already initialized the chart and again you are rendering the chart with same id. You can directly render the chart in the ajax request or else in the success event you need to take the instance of chart and refresh the chart after binding data to chart. in the above code we have rendered the chart directly in success event itself. 

Screenshot: 

 

Sample for reference can be find from below link. 

http://www.syncfusion.com/downloads/support/forum/135589/ze/chartAjax1488935281  

 

Kindly revert us, if you have any concerns.  

Thanks, 

Dharani. 

[Gian Carlo]

thx works lika a charm

regards

[Dharanidharan Dharmasivam]

Hi Gian, 

 

Thanks for the update. 

 

Kindly revert us, if you need further assistance. 

Thanks, 

Dharani.