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. Image for the cookie policy date
close icon

Chart and grid control

I wrote a source cord to make a chart and a grid on the same page using MySQL.
After running them the chart was successfully displayed but the grid didn't.
Could you check what was wrong with the source cord?
I will attach the aspx file, the cs file, and the screenshot of the page below.
Thank you.


aspx file

<%@ Page Language="C#" MasterPageFile="~/Site.Master" Title="Chart" AutoEventWireup="true" CodeBehind="ChartFeatures.aspx.cs" Inherits="SyncfusionASPNETApplication1.ChartFeatures" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Chart Features:</h2>
<br />
<li> Chart Types - Line Chart</li>
<li> Zooming</li>
<li> CrossHair</li>
<li> Legend Position</li>
<li> ChartSelection</li>
<li> Theme - Flat-Azure</li>
<div class="frame ">
        <div class="control">
<div id="Tooltip" style="display: none;">
        <div id="icon">    
          <div id="eficon"></div>
        <div id="value">
                <label id="efpercentage">&nbsp;#point.y#%</label>
                <label id="ef">Efficiency</label>
  <div id="container">
      <ej:WaitingPopup runat="server" ID="waitingpopup" ShowOnInit="false"></ej:WaitingPopup>
      <ej:Chart ID="Chart1" runat="server" Width="970" Height="600" CanResize="true" ClientIDMode="Static" EnableCanvasRendering="false" Enable3D="false" OnClientLoad="loadTheme" >
           <PrimaryXAxis Title-Text="day"/>
           <PrimaryYAxis LabelFormat="{value}" RangePadding="Round" Title-Text="円/米ドル"/>
           <CommonSeriesOptions Type="Line" DoughnutSize="0.2" Tooltip-Visible="false" Tooltip-Template="Tooltip" Marker-Size-Height="10" 
               Marker-Size-Width="10" Marker-Border-Width="2"  Marker-Visible="true" EnableAnimation="True"/>
             <ej:Series Name="円/米ドル" XName="Xvalue" YName="YValue1"></ej:Series>
           <Legend Visible="true"></Legend>
            <Zooming Enable="true" EnableMouseWheel="true" Type="x,y" />
            <Crosshair Visible="false" Type="Crosshair" />
          <Title Text="為替チャート"></Title>
      <ej:Grid ID="Grid1" runat="server" OnServerRowSelected="Grid1_ServerRowSelected">
                <ej:Column Field="Xvalue" HeaderText="date"    TextAlign="Right" Width="300" />
                <ej:Column Field="YValue1" HeaderText="volume" Width="300"  TextAlign="Right" />
          <ScrollSettings Height="200" Width="600" ></ScrollSettings>
             <PageSettings PageSize="15" />
              <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
                    <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
      <br />
        label {
        margin-bottom : -25px !important ;
        text-align :center !important;
        .tooltipDiv {
            color: white;
        #Tooltip >div:first-child {
            float: left;
        #Tooltip #value {
            float: right;
            height: 50px;
            width: 68px;
        #Tooltip #value >div {
            margin: 5px 5px 5px 5px;
        #Tooltip #efpercentage {
            font-size: 20px;
            font-family: segoe ui;
            padding-left: 2px;
         #Tooltip #ef {
             font-size: 12px;
             font-family: segoe ui;
        #eficon {
            background-image: url("../Content/images/chart/eficon.png");
            height: 60px;
            width: 60px;
            background-repeat: no-repeat;

cs file

using Syncfusion.XlsIO;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Syncfusion.JavaScript.DataVisualization;
using Syncfusion.JavaScript.DataVisualization.Models;
using Syncfusion.EJ.Export;
using System.Data;
using MySql.Data.MySqlClient;

namespace SyncfusionASPNETApplication1
    public partial class ChartFeatures : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
            var connectionString =
                "Server=localhost;" +
                "Database=exchange;" +
                "User ID=root;" +

            var dt = new DataTable();

            using (var con = new MySqlConnection(connectionString))
                using (var adapter = new MySqlDataAdapter())

                    var query = "SELECT * FROM sample";
                    adapter.SelectCommand = new MySqlCommand(query, con);

            var x = new string[dt.Rows.Count];
            var y = new decimal[dt.Rows.Count];
            for (var i = 0; i < dt.Rows.Count; i++)
                x[i] = dt.Rows[i][0].ToString();
                y[i] = Convert.ToInt32(dt.Rows[i][1]);
            List<LineChartData> data = new List<LineChartData>();
            for (var i= 0;i<dt.Rows.Count; i++)
                data.Add(new LineChartData(x[i], y[i]));
            //Binding Datasource to Chart1
            this.Chart1.DataSource = data;
            //Setting range for PrimaryXAxis
            this.Chart1.PrimaryXAxis.Range.Interval = 1;
            //Setting range for PrimaryYAxis

            this.Chart1.PrimaryYAxis.Range.Interval = 5;

            this.Grid1.DataSource = data ;

    public class LineChartData
        public LineChartData(String xval, decimal yvalue1)
            this.Xvalue = xval;
            this.YValue1 = yvalue1;

        public String Xvalue
        public decimal YValue1

Attachment: スクリーンショット_(9)_e62ea644.zip

1 Reply

KK Karthick Kuppusamy Syncfusion Team July 4, 2016 02:23 PM UTC

Hi Shibata, 

Thanks for contacting Syncfusion support. 

We have analyzed your code and we are unable to reproduce the issue at our end. Please find the below code example. 

<asp:SqlDataSource ID="SqlData" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>" 
            SelectCommand="SELECT * FROM [Products] WHERE UnitPrice < 10"></asp:SqlDataSource> 
Controller Code: 
protected void Page_Load(object sender, EventArgs e) 
            if (!IsPostBack) 
                SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ToString()); 
                dt = new DataTable("Order"); 
                SqlCommand cmd = new SqlCommand(); 
                cmd.Connection = myConnection; 
                cmd.CommandText = "select * from Orders"; 
                cmd.CommandType = CommandType.Text; 
                SqlDataAdapter da = new SqlDataAdapter(); 
                da.SelectCommand = cmd; 
                if (myConnection.State == ConnectionState.Closed) 
                Session["SqlDataSource"] = dt; 

For more information about SqlDatsource with grid,  please refer to the below Help document.   
Online demo:  

For your reference we have created a sample for your requirement. 

If we misunderstood your requirement ,please share the following details to us it would be helpful for us to serve you. 

1.Is any script error thrown ? 

2.Please check,If data return correctly from server side. 

3.If possible, please reproduce the issue in attached sample? 


Live Chat Icon For mobile
Up arrow icon