Syncfusion Chart data Binding

Question

How to bind data source to a chart control in visual studio 2015 using Syncfusion?Can anyone please provide asp.net code for it?

This is the code that I tried

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ChartDemo.WebForm1" %>

<%@ Register assembly="Syncfusion.EJ.Web" namespace="Syncfusion.JavaScript.Web" tagprefix="ej" %>
<%@ Register assembly="Syncfusion.EJ" namespace="Syncfusion.JavaScript.DataVisualization.Models" tagprefix="ej" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/ej/datavisualization/ej.chart.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>

    <!-- Essential JS UI widget -->
    <script src="http://cdn.syncfusion.com/13.1.0.21/js/web/ej.web.all.min.js"></script>

    <!--Add Syncfusion Script Manager -->
    <script>


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <ej:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" SeriesType="Column" XName="NetCurrentAssets" YName="NetDeferredTax">
<CommonSeriesOptions Type="Column" XName="NetCurrentAssets" YName="NetDeferredTax">
<CornerRadius Top="0" Bottom="0" Left="0" Right="0"></CornerRadius>

<Marker>
<DataLabel MaximumLabelWidth="0">
<Offset X="0" Y="0"></Offset>
</DataLabel>
</Marker>
</CommonSeriesOptions>

<Crosshair>
<Marker>
<DataLabel MaximumLabelWidth="0">
<Offset X="0" Y="0"></Offset>
</DataLabel>
</Marker>

<TrackballTooltipSettings>
<Border Color=""></Border>
</TrackballTooltipSettings>
</Crosshair>

<PrimaryXAxis DesiredIntervals="" MaximumLabelWidth="34" LabelIntersectAction="None">
<Title Offset="0"></Title>
</PrimaryXAxis>

<PrimaryYAxis DesiredIntervals="" MaximumLabelWidth="34" LabelIntersectAction="None">
<Title Offset="0"></Title>
</PrimaryYAxis>

<Title Offset="0"></Title>

<Legend Background="" Fill="">
<Size Width="" Height=""></Size>
</Legend>

<Zooming ToolbarItems="(Collection)"></Zooming>

<ExportSettings Angle="0"></ExportSettings>
        </ej:Chart>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:newreporttoolConnectionString %>" SelectCommand="SELECT top 10 [NetCurrentAssets], [NetDeferredTax] FROM [Bsratios]"></asp:SqlDataSource>

    </div>
    </form>
</body>
</html>

And It is giving error Server Error in '/' Application.

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately. 

Parser Error Message: Type 'System.Object' does not have a public property named 'Top'.

Source Error: 


Line 27:         <ej:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" SeriesType="Column" XName="NetCurrentAssets" YName="NetDeferredTax">
Line 28: <CommonSeriesOptions Type="Column" XName="NetCurrentAssets" YName="NetDeferredTax">
Line 29: <CornerRadius Top="0" Bottom="0" Left="0" Right="0"></CornerRadius>
Line 30: 
Line 31: <Marker>

Source File: /WebForm1.aspx    Line: 29 

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.6.1586.0

Can you please post what you have tried so far? Also please format the title and question. Thanks. — Sid

D.Dharanidharan D.Dharanidharan · Accepted Answer · 2017-02-21T09:27:37

We have created sample by giving points in the code behind and binding that dataSource to chart. After binding data source to the chart, in the series you have to map the x and y values to the respective fields with xName and yName properties respectively. Kindly find the code snippet below,

//Assigning points in code behind 
List<ChartData> data = new List<ChartData>(); 
data.Add(new ChartData(2005, 28)); 
data.Add(new ChartData(2006, 25)); 
data.Add(new ChartData(2007, 26)); 
data.Add(new ChartData(2008, 27)); 
data.Add(new ChartData(2009, 32)); 
data.Add(new ChartData(2010, 35)); 
data.Add(new ChartData(2011, 30)); 
//Binding Datasource to Chart 
this.Chart.DataSource = data; 
this.Chart.DataBind(); 

//Mapping x and y values in series 
<Series> 
    <ej:Series XName="Xvalue" YName="YValue1">                         
    </ej:Series> 
</Series>

For your reference we have attached the sample. Kindly find the sample from below link. Sample

Since data can be binded in different ways such as JSON, SQL, XML, etc to chart. So we would like to know which type of data you need to bind for chart.

Here is the online sample link for data binding to chart.

SQL Data

Remote Data

For more details on data binding kindly follow the below link. Help document

Thanks, Dharani.

Syncfusion Chart data Binding

1 Answers