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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Render Chart (JavaScript) Ajax Return from Controller

Thread ID:

Created:

Updated:

Platform:

Replies:

131006 Jun 15,2017 09:21 PM Jun 16,2017 09:08 AM ASP.NET Core 1
loading
Tags: Chart
hoctro
Asked On June 15, 2017 09:21 PM

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 [Syncfusion]
Replied On June 16, 2017 09:08 AM

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. 
 
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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;