Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    <%@ Page Title="Chart-Candle-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates how to render candle series using Syncfusion ASP.NET Web Forms Chart control" AutoEventWireup="true" MasterPageFile="~/Samplebrowser.Master"  CodeBehind="Candle.aspx.cs" Inherits="WebSampleBrowser.Chart.Candle" %>
    
     <asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">
        <div id="Tooltip" style="display: none;  width:110px;padding-top: 10px;padding-bottom:10px">
           
              <div align="center" style="font-weight:bold">
                        #point.x#
              </div>  
              <table>
                <tr>
                    <td>
                       Open:
                    </td>
                    <td>
                        $#point.open#
                    </td>
                   
                </tr>
                <tr>
                    <td>
                        High:
                    </td>
                    <td>
                        $#point.high#
                    </td>
                   
                </tr>
                 <tr>
                    <td>
                        Low:
                    </td>
                    <td >
                        $#point.low#
                    </td>
                   
                </tr>
                 <tr>
                    <td>
                        Close:
                    </td>
                    <td>
                        $#point.close#
                    </td>
                   
                </tr>
                 
            </table>        
        </div>
    
       <div>
           <script type="text/javascript" src="../Scripts/ChartData.js"></script>
            <ej:WaitingPopup runat="server" ID="waitingpopup" ShowOnInit="false"></ej:WaitingPopup>
            <ej:Chart ClientIDMode="Static" ID="Chart1" runat="server" Width="970" Height="600" OnClientLoad="onChartLoad" IsResponsive="true">
                <PrimaryXAxis Title-Text="Date" IntervalType="Years" ValueType="Datetime" />
                <PrimaryYAxis Title-Text="Price in Dollars" LabelFormat="${value}" />
                <Title Text="Foreign Exchange Rate Analysis"></Title>
                <Series>
                    <ej:Series EnableAnimation="True" Tooltip-Visible="True" Tooltip-Template="Tooltip" Type="Candle"
                         Name="Candle" XName="Xvalue" High="YValue1" Low="YValue2" Open="YValue3" Close="YValue4"></ej:Series>
                </Series>
                <Legend Visible="False"></Legend>
            </ej:Chart>
        </div>
    </asp:Content>
    
    <asp:Content ID="Content3" ContentPlaceHolderID="StyleSection" runat="server">
        <style>
            .tooltipDivChart1 table, table th, table tr , table td{
                    border:0px none;
                    margin: 0 auto;
               }
                  .tooltipDivChart1 
                {
                    border:2px transparent;
                    color:white;
                }
                #Tooltip td
                {
                color:white;
                }
             
        </style>
    </asp:Content>
    
    
    using System;
    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;
    
    namespace WebSampleBrowser.Chart
    {
        public partial class Candle : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
               
                //Setting Range for PrimaryXAxis
                this.Chart1.PrimaryXAxis.Range.Min =new DateTime(1949, 1, 1);
                this.Chart1.PrimaryXAxis.Range.Max = new DateTime(2009, 1, 1);
                this.Chart1.PrimaryXAxis.Range.Interval = 20;
    
                //Setting Range for PrimaryYAxis
                this.Chart1.PrimaryYAxis.Range.Min = 0;
                this.Chart1.PrimaryYAxis.Range.Max = 250;
                this.Chart1.PrimaryYAxis.Range.Interval = 50;
    
                List<CandleChartData> data = new List<CandleChartData>();
    
                data.Add(new CandleChartData(new DateTime(1950, 1, 12),125,70,115,90));
                data.Add(new CandleChartData(new DateTime(1953, 1, 12),150, 60,120,70 ));
                data.Add(new CandleChartData(new DateTime(1956, 1, 12), 200, 140,160,190));
                data.Add(new CandleChartData(new DateTime(1959, 1, 12),160,90,140,110));
                data.Add(new CandleChartData(new DateTime(1962, 1, 12), 200,100,180,120));
                data.Add(new CandleChartData(new DateTime(1965, 1, 12), 100,45,70,50));
                data.Add(new CandleChartData(new DateTime(1968, 1, 12), 150,70,140,130));
                data.Add(new CandleChartData(new DateTime(1971, 1, 12), 90,60,65,80));
                data.Add(new CandleChartData(new DateTime(1974, 1, 12), 225,170,175,220));
                data.Add(new CandleChartData(new DateTime(1977, 1, 12), 250,180,223,190));
                data.Add(new CandleChartData(new DateTime(1980, 1, 12), 200,140,160,190));
                data.Add(new CandleChartData(new DateTime(1983, 1, 12), 160,90,140,110));
                data.Add(new CandleChartData(new DateTime(1986, 1, 12), 200,100,180,120));
                data.Add(new CandleChartData(new DateTime(1989, 1, 1), 130,95,120,100));
                data.Add(new CandleChartData(new DateTime(1991, 1, 12), 100,70,92,75));
                data.Add(new CandleChartData(new DateTime(1994, 1, 12), 50,85,65,80));
                data.Add(new CandleChartData(new DateTime(1997, 1, 12), 185,110,130,170));
                data.Add(new CandleChartData(new DateTime(2000, 1, 12), 90,30,80,50));
                data.Add(new CandleChartData(new DateTime(2003, 1, 12), 200,140,160,190));
                data.Add(new CandleChartData(new DateTime(2006, 1, 12),170,90,140,110));
                data.Add(new CandleChartData(new DateTime(2008, 1, 12), 200,100,180,120));
    
                //Binding Datasource to Chart
                this.Chart1.DataSource = data;
                this.Chart1.DataBind();
               
            }
        }
       
    }
      
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Data;
    using System.ComponentModel;
    using System.Web.Script.Serialization;
     [Serializable]
        public class CandleChartData
        {
            public CandleChartData(DateTime xval, double yvalue1, double yvalue2, double yvalue3, double yvalue4)
            {
                this.Xvalue = xval;
                this.YValue1 = yvalue1;
                this.YValue2 = yvalue2;
                this.YValue3 = yvalue3;
                this.YValue4 = yvalue4;
            }
            public DateTime Xvalue
            {
                get;
                set;
            }
            public double YValue1
            {
                get;
                set;
            }
            public double YValue2
            {
                get;
                set;
            }
            public double YValue3
            {
                get;
                set;
            }
            public double YValue4
            {
                get;
                set;
            }
    
        }