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.

How to load chart data with ajax?

Thread ID:

Created:

Updated:

Platform:

Replies:

119882 Aug 10,2015 10:06 AM Aug 17,2015 09:17 AM ASP.NET MVC 5
loading
Tags: Chart
beeseda
Asked On August 10, 2015 10:06 AM

Hi,
I have a function in my controller that returns chart data as serialized json string (GetChartData()). I put the return of this function in a viewbag variable:

ViewBag.ChartData = GetChartData();

I have two types of code in onChartLoad function in my view. The first one works but the second one does not work.

1. It work...
function onChartLoad(sender){
sender.model.series[0].dataSource = @Html.Raw(ViewBag.ChartData)
sender.model.series[0].xName = "XValue";
sender.model.series[0].y = "YValue";
}

2. But when I use ajax, the chart does not drawn and there is no javascript error:
fucntion onCharLoad(sender){
$.ajax('@Url.Action("GetChartData","Chart")').done(function(data){
sender.model.series[0].dataSource = data;
sender.model.series[0].xName = "XValue";
sender.model.series[0].y = "YValue";
});
}

When I alert @Html.Raw(ViewBag.ChartData) it shows me list of [Object object] but when alert data returned by ajax it shows me real data in json format, where as @ViewBag.ChartData is data returned by GetChartData() function (the same function when I access it via ajax).

thanks.

Vinothkumar Arumugam [Syncfusion]
Replied On August 11, 2015 08:12 AM

Hi Beeseda,

Sorry for the inconvenience caused.

Currently chart load event not properly working in MVC. So we have logged an issue report for this. The fix for this issue will be included in our upcoming Service pack release which is scheduled in August 2015 last week.  

Please let us know if you have any concern.

Thanks,

Vinothkumar Arumugam.


beeseda
Replied On August 12, 2015 12:19 AM

Hi, thanks for your reply.
My data is in the server on database and I want the chart to load its data for example every 30 seconds. So would you please help me how can I do this?
Thanks again.

Vinothkumar Arumugam [Syncfusion]
Replied On August 13, 2015 06:47 AM

Hi Beeseda,
We have analyzed your reported query. We have prepared a sample based on your requirements. We have created a local database “ChartData” and table name “Chart”. Which contains three fields one for id another two for chart series point values X and Y.
In our sample chart table loaded five data to the series every 3 seconds. Chart table contains 15 data’s.  Please find the following code snippet to achieve your requirements.
Code Snippet [ASP]:

·         Add data to the chart model from database as follows.


·         Client side Ajax method load every 3 seconds as follows.


Screenshot:

·         First time chart loaded initial data from source as below figure shows that.


·         After Click the AddData button Chart loaded five new data from data base until 15 data’s from table.



Since we have 15 data’s after three updates the update will be stop.
We have made a sample for this. You can download it from below sample location.
Sample Location:
ChartSample

Please let us know if you have any concern.
Thanks,
Vinothkumar Arumugam.


beeseda
Replied On August 15, 2015 03:55 AM

Thanks a lot.

Vinothkumar Arumugam [Syncfusion]
Replied On August 17, 2015 09:17 AM

Hi Beeseda,
Thanks for the update.
Please let us know if you have any concern.
Thanks,
VInothkumar Arumugam.

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.

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.

;