Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    <%@ Page Title="Chart-Line-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates how to render and configure line series using Syncfusion ASP.NET Web Forms Chart control" MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="DefaultFunctionalities.aspx.cs" Inherits="WebSampleBrowser.Chart.DefaultFunctionalities" %>
    
    <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ScriptSection">
             
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ControlsSection" runat="server">
        <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">
          <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 Title-Text="Year" Valuetype="Category"/>
               <PrimaryYAxis LabelFormat="{value}%" RangePadding="Round" Title-Text="Efficiency"/>
               <CommonSeriesOptions Type="Line" DoughnutSize="0.2" Tooltip-Visible="true" Tooltip-Template="Tooltip" Marker-Size-Height="10" 
                   Marker-Size-Width="10" Marker-Border-Width="2"  Marker-Visible="true" EnableAnimation="True"/>
               <Series>
                 <ej:Series Name="India" XName="Xvalue" YName="YValue1"></ej:Series>
                 <ej:Series Name="Germany" XName="Xvalue" YName="YValue2"></ej:Series>
                 <ej:Series Name="England" XName="Xvalue" YName="YValue3"></ej:Series>
                 <ej:Series Name="France" XName="Xvalue" YName="YValue4"></ej:Series>
               </Series>
               <Legend Visible="true"></Legend>
              <Title Text="Efficiency of oil-fired power production"></Title>
          </ej:Chart>
      </div>
    </asp:Content>
    
    <asp:Content ID="Content3" ContentPlaceHolderID="StyleSection" runat="server">
        <style>
            label {
            margin-bottom : -25px !important ;
            text-align :center !important;
            }
            .tooltipDivChart1 {
                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>
    </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 DefaultFunctionalities : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                List<LineChartData> data = new List<LineChartData>();
    
                data.Add(new LineChartData(2005, 28, 31, 36, 39));
                data.Add(new LineChartData(2006, 25, 28, 32, 36));
                data.Add(new LineChartData(2007, 26, 30, 34, 40));
                data.Add(new LineChartData(2008, 27, 36, 41, 44));
                data.Add(new LineChartData(2009, 32, 36, 42, 45));
                data.Add(new LineChartData(2010, 35, 39, 42, 48));
                data.Add(new LineChartData(2011, 30, 37, 43, 46));
    
                //Binding Datasource to Chart
                this.Chart1.DataSource = data;
                this.Chart1.DataBind();
    
                //Setting range for PrimaryXAxis
                this.Chart1.PrimaryXAxis.Range.Min = 2005;
                this.Chart1.PrimaryXAxis.Range.Max = 2011;
                this.Chart1.PrimaryXAxis.Range.Interval = 1;
    
                //Setting range for PrimaryYAxis
                this.Chart1.PrimaryYAxis.Range.Min = 25;
                this.Chart1.PrimaryYAxis.Range.Max = 50;
                this.Chart1.PrimaryYAxis.Range.Interval = 5;
    
            }
        }
       
    }
    
          
       
          
          
    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 LineChartData
        {
            public LineChartData(double 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 double Xvalue
            {
                get;
                set;
            }
            public double YValue1
            {
                get;
                set;
            }
            public double YValue2
            {
                get;
                set;
            }
            public double YValue3
            {
                get;
                set;
            }
            public double YValue4
            {
                get;
                set;
            }
    
        }