Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Side by Side Series Placement
    Show Edge Labels
    Column Width
    Coloumn Spacing
    Corner Radius
    Column Facet
    <%@ Page Title="Chart-Column-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates how to render and configure column series using Syncfusion ASP.NET Web Forms Chart control" AutoEventWireup="true" MasterPageFile="~/Samplebrowser.Master" CodeBehind="Column.aspx.cs" Inherits="WebSampleBrowser.Chart.Column" %>
    
     <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 ClientIDMode="Static" ID="Chart1" runat="server" Width="690" Height="600" OnClientLoad="onChartLoad" IsResponsive="true">
                <PrimaryXAxis Title-Text="Countries" />
                <PrimaryYAxis Title-Text="Medals" />
                <CommonSeriesOptions EnableAnimation="True" Tooltip-Visible="true" 
                    Tooltip-Format="#point.x# : #point.y# #series.name# Medals" >
                     <Marker>
                      <DataLabel Visible="True" ShowEdgeLabels="true" EnableContrastColor="true">
                       </DataLabel>
                    </Marker>
                    </CommonSeriesOptions>
                <Series>
                      <ej:Series Name="Gold" XName="Xvalue" YName="YValue1" Fill="rgba(135,206,235,1)"></ej:Series>
                      <ej:Series Name="Silver" XName="Xvalue" YName="YValue2" Fill="rgba(255,255,0,0.7)"></ej:Series>
                      <ej:Series Name="Bronze" XName="Xvalue" YName="YValue3" Fill="rgba(255,204,153,1)"></ej:Series>
                </Series>
                <Title Text="Olympic Medals"></Title>
                <Legend Position="Top"></Legend>
            </ej:Chart>
        </div>
    </asp:Content>
    <asp:Content ID="Content3" runat="server" ContentPlaceHolderID="PropertySection">
        
        <div id="sampleProperties">
        <div class="prop-grid">
        <div class="row">           
                <div class="col-md-3" style="width:200px;">
                   <input type="checkbox" id="sidebyside" name="sidebyside" checked> Side by Side Series Placement      
               </div>
        </div>
        <div class="row">                        
                            <div class="col-md-3" style="width:200px;">
                                <input type="checkbox" id="showOutsideLabels" name="outsideLabels" checked> Show Edge Labels <br/>       
                            </div>                        
                        </div>
        <div class="row" style="margin: 10px 0;">
            <div class="col-md-3">
                Column Width
            </div>
            <div class="col-md-3 aligntop">
                <input type="text" id="columnWidth" value = "0.7" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                Coloumn Spacing
            </div>
            <div class="col-md-3 aligntop">
                <input type="text" id="columnSpacing" value = "0"/>
            </div>
        </div>
        <div class="row" style="margin: 20px 0;">
            <div class="col-md-3">
                Corner Radius
            </div>
            <div class="col-md-3 aligntop">
                <input type="text" id="cornerRadius" value = "0" />
            </div>
        </div>
        <div class="row" style="margin: 10px 0;">
            <div class="col-md-3">
                Column Facet
            </div>
            <div class="col-md-3">
                 <div id="dropdown">
                      <select id="optColumnFacet">
                           <option value="rectangle">Rectangle</option>
                           <option value="cylinder">Cylinder</option>
                      </select>
                 </div>
             </div>
        </div>
        </div>
        </div>
            <script type="text/javascript" >
               
                $('#sidebyside').click(function () {
                    var chart = $("#Chart1").ejChart("instance");
                    if ($("#sidebyside").is(":checked"))                                       
                        chart.model.sideBySideSeriesPlacement = true;              
                    else
                        chart.model.sideBySideSeriesPlacement = false;
                    chart.redraw();
                });
            $('#showOutsideLabels').change(function () 
            {
                $("#Chart1").ejChart("option", { "commonSeriesOptions": { marker: { dataLabel: { showEdgeLabels: $('#showOutsideLabels').is(":checked") } } } });
            });
            function changeColumnWidth(e) 
            {
                $('#Chart1').ejChart('option', { commonSeriesOptions: { columnWidth: e.value } });
            }
            function changeColumnSpacing(e) 
            {
                $('#Chart1').ejChart('option', { commonSeriesOptions: { columnSpacing: e.value } });
            }
            function columnFacetChanged(e) {
                $('#Chart1').ejChart('option', { commonSeriesOptions: { columnFacet: e.value } });
            }
            function changecornerRadius(e) {
                $('#Chart1').ejChart('option', { commonSeriesOptions: { cornerRadius: e.value } });
            }
            $("#optColumnFacet").ejDropDownList({ "change": "columnFacetChanged", width: "110px", selectedItemIndex: 0 });
    
            $("#columnWidth").ejNumericTextbox({
                value: 0.7, width: "70px", minValue: 0, maxValue: 1, incrementStep: 0.1, decimalPlaces: 1, change: "changeColumnWidth",
            });
    
            $("#columnSpacing").ejNumericTextbox({
                value: 0, width: "70px", minValue: 0, maxValue: 1, incrementStep: 0.1, decimalPlaces: 1, change: "changeColumnSpacing"
            });
            $("#cornerRadius").ejNumericTextbox({
                value: 0, width: "70px", minValue: 0, maxValue: 12, incrementStep: 1, decimalPlaces: 1, change: "changecornerRadius",
            });
            $("#sampleProperties").ejPropertiesPanel();
                </script>
        </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 Column : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                List<ColumnChartData> data = new List<ColumnChartData>();
    
                data.Add(new ColumnChartData("USA", 50, 70, 45));
                data.Add(new ColumnChartData("China", 40, 60, 55));
                data.Add(new ColumnChartData("Japan", 70, 60, 50));
                data.Add(new ColumnChartData("Australia", 60, 56, 40));
                data.Add(new ColumnChartData("France", 50, 45, 35));
                data.Add(new ColumnChartData("Germany", 40, 30, 22));
                data.Add(new ColumnChartData("Italy", 40, 35, 37));
                data.Add(new ColumnChartData("Sweden", 30, 25, 27));
    
                //Binding Datasource to Chart
                this.Chart1.DataSource = data;
                this.Chart1.DataBind();
    
                //Setting Range for PrimaryYAxis
                this.Chart1.PrimaryYAxis.Range.Min = 0;
                this.Chart1.PrimaryYAxis.Range.Max = 70;
                this.Chart1.PrimaryYAxis.Range.Interval = 10;
    
            }
        }
       
    }
     
           
    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 ColumnChartData
        {
            public ColumnChartData(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;
            }
           
    
        }