Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Chart/ User Interaction / Trackball
    Trackball Tooltip Mode
    <%@ Page Title="Chart-Trackball-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates how to render trackball in Syncfusion ASP.NET Web Forms Chart control" MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="Trackball.aspx.cs" Inherits="WebSampleBrowser.Chart.Trackball" %>
    
    <asp:Content ID="Content4" runat="server" ContentPlaceHolderID="SampleHeading">
        <span class="sampleName">Chart/ User Interaction / Trackball</span>
    </asp:Content>
    <asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">
       <script type="text/javascript" src="../Scripts/ChartData.js"></script>
        <div id="Tooltip" style="display: none;">
        <div id="icon">    
           <div id="sales"></div>
        </div>
            <div id="value">
                <div>
                <div id="efpercentage">#point.x#</div>
                <div id="ef">#point.y#</div>
                </div>
            </div>
        </div>
    <ej:WaitingPopup runat="server" ID="waitingpopup" ShowOnInit="false"></ej:WaitingPopup>
    <ej:Chart ID="Chart1" OnClientLoad="onChartLoad" IsResponsive="true" Height="600" runat="server" Width="690">
        <PrimaryXAxis Title-Text="Year" ValueType="Datetime" IntervalType="Years" AxisLine-Visible="false" MajorGridLines-Visible="false" />
        <PrimaryYAxis Title-Text="Revenue" LabelFormat="{value}k" MajorTickLines-Visible="false" AxisLine-Visible="false" />
        <CommonSeriesOptions Type="Line" EnableAnimation="True" Width="3" Marker-Shape="Circle" Marker-Size-Height="6"
             Marker-Size-Width="6" Marker-Visible="true" Marker-Border-Color="white" Marker-Border-Width="3" />
        <Series>
               <ej:Series Name="John" XName="Xvalue" Tooltip-Visible="true"  YName="YValue1" />
               <ej:Series Name="Andrew" XName="Xvalue" Tooltip-Visible="true"  YName="YValue2" />
               <ej:Series Name="Thomas" XName="Xvalue" Tooltip-Visible="true"  YName="YValue3" />
               <ej:Series Name="Hendry" XName="Xvalue" Tooltip-Visible="true"  YName="YValue4" />
               <ej:Series Name="William" XName="Xvalue" Tooltip-Visible="true" YName="YValue5" />
        </Series>
        <Crosshair Visible="true" Type="Trackball" >
            <TrackballTooltipSettings Mode="Grouping">
    
            </TrackballTooltipSettings>
            </Crosshair>
        <Title Text="Average sales per person" />
        <Legend Visible="true" Shape="Circle" Position="Top" ItemStyle-Width="10" ItemStyle-Height="10" />
    </ej:Chart>
    </asp:Content>
    <asp:Content ID="Content3" runat="server" ContentPlaceHolderID="PropertySection">
        <div id="sampleProperties">
                     <div class="prop-grid">
                         <div class="row" style="margin: 10px 0;">
                             <div class="col-md-3">
                                 Trackball Tooltip Mode
                             </div>
                             <div class="col-md-3 aligntop">
                                 <select id="trackballmode" onchange="modeChange(this)">
                                     <option value="grouping">Grouping</option>
                                     <option value="float">Float</option>
                                 </select>
                             </div>
                         </div>
                     </div>
                </div>
        
            <script type="text/javascript" >
               
                function modeChange(x) {
                    var chartObj = $("#LayoutSection_ControlsSection_Chart1").ejChart("instance");
                    chartObj.model.crosshair.trackballTooltipSettings.mode = x.value;
                    if (x.value == "float") {
                        chartObj.model.crosshair.trackballTooltipSettings.tooltipTemplate = "Tooltip";
                    } else {
                        chartObj.model.crosshair.trackballTooltipSettings.tooltipTemplate = null;
                    }
                    chartObj.redraw();
                }
    
            $("#sampleProperties").ejPropertiesPanel();
                </script>
        </asp:Content>
    <asp:Content ID="Content1" ContentPlaceHolderID="StyleSection" runat="server">
        <style>
              .tooltipDivChart1 {
                background-color:#C1272D !important;        
                color: white;
                width:100px;
            }
            #Tooltip >div:first-child {
                float: left;
            }
            #Tooltip #value {
                float: right;
                height: 38px;
                width: 60px;
            }
            #Tooltip #value >div {
                margin: 3px 5px 5px 5px;   
            }
            #Tooltip #efpercentage {
                font-size: 10px;
                font-family: segoe ui;
                color: white;
                font-weight: bold;
            }
             #Tooltip #ef {
                 font-size: 10px;
                 font-family: segoe ui;
                 font-weight: bold;
                 color: white;
                 
            }
             #sales {
                background-image: url("../Content/images/chart/buisnessman.png");
                height: 32px;
                width: 32px;
                background-repeat: no-repeat;
            }   
    </style>
    </asp:Content>
    
    
    using Syncfusion.JavaScript.DataVisualization;
    using Syncfusion.JavaScript.DataVisualization.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebSampleBrowser.Chart
    {
        public partial class Trackball : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                //Setting Range for PrimaryXAxis
                this.Chart1.PrimaryXAxis.Range.Min = new DateTime(2000, 1, 1);
                this.Chart1.PrimaryXAxis.Range.Max = new DateTime(2006, 2, 11);
                this.Chart1.PrimaryXAxis.Range.Interval = 1;
              
                //Setting Range for PrimaryYAxis
                this.Chart1.PrimaryYAxis.Range.Min = 20;
                this.Chart1.PrimaryYAxis.Range.Max = 120;
                this.Chart1.PrimaryYAxis.Range.Interval = 20;
    
                List<TrackBallData> data = new List<TrackBallData>();
    
                data.Add(new TrackBallData(new DateTime(2000, 02, 11), 30, 54, 76, 98, 116));
                data.Add(new TrackBallData(new DateTime(2000, 09, 14), 35, 45, 70, 90, 110));
                data.Add(new TrackBallData(new DateTime(2001, 02, 11), 40, 43, 63, 83, 100));
                data.Add(new TrackBallData(new DateTime(2001, 09, 16), 36, 50, 72, 90, 102));
                data.Add(new TrackBallData(new DateTime(2002, 02, 07), 28, 54, 77, 86, 97));
                data.Add(new TrackBallData(new DateTime(2002, 09, 07), 33, 56, 79, 84, 89));
                data.Add(new TrackBallData(new DateTime(2003, 02, 11), 39, 60, 72, 106, 88));
                data.Add(new TrackBallData(new DateTime(2003, 09, 14), 38, 63, 68, 99, 90));
                data.Add(new TrackBallData(new DateTime(2004, 02, 06), 34, 69, 78, 110, 88));
                data.Add(new TrackBallData(new DateTime(2004, 09, 06), 46, 70, 65, 102, 75));
                data.Add(new TrackBallData(new DateTime(2005, 02, 11), 54, 72, 81, 90, 63));
                data.Add(new TrackBallData(new DateTime(2005, 09, 11), 65, 75, 80, 85, 70));
                data.Add(new TrackBallData(new DateTime(2006, 02, 11), 39, 75, 94, 110, 55));
               
                //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 TrackBallData
        {
            public TrackBallData(DateTime xval, double yvalue1, double yvalue2, double yvalue3, double yvalue4, double yvalue5)
            {
                this.Xvalue = xval;
                this.YValue1 = yvalue1;
                this.YValue2 = yvalue2;
                this.YValue3 = yvalue3;
                this.YValue4 = yvalue4;
                this.YValue5 = yvalue5;
            }
            public DateTime Xvalue
            {
                get;
                set;
            }
            public double YValue1
            {
                get;
                set;
            }
            public double YValue2
            {
                get;
                set;
            }
            public double YValue3
            {
                get;
                set;
            }
            public double YValue4
            {
                get;
                set;
            }
            public double YValue5
            {
                get;
                set;
            }
    
        }