Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Indexed :
    <%@ Page Title="Chart-Indexed Category Axis-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates how to render and configure indexed axis using Syncfusion ASP.NET Web Forms Chart control" AutoEventWireup="true" MasterPageFile="~/Samplebrowser.Master" CodeBehind="IsIndexed.aspx.cs" Inherits="WebSampleBrowser.Chart.IsIndexed" %>
    
     <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" IsResponsive="true" OnClientLoad="onChartLoad">
                <PrimaryXAxis Title-Text="Days" IsIndexed="true" LabelIntersectAction="trim" LabelPlacement="betweenticks" CrosshairLabel-Visible="true" />
                <PrimaryYAxis Title-Text="Sales" LabelFormat="{value}$" />
                <CommonSeriesOptions  Type="Column" >  
    
                </CommonSeriesOptions>
                <Series>
                      <ej:Series Name="Product X" XName="Xvalue" YName="YValue1" Opacity="0.8" ></ej:Series>
                      <ej:Series Name="Product Y" XName="Xvalue" YName="YValue2"  ></ej:Series>
                      <ej:Series Name="Product Z" XName="Xvalue" YName="YValue3"  ></ej:Series>
                </Series>
                <Crosshair visible="true" type="trackball"></Crosshair>
                <Title Text="Weekly Products Sales Comparison"></Title>
                <Legend visible="true" Position="Bottom"></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 aligntop">
                          Indexed : <input type="checkbox" checked onchange="isindex(this)" />
                     </div>
                 </div>    
            
                 </div>
            </div>
            <script type="text/javascript" >
                function isindex(tis) {
                    var chart = $("#Chart1").ejChart("instance");
                    chart.model.primaryXAxis.isIndexed = tis.checked;
                    $("#Chart1").ejChart("redraw");
                }
                $("#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 IsIndexed : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                List<IsindexedChartData> data = new List<IsindexedChartData>();
    
                data.Add(new IsindexedChartData("Monday", 50, 60, 40));
                data.Add(new IsindexedChartData("Tuesday", 40, 30, 60));
                data.Add(new IsindexedChartData("Wednesday", 70, 40, 40));
                data.Add(new IsindexedChartData("Thursday", 60, 80, 30));
                data.Add(new IsindexedChartData("Friday", 50, 70, 80));
                data.Add(new IsindexedChartData("Monday", 40, 50, 30));
                data.Add(new IsindexedChartData("Tuesday", 50, 40, 30));
                data.Add(new IsindexedChartData("Wednesday", 30, 50, 60));
                data.Add(new IsindexedChartData("Thursday", 40, 50, 40));
                data.Add(new IsindexedChartData("Friday", 70, 50, 40));
                data.Add(new IsindexedChartData("Monday", 60, 70, 50));
                data.Add(new IsindexedChartData("Tuesday", 30, 50, 20));
                data.Add(new IsindexedChartData("Wednesday", 50, 60, 30));
                data.Add(new IsindexedChartData("Thursday", 50, 30, 70));
                data.Add(new IsindexedChartData("Friday", 40, 60, 60));
                data.Add(new IsindexedChartData("Monday", 30, 40, 20));
                data.Add(new IsindexedChartData("Tuesday", 55, 65, 35));
                data.Add(new IsindexedChartData("Wednesday", 60, 70, 50));
                data.Add(new IsindexedChartData("Thursday", 30, 40, 20));
                data.Add(new IsindexedChartData("Friday", 60, 40, 30));
    
                //Binding Datasource to Chart
                this.Chart1.DataSource = data;
                this.Chart1.DataBind();
    
                //Setting Range for PrimaryXAxis
                this.Chart1.PrimaryXAxis.Visible = true;
                this.Chart1.PrimaryXAxis.IsIndexed = true;
            }
          
    
        }
    }
    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 IsindexedChartData
        {
                 public IsindexedChartData(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;
            }
    
    
        }