Render Chart (JavaScript) Ajax Return from Controller

[hoctro]

Hi Supporter!
I using Chart JavaScript, after ajax success return, json include chart render:
"commonSeriesOptions:
            {
                type: 'bar',
                enableAnimation: true,
                tooltip:{visible:true, format: "#series.name# <br/> #point.x# : #point.y#"},
                marker:
                {
                    dataLabel:
                    {
                        font: { size:'13px',fontFamily:'Segoe UI',fontStyle:'Normal',fontWeight:'regular'},
                        textPosition: 'top',
                        horizontalTextAlignment:"near",
                        visible:true                                 
                    },
                }
            },
           
            //Initializing Series
            series:
            [
                {
                    points: [{ x: 2006, y: 7.8 }, { x: 2007, y: 7.2}, { x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
                             { x: 2010, y: 10.8}, { x: 2011, y: 9.8 }],
                    name: 'India'
                },               
                {
                    points: [{ x: 2006, y: 4.8 }, { x: 2007, y: 4.6 }, { x: 2008, y: 7.2 }, { x: 2009, y: 9.3 },
                             { x: 2010, y: 9.7}, { x: 2011, y: 9 }],
                    name: 'US'
                }  
            ],
            load:"loadTheme",
            displayTextRendering:"OndataLabel",
            isResponsive: true,
            showTooltip: true,
            title:{text: 'Unemployment rate (%)'},
            size: { height: "600" },
            legend: { visible: true, position: 'right', alignment:"near" }"

I call chart:

$.ajax({
                    type: "GET",
                    url: '@Url.Action("RedenChart")',
                    data: {"typeReport": typeReport, "typeKPI": typeKPI, "sTimeStart": sTimeStart, "sTimeEnd":sTimeEnd},
                    async: true,
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        $("#chart0").ejChart(data)
                    },
                });
But notworking, please help me!
Thanks

[Dharanidharan Dharmasivam]

Hi Hoctro, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. From the provided code snippet, we found that in the ajax success you have passed the chart data (as a string obtained from server), so the chart might not have rendered. We need to convert the string to object and then need to pass to the chart. We have created a sample with respect to this, in which on ajax success we have passed chart properties as object and rendered the chart. Find the code snippet to achieve this requirement. 

ASP.NET Core: 

<input type="button" value="Render Chart" onclick="renderChart()" /> 

 

<div id="chart0"></div> 

function renderChart() { 

        $.ajax({ 

            type: "POST", 

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

            async: false, 

            success: function (data) { 

                $("#chart0").ejChart(JSON.parse(data)) 

            } 

        }); 

   } 

 

Screenshot: 

 

Sample for reference can be find from below link. 

http://www.syncfusion.com/downloads/support/forum/131006/ze/WebApplication1-821969574  

 

If you face still any concern, kindly revert us by modifying the attached sample with respect to your scenario, which will be helpful in analyzing and provide you the solution sooner. 

Thanks, 

Dharani.