Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    <%@ Page Title="Chart-Hilo-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates how to render and configure hilo series using Syncfusion ASP.NET Web Forms Chart control" AutoEventWireup="true" MasterPageFile="~/Samplebrowser.Master" CodeBehind="Hilo.aspx.cs" Inherits="WebSampleBrowser.Chart.Hilo" %>
    
     <asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">
         <div id="Tooltip" style="display: none; width:125px;padding-top: 10px;padding-bottom:10px">       
                    <div align="center" style="font-weight:bold">
                        #point.x#
                    </div>                
               <table>
                <tr>
                    <td>
                        High:
                    </td>
                    <td>
                        #point.high#mm
                    </td>
                   
                </tr>
                 <tr>
                    <td>
                        Low:
                    </td>
                    <td >
                        #point.low#mm
                    </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" IsResponsive="true" OnClientLoad="onChartLoad">
                <PrimaryXAxis RangePadding="Additional" Title-Text="Country" MajorGridLines-Visible="false" LabelRotation="90" />
                <PrimaryYAxis Title-Text="Rainfall(mm)" LabelFormat="{value}mm" MajorGridLines-Visible="true" />
                <CommonSeriesOptions Type="Hilo" Border-Width="2" Explode="true" />
                <Title Text="Highest and Lowest Rainfall across World"></Title>
                <Series>
                    <ej:Series EnableAnimation="True" Name="Rainfall" Tooltip-Visible="True" 
                        Tooltip-Template="Tooltip" XName="Xvalue" High="YValue1" Low="YValue2"></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 {
                    border:0px none;
                    margin: 0 auto;
               
                }
                 table td {
                    border:0px none;
                    margin: 0 auto;
                    display:inline;
                }
                .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 Hilo : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
               
                //Setting Range for PrimaryYAxis
                this.Chart1.PrimaryYAxis.Range.Min = 0;
                this.Chart1.PrimaryYAxis.Range.Max = 300;
                this.Chart1.PrimaryYAxis.Range.Interval = 50;
    
                List<HiloChartData> data = new List<HiloChartData>();
    
                data.Add(new HiloChartData("India", 100,70));
                data.Add(new HiloChartData("Japan", 170,90));
                data.Add(new HiloChartData("Argentina", 240,170));
                data.Add(new HiloChartData("Australia", 290,200));
                data.Add(new HiloChartData("Canada", 200,110));
                data.Add(new HiloChartData("Poland", 160,70));
                data.Add(new HiloChartData("Russia", 200,100));
                data.Add(new HiloChartData("Mexico", 190,80));
                data.Add(new HiloChartData("Turkey", 150,90));
                data.Add(new HiloChartData("Indonesia", 180,120));
                data.Add(new HiloChartData("Spain", 220, 150));
                data.Add(new HiloChartData("France", 210, 130));
                data.Add(new HiloChartData("Germany", 110, 75));
                
                //Binding the 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 HiloChartData
        {
            public HiloChartData(string xval, double yvalue1, double yvalue2)
            {
                this.Xvalue = xval;
                this.YValue1 = yvalue1;
                this.YValue2 = yvalue2;
            }
            public string Xvalue
            {
                get;
                set;
            }
            public double YValue1
            {
                get;
                set;
            }
            public double YValue2
            {
                get;
                set;
            }
    
        }