Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    <%@ Page Title="Chart-Multiple Axes-ASP.NET-SYNCFUSION" Language="C#" MetaDescription="This sample demonstrates how to render multiple axes using Syncfusion ASP.NET Web Forms Chart control" MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="MultipleAxes.aspx.cs" Inherits="WebSampleBrowser.Chart.MultipleAxes" %>
    <%@ Register Assembly="Syncfusion.EJ.Web" TagPrefix="ej" Namespace="Syncfusion.JavaScript.Web" %>
    <%@ Register Assembly="Syncfusion.EJ" Namespace="Syncfusion.JavaScript.Models" TagPrefix="ej" %>
    
    <asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">
        <div>
            <script type="text/javascript" src="../Scripts/ChartData.js"></script>
            <ej:WaitingPopup runat="server" ID="waitingpopup" ShowOnInit="false"></ej:WaitingPopup>
            <ej:Chart ID="Chart1" runat="server" Width="970" Height="600" IsResponsive="true" OnClientLoad="onChartLoad">
                <RowDefinitions>
                    <ej:RowDefinitions Unit="percentage" RowHeight="48" LineWidth="10" LineColor="gray" />
                    <ej:RowDefinitions Unit="percentage" RowHeight="48" LineWidth="5" LineColor="#A8A8A8" />
                </RowDefinitions>
                <PrimaryXAxis Title-Text="Month" />
                <PrimaryYAxis AxisLine-Visible="false" Title-Text="Temperature(Fahrenheit)" LabelFormat="{value}F" />
                <Axes>
                    <ej:Axis MajorGridLines-Visible="false" Orientation="Vertical" RowIndex="1" OpposedPosition="true" 
                        AxisLine-Visible="false" Name="yAxis" LabelFormat="{value}C" Title-Text="Temperature(Celsius)" />
                    <ej:Axis RowIndex="1" PlotOffset="15" Orientation="Vertical" OpposedPosition="false" 
                        AxisLine-Visible="false" Name="yAxis1" LabelFormat="{value}K" Title-Text="Temperature(Kelvin)" />
                </Axes>
                <CommonSeriesOptions EnableAnimation="True"></CommonSeriesOptions>
               <Series>
                 <ej:Series Name="Germany" XName="Xvalue" YName="YValue1"  Fill="#69D2E7" 
                      Tooltip-Visible="true" Tooltip-Format="#series.name#  &lt;br/> #point.x# : #point.y#"></ej:Series>
                 <ej:Series Name="India" XName="Xvalue" YName="YValue2" Type="Line" YAxisName="yAxis"
                      Marker-Size-Width="6" Marker-Size-Height="6" Marker-Visible="true" Marker-Shape="Circle" 
                      Tooltip-Visible="true" Tooltip-Format="#series.name#  &lt;br/> #point.x# : #point.y# "></ej:Series>
                 <ej:Series Name="Canada" XName="Xvalue" YName="YValue3" Type="Line" YAxisName="yAxis" 
                      Marker-Size-Width="6" Marker-Size-Height="6" Marker-Visible="true" Marker-Shape="Circle" 
                      Tooltip-Visible="true" Tooltip-Format="#series.name#  &lt;br/> #point.x# : #point.y# "></ej:Series>
               </Series>
                <Title Text="Weather Report"></Title>
            </ej:Chart>
        </div>
    </asp:Content>
    
    
    
    using Syncfusion.JavaScript.DataVisualization;
    using Syncfusion.JavaScript.DataVisualization.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebSampleBrowser.Chart
    {
        public partial class MultipleAxes : 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 = 90;
                this.Chart1.PrimaryYAxis.Range.Interval = 10;
                
                //Setting Range for multipleaxes
                this.Chart1.Axes[0].Range.Min = 24;
                this.Chart1.Axes[0].Range.Max = 36;
                this.Chart1.Axes[0].Range.Interval = 2;
                this.Chart1.Axes[1].Range.Min = 24;
                this.Chart1.Axes[1].Range.Max = 30;
                this.Chart1.Axes[1].Range.Interval = 2;
    
                List<MultiDatta> data = new List<MultiDatta>();
    
                data.Add(new MultiDatta("Jan", 15, 33, 28));
                data.Add(new MultiDatta("Feb", 20, 31, 28.3));
                data.Add(new MultiDatta("Mar", 35, 30, 28.7));
                data.Add(new MultiDatta("Apr", 40, 28, 29));
                data.Add(new MultiDatta("May", 80, 29, 29.5));
                data.Add(new MultiDatta("June", 70, 30, 29));
                data.Add(new MultiDatta("July", 65, 33, 28.9));
                data.Add(new MultiDatta("Aug", 55, 32, 28.4));
                data.Add(new MultiDatta("Sep", 50, 34, 28.6));
                data.Add(new MultiDatta("Oct", 30, 32, 28));
                data.Add(new MultiDatta("Nov", 35, 32, 28.2));
                data.Add(new MultiDatta("Dec", 35, 31, 28));
               
                //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 MultiDatta
        {
            public MultiDatta(string xval, double yvalue1, double yvalue2, double yvalue3)
            {
                this.Xvalue = xval;
                this.YValue1 = yvalue1;
                this.YValue2 = yvalue2;
                this.YValue3 = yvalue3;
               
            }
            public string Xvalue
            {
                get;
                set;
            }
            public double YValue1
            {
                get;
                set;
            }
            public double YValue2
            {
                get;
                set;
            }
            public double YValue3
            {
                get;
                set;
            }
             
            
    
        }