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.
Unfortunately, activation email could not send to your email. Please try again.

Chart and grid control

Thread ID:

Created:

Updated:

Platform:

Replies:

124836 Jul 2,2016 06:35 AM Jul 4,2016 10:23 AM ASP.NET Web Forms 1
loading
Tags: Grid
shibata
Asked On July 2, 2016 06:35 AM

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 [Syncfusion]
Replied On July 4, 2016 10:23 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;