Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    <%@ Page Title="Chart-Area-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates how to render and configure area series using Syncfusion ASP.NET Web Forms Chart control" AutoEventWireup="true" MasterPageFile="~/Samplebrowser.Master" CodeBehind="Area.aspx.cs" Inherits="WebSampleBrowser.Chart.Area" %>
    
     
    <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" IsResponsive="true" Height="600" OnClientLoad="onChartLoad">
                <PrimaryXAxis MajorGridLines-Visible="false" MinorGridLines-Visible="false" AxisLine-Visible="true" Title-Text="Year" />
                <PrimaryYAxis AxisLine-Visible="false" MajorTickLines-Visible="false" Title-Text="Sales Amount in Millions" />
                <CommonSeriesOptions Type="Area" Marker-Border-Width="2" Marker-Border-Color="transparent" Opacity="0.5" 
                    EnableAnimation="True" />
                <Series>
                    <ej:Series Name="Product A" XName="Xvalue" YName="YValue1" Fill="#69D2E7"></ej:Series>
                 <ej:Series Name="Product B" XName="Xvalue" YName="YValue2" Fill="#C4C24A"></ej:Series>
                 <ej:Series Name="Product C" XName="Xvalue" YName="YValue3" Fill="#6A4B82"></ej:Series>
                    </Series>
                <Title Text="Average Sales Comparison"></Title>
                <Legend Visible="true"></Legend>
            </ej:Chart>
        </div>
    </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 Area : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
               //Setting Range for PrimaryXAxis
                this.Chart1.PrimaryXAxis.Range.Min= 1900;
                this.Chart1.PrimaryXAxis.Range.Max = 2000;
                this.Chart1.PrimaryXAxis.Range.Interval = 10;
               
                //Setting Range for PrimaryYAxis
                this.Chart1.PrimaryYAxis.Range.Min = 2;
                this.Chart1.PrimaryYAxis.Range.Max = 5;
                this.Chart1.PrimaryYAxis.Range.Interval = 0.5;
    
                List<AreaChartData> data = new List<AreaChartData>();
    
                data.Add(new AreaChartData(1900, 4, 2.6, 2.8));
                data.Add(new AreaChartData(1920, 3, 2.8, 2.5));
                data.Add(new AreaChartData(1940, 3.8, 2.6, 2.8));
                data.Add(new AreaChartData(1960, 3.4, 3, 3.2));
                data.Add(new AreaChartData(1980, 3.2, 3.6, 2.9));
                data.Add(new AreaChartData(2000, 3.9, 3, 2));
    
                //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 AreaChartData
        {
            public AreaChartData(double xval, double yvalue1, double yvalue2, double yvalue3)
            {
                this.Xvalue = xval;
                this.YValue1 = yvalue1;
                this.YValue2 = yvalue2;
                this.YValue3 = yvalue3;
    
            }
            public double Xvalue
            {
                get;
                set;
            }
            public double YValue1
            {
                get;
                set;
            }
            public double YValue2
            {
                get;
                set;
            }
            public double YValue3
            {
                get;
                set;
            }
           
    
        }