Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Show Tooltip
    Show Header Labels
    Frame Type
    Row Count
    Column Count
    <%@ Page Title="PivotGauge-Layout Options-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This demo for Syncfusion Essential JS1 for ASP.NET pivot gauge control describes options such as frame type and header labels to customize control layout."  MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="Layout.aspx.cs" Inherits="WebSampleBrowser.Gauge_Layout" %>
    
    <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ControlsSection">
        <script src='<%= Page.ResolveClientUrl("~/Scripts/excanvas.min.js")%>' type="text/javascript"></script>
        <ej:PivotGauge ID="PivotGauge1" runat="server" IsResponsive="true" EnableTooltip="true" BackgroundColor="transparent"  RowsCount="2" ColumnsCount="3" ClientIDMode="Static">
             <DataSource Catalog="Adventure Works DW 2008 SE" Cube="Adventure Works" Data="//bi.syncfusion.com/olap/msmdpump.dll" >
                    <Rows>
                        <ej:Field  FieldName="[Date].[Fiscal]">
                        </ej:Field>
                    </Rows>
                    <Columns>
                        <ej:Field FieldName="[Customer].[Customer Geography]"></ej:Field>
                    </Columns>
                    <Values>
                        <ej:Field Axis="Column">
                            <Measures>
                                <ej:MeasuresItems FieldName="[Measures].[Internet Sales Amount]" />
                                <ej:MeasuresItems FieldName ="[Measures].[Internet Revenue Status]" />
                                <ej:MeasuresItems FieldName ="[Measures].[Internet Revenue Trend]" />
                                <ej:MeasuresItems FieldName ="[Measures].[Internet Revenue Goal]" />
                            </Measures>
                        </ej:Field>
                    </Values>
            </DataSource>
            <ClientSideEvents DrawLabels="onLabelDraw" RenderSuccess="loadPivotGaugeTheme" BeforeServiceInvoke="onBeforeServiceCall" AfterServiceInvoke="onAfterServiceCall"   />
            <Scales>
                <ej:CircularScales ShowRanges="true" Radius="150" ShowScaleBar="true" Size="1" ShowIndicators="true" ShowLabels="true">
                    <Border Width="0.5" />
                    <PointerCollection>
                        <ej:Pointers ShowBackNeedle="true" BackNeedleLength="20" Length="125" Width="7" ></ej:Pointers>
                        <ej:Pointers Type="Marker" MarkerType="Diamond" DistanceFromScale="5" Placement="Center" BackgroundColor="#29A4D9" Length="25" Width="15"></ej:Pointers>
                    </PointerCollection>
                    <TickCollection>
                        <ej:CircularTicks Type="Major" DistanceFromScale="2" Height="16" Width="1" Color="#8c8c8c" />
                        <ej:CircularTicks Type="Minor" Height="6" Width="1" DistanceFromScale="2" Color="#8c8c8c" />
                    </TickCollection>
                    <LabelCollection>
                        <ej:CircularLabels Color="#8c8c8c"></ej:CircularLabels>
                    </LabelCollection>
                    <RangeCollection>
                        <ej:CircularRanges DistanceFromScale="-5" BackgroundColor="#fc0606" >
                            <Border Color="#fc0606" />
                        </ej:CircularRanges>
                        <ej:CircularRanges DistanceFromScale="-5"></ej:CircularRanges>
                    </RangeCollection>
                    <CustomLabelCollection>
                        <ej:CircularCustomLabel Color="#666666">
                            <Position X="180" Y="290" />
                            <Font Size="10px" FontFamily="Segoe UI" FontStyle="Normal"></Font>
                        </ej:CircularCustomLabel>
                        <ej:CircularCustomLabel Color="#666666">
                            <Position X="180" Y="320" />
                            <Font Size="10px" FontFamily="Segoe UI" FontStyle="Normal"></Font>
                        </ej:CircularCustomLabel>
                        <ej:CircularCustomLabel Color="#666666">
                            <Position X="180" Y="150" />
                            <Font Size="12px" FontFamily="Segoe UI" FontStyle="Normal"></Font>
                        </ej:CircularCustomLabel>
                    </CustomLabelCollection>   
                </ej:CircularScales>
            </Scales>
            <LabelFormatSettings DecimalPlaces="2" />
        </ej:PivotGauge>
    </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">
                        Show Tooltip
                    </div>
                    <div class="col-md-3 aligntop">
                        <input type="checkbox" class="nodetext" id="check1" />
                    </div>
                    <div class="col-md-3">
                        Show Header Labels
                    </div>
                    <div class="col-md-3 aligntop">
                        <input type="checkbox" class="nodetext" id="check2" />
                    </div>
                </div>
                <div class="row">
                        <div class="col-md-3">
                            Frame Type
                        </div>
                        <div class="col-md-3" style="margin-top: 8px;">
                            <input type="text" id="frameType" />
                        </div>
                        </div>
                <div class="row">
                    <div class="col-md-3">
                        Row Count
                    </div>
                    <div class="col-md-3" style="margin-top: 4px;">
                        <input type="text" style="line-height:20px!important" id="rowscount" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Column Count
                    </div>
                    <div class="col-md-3 aligntop">
                        <input type="text" style="line-height:20px!important" id="columnscount" />
                    </div>
                </div>
            </div>
        </div>
    </asp:Content>
    
    <asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">
        <script type="text/javascript">
            $(function () {
                $("#sampleProperties").ejPropertiesPanel();
            });
            var rows = [{ option: "1", value: "1" }, { option: "2", value: "2" }, { option: "3", value: "3" }];
            var frames = [{ option: "Full - Circular", value: "Full - Circular" }, { option: "Semi - Circular", value: "Semi - Circular" }];
            $(function () {
                $("#check1").ejCheckBox({ change: "onchange", checked: true });
                $("#check2").ejCheckBox({ change: "onchange", checked: true });
                $('#frameType').ejDropDownList({
                    dataSource: frames,
                    fields: { text: "option", value: "value" },
                    select: "onchange", width: "110px", selectedItemIndex: 0
                });
    
                $('#rowscount').ejDropDownList({
                    dataSource: rows,
                    fields: { text: "option", value: "value" },
                    width: "110px", selectedIndices: [1], height: "22px"
                });
                $('#columnscount').ejDropDownList({
                    dataSource: rows,
                    fields: { text: "option", value: "value" },
                    width: "110px", selectedIndices: [2], height: "22px"
                });
                var ddlTarget = $('#columnscount').data("ejDropDownList");
                $("#columnscount").ejDropDownList("option", "change", "onchange1");
                var ddlTarget1 = $('#rowscount').data("ejDropDownList");
                $("#rowscount").ejDropDownList("option", "change", "onchange1");
            });
            function onchange1(args) {
                pivotGauge = $("#PivotGauge1").data("ejPivotGauge");
                rowsCount = $("#rowscount").data("ejDropDownList");
                columnsCount = $("#columnscount").data("ejDropDownList");
                if (this._id == "rowscount" && (args.text != "0" || (columnsCount != undefined && columnsCount.model.text != 0))) {
                    pivotGauge.model.rowsCount = args.text;
                    pivotGauge._renderControlSuccess({ "PivotRecords": JSON.stringify(pivotGauge.getJSONRecords()), "OlapReport": pivotGauge.getOlapReport() });
                }
                else if (this._id == "columnscount" && (args.text != "0" || rowsCount.model.text != 0)) {
                    pivotGauge.model.columnsCount = args.text;
                    pivotGauge._renderControlSuccess({ "PivotRecords": JSON.stringify(pivotGauge.getJSONRecords()), "OlapReport": pivotGauge.getOlapReport() });
                }
                else if (args.text == "0" && (columnsCount != undefined && columnsCount.model.text == 0) && (rowsCount != undefined && rowsCount.model.text == 0)) {
                    pivotGauge.model.columnsCount = 0;
                    pivotGauge.model.rowsCount = 0;
                    if (pivotGauge.getJSONRecords())
                        pivotGauge._renderControlSuccess({ "PivotRecords": JSON.stringify(pivotGauge.getJSONRecords()), "OlapReport": pivotGauge.getOlapReport() });
                }
            }
    
            function onchange(args) {
                pivotGauge = $("#PivotGauge1").data("ejPivotGauge");
                if (this._id == "frameType") {
                    if (args.type == "select" && args.text == "Semi - Circular") {
                        pivotGauge.model.frame.frameType = "halfcircle";
                        pivotGauge.model.frame.halfCircleFrameStartAngle = 180;
                        pivotGauge.model.scales[0].startAngle = 180;
                        pivotGauge.model.scales[0].sweepAngle = 180;
                        pivotGauge.model.scales[0].customLabels[2].position.y = 210
                        pivotGauge._renderControlSuccess({ "PivotRecords": JSON.stringify(pivotGauge.getJSONRecords()), "OlapReport": pivotGauge.getOlapReport() });
                    }
                    else {
                        pivotGauge.model.frame.frameType = "fullcircle";
                        pivotGauge.model.scales[0].startAngle = 122;
                        pivotGauge.model.scales[0].sweepAngle = 296;
                        pivotGauge.model.scales[0].customLabels[2].position.y = 150
                        pivotGauge._renderControlSuccess({ "PivotRecords": JSON.stringify(pivotGauge.getJSONRecords()), "OlapReport": pivotGauge.getOlapReport() });
                    }
                }
                if (this._id == "check1" && !args.model.checked) {
                    pivotGauge.model.enableTooltip = false;
                    pivotGauge.refresh();
                }
                else if (this._id == "check1" && args.model.checked) {
                    pivotGauge.model.enableTooltip = true;
                    pivotGauge._renderControlSuccess({ "PivotRecords": JSON.stringify(pivotGauge.getJSONRecords()), "OlapReport": pivotGauge.getOlapReport() });
                }
                else if (this._id == "check2" && !args.model.checked) {
                    pivotGauge.model.showHeaderLabel = false;
                    pivotGauge._renderControlSuccess({ "PivotRecords": JSON.stringify(pivotGauge.getJSONRecords()), "OlapReport": pivotGauge.getOlapReport() });
                }
                else if (this._id == "check2" && args.model.checked) {
                    pivotGauge.model.showHeaderLabel = true;
                    pivotGauge._renderControlSuccess({ "PivotRecords": JSON.stringify(pivotGauge.getJSONRecords()), "OlapReport": pivotGauge.getOlapReport() });
                }
            }
        </script>
    </asp:Content>
    
    <asp:Content ID="Content3" runat="server" ContentPlaceHolderID="StyleSection">
        <style type="text/css">
            #PivotGauge1 {
                width: 100%;
                height: 360px;
                float: left;
                overflow:auto;
            } 
            
             .row .cols-prop-area {
                min-height: 216px;
                width:25%;
            }   
            
            .row .cols-sample-area {
        width: 72%;
    }        
        </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 Gauge_Layout : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
        }
    }