Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    <%@ Page Title="Chart-Bar-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates how to render bar series using Syncfusion ASP.NET Web Forms Chart control" AutoEventWireup="true"  MasterPageFile="~/Samplebrowser.Master" CodeBehind="Bar.aspx.cs" Inherits="WebSampleBrowser.Chart.Bar" %>
    
    <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" OnClientDisplayTextRendering="ondataLabel">
                <PrimaryXAxis Title-Text="Year"/>
                <PrimaryYAxis Title-Text="Percentage" LabelFormat="{value}%" />
                <CommonSeriesOptions EnableAnimation="True" Type="Bar" Tooltip-Visible="true" 
                    Tooltip-Format="#series.name# <br/> #point.x# : #point.y#" PieCoefficient="0.5"  >
                    <Marker>
                       <Border Width="2"></Border>
                       <DataLabel Visible="True" TextPosition="top" HorizontalTextAlignment="Near" EnableContrastColor="true">
                       <Font FontSize="13px" FontFamily="Segoe UI" FontStyle="Normal" FontWeight="Regular"></Font>
                    </DataLabel>
                    </Marker>
                </CommonSeriesOptions>
                <Series>
                    <ej:Series Name="India" XName="Xvalue" YName="YValue1"></ej:Series>
                    <ej:Series Name="US" XName="Xvalue" YName="YValue2"></ej:Series>
                </Series>
                <Legend Position="Right" Alignment="Near"></Legend>
                <Title Text="Unemployment rate (%)"></Title>
            </ej:Chart>
             <script>
                 function ondataLabel(sender) {
                     sender.data.location.x = sender.data.location.x + 20;
                 }
            </script>
        </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 Bar : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                //Setting Range for PrimaryXAxis
                this.Chart1.PrimaryXAxis.Range.Max = 2012;
                this.Chart1.PrimaryXAxis.Range.Min = 2005;
                this.Chart1.PrimaryXAxis.Range.Interval = 1;
    
                //Setting Range for PrimaryYAxis
                this.Chart1.PrimaryYAxis.Range.Max = 12;
                this.Chart1.PrimaryYAxis.Range.Min = 3;
                this.Chart1.PrimaryYAxis.Range.Interval = 1;
    
                List<BarChartData> data = new List<BarChartData>();
    
                data.Add(new BarChartData(2006, 7.8, 4.8));
                data.Add(new BarChartData(2007, 7.2, 4.6));
                data.Add(new BarChartData(2008, 6.8, 7.2));
                data.Add(new BarChartData(2009, 10.7, 9.3));
                data.Add(new BarChartData(2010, 10.8,9.7));
                data.Add(new BarChartData(2011, 9.8, 9));
    
                //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 BarChartData
        {
            public BarChartData(double xval, double yvalue1, double yvalue2)
            {
                this.Xvalue = xval;
                this.YValue1 = yvalue1;
                this.YValue2 = yvalue2;
            }
            public double Xvalue
            {
                get;
                set;
            }
            public double YValue1
            {
                get;
                set;
            }
            public double YValue2
            {
                get;
                set;
            }
    
        }