CODEWITHSUNDEEP
databasedata-bindingsyncfusion
wendykcoding
wendykcoding

Reputation: 57

How to bind Syncfusion chart to SQL DataSource?

I am new to Syncfusion Essential Studio. I want to be able to use the chart features in my ASP.NET Web Application to display charts - bar and pie, for data representation.

The data is stored in SQL Server 2008. I have used to AJAX and Microsoft charts but the client really likes the features from Syncfusion. I have read the documentation on apps developed in ASP.NET especially those that graphic representation.

The application is for the HSSE Department and the charts are to be displayed on the dashboard for users to view completed, or outstanding action items.

How do I bind data from SQL to the Syncfusion chart?

I have used the following code but it doesn't work:

public partial class ChartFeatures: System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
      DataTable table = new DataTable();
        SqlDataAdapter adapter = new SqlDataAdapter();


        //Create the SQL Database connection
        SqlConnection con = new SqlConnection(HSSEConnection);
        con.Open();
        //Select all the records in database
        string command = "select * from HsEntry";
        SqlCommand cmd = new SqlCommand(command, con);
        adapter.SelectCommand = cmd;

        //Retrieve the records from database
        adapter.Fill(table);
    }
}

I have the namespaces:

using Syncfusion.XlsIO;
using System;
using Syncfusion.JavaScript.DataVisualization;
using Syncfusion.JavaScript.DataVisualization.Models;
using Syncfusion.EJ.Export;
using System.Data;
using System.Data.SqlClient;

Can someone please guide me to what I am missing? Can anyone provide a link or documentation that has databind to SQL using the Syncfusion studio?

Upvotes: 0

Views: 345

Answers (1)

Dharani
Dharani

Reputation: 1106

Greetings from Syncfusion. We would like to let you know that, we are having online sample for SQL in which you need to give connection string name in the asp sql data source tag and the id must be same which is specified in DataSourceID in chart tag as well as ID in ASP SqlDataSource tag. Then you can map the x and y fields to xName and yName respectively. Specify the connection string name as per in web config file.

<ej:Chart ID="Chart1" DataSourceID="SqlData">
   <Series>
      <ej:Series XName="ProductName" YName="UnitPrice"></ej:Series>
   </Series>
</ej:Chart>


<asp:SqlDataSource ID="SqlData" runat="server" ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>"
     SelectCommand="SELECT * FROM [Products] WHERE UnitPrice < 10"></asp:SqlDataSource>

Sample: SQL

Hope this helps.

Thanks, Dharani.

Upvotes: 1

Related Questions