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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind remote data to Chart?

Platform: ASP.NET MVC |
Control: Chart |
Published Date: January 21, 2015 |
Last Revised Date: July 1, 2019

Essential Chart supports remote data binding, that is binding data in the server with chart, using DataSource property.

The url from where the data has to be retrieved from, must be assigned to the “URL” property of DataSource object in series. The properties XName and YName of the series should be assigned to the fields in data source representing the x and y values of the series respectively. The property Query of the series should be assigned a string that represents Essential JavaScript query object for querying the data retrieved from remote url. Refer Query for more information about Essential JavaScript query object.

The following code example demonstrates binding Chart to oData service.

CSHTML

    @(Html.EJ().Chart("container")
         .Series(ser =>
         {
               //Binding remote url to chart data source
               ser.DataSource(service => service.URL("http://mvc.syncfusion.com/Services/Northwnd.svc/"));
               ser.XName("ShipCity");
               ser.YName("Freight");
               //Using query object to query the retrieved data in client side
              ser.Query("ej.Query().from('Orders').take(6)").Add();
         })
 )

Screenshot

The output for the above code example binding chart with oData service is as follows.

Binding chart with remote data

Figure 1: Output

Sample Link: Remote Data

 

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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