Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Chart Type
    <%@ Page Title="PivotChart-3DChart-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This demo for Syncfusion Essential JS1 for ASP.NET pivot chart control demonstrates different types of charts as 3D chart." MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true"
        CodeBehind="3DChart.aspx.cs" Inherits="WebSampleBrowser._3DChart" %>
    
    <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ControlsSection">
        <ej:PivotChart ID="PivotChart1" runat="server" Enable3D="true" Rotation="24" IsResponsive="true" ClientIDMode="Static">
            <DataSource>
                <Rows>
                    <ej:Field FieldName="Product" FieldCaption="Product"></ej:Field>
                    <ej:Field FieldName="Date" FieldCaption="Date"></ej:Field>
                </Rows>
                <Columns>
                    <ej:Field FieldName="Country" FieldCaption="Country"></ej:Field>
                </Columns>
                <Values>
                    <ej:Field FieldName="Amount" FieldCaption="Amount"></ej:Field>
                </Values>
            </DataSource>
            <CommonSeriesOptions Type="Column"  EnableAnimation="True" Tooltip-Visible="true"/>
            <ClientSideEvents Load="onLoad" />
            <Size Width="100%" Height="460px"></Size>
            <PrimaryYAxis>
                <Title Text="Amount"></Title>
            </PrimaryYAxis>
            <Legend RowCount="2"></Legend>
        </ej:PivotChart>
    </asp:Content>
    <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="PropertySection">
        <div id="sampleProperties">
            <div class="prop-grid">
                <div class="row">
                    <div class="col-md-3" style="width: 75px; padding-top: 3px; margin-top: 18px">
                        Chart Type
                    </div>
                    <div class="col-md-3" style="margin-top: 17px">
                        <select id="chartType">
                            <option value="column"selected="selected">Column</option>
                            <option value="pie">Pie</option>
                            <option value="bar">Bar</option>
                            <option value="stackingcolumn">StackingColumn</option>
                            <option value="stackingbar">StackingBar</option>
                       </select>
                    </div>
                </div>
            </div>
        </div>
    </asp:Content>
    <asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">
        <script type="text/javascript">
            var ddlTarget, chartTarget;
            $(function () {
                $("#sampleProperties").ejPropertiesPanel();
                $("#chartType").ejDropDownList({
                    width: "110px"
                });
                ddlTarget = $('#chartType').data("ejDropDownList");
                ddlTarget.selectItemByText(ddlTarget.items[0].innerHTML);
                chartTarget = $('#PivotChart1').data("ejPivotChart");
                $("#chartType").ejDropDownList("option", "change", "ChartTypeChanged");
            });
            function ChartTypeChanged(args) {
                chartTarget.model.type = args.text.toLowerCase();
                chartTarget.model.commonSeriesOptions.type = args.text.toLowerCase();
                chartTarget.renderControlSuccess({ "JsonRecords": JSON.stringify(chartTarget.getJSONRecords()), "OlapReport": chartTarget.getOlapReport() });
            }
            function onLoad(args) {
                args.model.dataSource.data = [
                                { Amount: 100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Alberta" },
                                { Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 3, State: "British Columbia" },
                                { Amount: 300, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Brunswick" },
                                { Amount: 150, Country: "Canada", Date: "FY 2008", Product: "Bike", Quantity: 3, State: "Manitoba" },
                                { Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Car", Quantity: 4, State: "Ontario" },
                                { Amount: 100, Country: "Canada", Date: "FY 2007", Product: "Van", Quantity: 1, State: "Quebec" },
                                { Amount: 200, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Charente-Maritime" },
                                { Amount: 250, Country: "France", Date: "FY 2006", Product: "Van", Quantity: 4, State: "Essonne" },
                                { Amount: 300, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 3, State: "Garonne (Haute)" },
                                { Amount: 150, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 2, State: "Gers" },
                                { Amount: 200, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 3, State: "Bayern" },
                                { Amount: 250, Country: "Germany", Date: "FY 2007", Product: "Car", Quantity: 3, State: "Brandenburg" },
                                { Amount: 150, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 4, State: "Hamburg" },
                                { Amount: 200, Country: "Germany", Date: "FY 2008", Product: "Bike", Quantity: 4, State: "Hessen" },
                                { Amount: 150, Country: "Germany", Date: "FY 2007", Product: "Van", Quantity: 3, State: "Nordrhein-Westfalen" },
                                { Amount: 100, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Saarland" },
                                { Amount: 150, Country: "United Kingdom", Date: "FY 2008", Product: "Bike", Quantity: 5, State: "England" },
                                { Amount: 250, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Alabama" },
                                { Amount: 200, Country: "United States", Date: "FY 2005", Product: "Van", Quantity: 4, State: "California" },
                                { Amount: 100, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 2, State: "Colorado" },
                                { Amount: 150, Country: "United States", Date: "FY 2008", Product: "Car", Quantity: 3, State: "New Mexico" },
                                { Amount: 200, Country: "United States", Date: "FY 2005", Product: "Bike", Quantity: 4, State: "New York" },
                                { Amount: 250, Country: "United States", Date: "FY 2008", Product: "Car", Quantity: 3, State: "North Carolina" },
                                { Amount: 300, Country: "United States", Date: "FY 2007", Product: "Van", Quantity: 4, State: "South Carolina" }
                ];
                loadTheme(args);
            }
        </script>
    </asp:Content>
    <asp:Content ID="Content3" runat="server" ContentPlaceHolderID="StyleSection">
        <style type="text/css">
            #PivotChart1
            {
                width: 100%;
                float: left;
                height: 450px;
            }
            .row .cols-prop-area
            {
                width: 22%;
                min-height: 140px;
            }
            .row .cols-sample-area
            {
                width: 75.7%;
            }
        </style>
    </asp:Content>
    
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebSampleBrowser
    {
        public partial class _3DChart : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
        }
    }