We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Render Chart (JavaScript) Ajax Return from Controller

Hi Supporter!
I using Chart JavaScript, after ajax success return, json include chart render:
                type: 'bar',
                enableAnimation: true,
                tooltip:{visible:true, format: "#series.name# <br/> #point.x# : #point.y#"},
                        font: { size:'13px',fontFamily:'Segoe UI',fontStyle:'Normal',fontWeight:'regular'},
                        textPosition: 'top',
            //Initializing 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'
            isResponsive: true,
            showTooltip: true,
            title:{text: 'Unemployment rate (%)'},
            size: { height: "600" },
            legend: { visible: true, position: 'right', alignment:"near" }"

I call chart:

                    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) {
But notworking, please help me!

1 Reply

DD Dharanidharan Dharmasivam Syncfusion Team June 16, 2017 01:08 PM UTC

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() { 
            type: "POST", 
            url: '@Url.Action("RenderChart", "Home")', 
            async: false, 
            success: function (data) { 


Sample for reference can be find from below link. 
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. 


Live Chat Icon For mobile
Up arrow icon