Chart and grid control

[shibata]

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

[Karthick Kuppusamy]

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.   

http://help.syncfusion.com/aspnet/grid/data-binding#sqldatasource   

 

Online demo:  

http://asp.syncfusion.com/demos/web/grid/sqlbinding.aspx   

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

http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionASPNETApplication7273605596.zip. 

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.