1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Chart and grid control

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.

Shibata


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>
<br/>
<div class="frame ">
        <div class="control">
<div id="Tooltip" style="display: none;">
        <div id="icon">    
          <div id="eficon"></div>
        </div>
        <div id="value">
             <div>
                <label id="efpercentage">&nbsp;#point.y#%</label>
                <label id="ef">Efficiency</label>
             </div>
        </div>
    </div>
  <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"/>
           <Series>
             <ej:Series Name="円/米ドル" XName="Xvalue" YName="YValue1"></ej:Series>
             
           </Series>
           <Legend Visible="true"></Legend>
            <Zooming Enable="true" EnableMouseWheel="true" Type="x,y" />
            <Crosshair Visible="false" Type="Crosshair" />
          <Title Text="為替チャート"></Title>
      </ej:Chart>
      <ej:Grid ID="Grid1" runat="server" OnServerRowSelected="Grid1_ServerRowSelected">
          <Columns>
                <ej:Column Field="Xvalue" HeaderText="date"    TextAlign="Right" Width="300" />
                <ej:Column Field="YValue1" HeaderText="volume" Width="300"  TextAlign="Right" />
               
            </Columns>
          <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>
      </ej:Grid>
      <br />
  </div>
    <style>
        label {
        margin-bottom : -25px !important ;
        text-align :center !important;
        }
        .tooltipDiv {
            background-color:#E94649;        
            color: white;
            width:130px;
        }
        #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;
        }
     </style>
        </div>
    </div>
</asp:Content>



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;" +
                "Password=root";


            var dt = new DataTable();

            using (var con = new MySqlConnection(connectionString))
            {
                using (var adapter = new MySqlDataAdapter())
                {
                    con.Open();


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

            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;
            this.Chart1.DataBind();
            //Setting range for PrimaryXAxis
           
            this.Chart1.PrimaryXAxis.Range.Interval = 1;
            //Setting range for PrimaryYAxis

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

            this.Grid1.DataSource = data ;
            this.Grid1.DataBind();
        }

        
    }
    [Serializable]
    public class LineChartData
    {
        public LineChartData(String xval, decimal yvalue1)
        {
            this.Xvalue = xval;
            this.YValue1 = yvalue1;

        }
        public String Xvalue
        {
            get;
            set;
        }
        public decimal YValue1
        {
            get;
            set;
        }
      
    }
   
}



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> 
                 </ContentTemplate> 
        </asp:UpdatePanel> 
 
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) 
                { 
                    myConnection.Open(); 
                } 
                da.Fill(dt); 
                Session["SqlDataSource"] = dt; 
                dataBind(); 
            } 
        } 

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? 


Regards, 
K.Karthick. 


Loader.
Up arrow icon