Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    <%@ Page Title="Chart-Tooltip Template-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates how to customize tooltip template of Syncfusion ASP.NET Web Forms Chart control" AutoEventWireup="true" MasterPageFile="~/Samplebrowser.Master" CodeBehind="TooltipTemplate.aspx.cs" Inherits="WebSampleBrowser.Chart.TooltipTemplate" %>
    <asp:Content ID="Content1" runat="server" contentplaceholderid="ControlsSection">
     <script type="text/javascript" src="../Scripts/ChartData.js"></script>
    <div id="Tooltip" style="display: none;">
        <div id="icon">    
           <div id="grain"></div>
        </div>
            <div id="value">
                <div>
                <div id="efpercentage">#point.x#</div>
                <div id="ef">#point.y#</div>
                </div>
            </div>
        </div>
     <div>
            <ej:WaitingPopup runat="server" ID="waitingpopup" ShowOnInit="false"></ej:WaitingPopup>
            <ej:Chart ClientIDMode="Static" ID="Chart1" runat="server" OnClientLoad="onChartLoad" Width="970" Height="600" IsResponsive="true" 
                BackgroundImgUrl="../Content/images/chart/wheat.png">
                <PrimaryXAxis AxisLine-Color="#EFEFEF" AxisLine-Width="3" MajorGridLines-Visible="false" Font-Color="white"
                     Font-FontSize="15px" HidePartialLabels="true" MajorTickLines-Visible="true" />
                <PrimaryYAxis LabelFormat="{value}" Title-Text="Billion Bushels" Title-Font-Color="white" 
                    Font-FontSize="15px" Font-Color="#ffffff" MajorGridLines-Width="2" MajorGridLines-Color="#EFEFEF" 
                    MajorTickLines-Visible="true" AxisLine-Color="#EFEFEF" AxisLine-Width="3" />
                <CommonSeriesOptions Type="Line" EnableAnimation="true" Border-Width="3" Fill="#333333" 
                    Marker-Shape="Circle" Marker-Size-Width="6" Marker-Size-Height="6" Marker-Visible="true"
                    Marker-Fill="#C1272D" Marker-Border-Color="#333333" Marker-Border-Width="2" />
               <Series>
                  <ej:Series Name="India" XName="Xvalue" YName="YValue1" Tooltip-Visible="true" Tooltip-Template="Tooltip">
                  </ej:Series>
                 </Series>
                <Title Text="USA wheat production" Font-Color="#333333"></Title>
                <Legend Visible="false"></Legend>
            </ej:Chart>
        </div>
    </asp:Content>
    <asp:Content ID="Content3" 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: 50px;
                width: 50px;
                background-color:#C1272D
            }
            #Tooltip #value >div {
                margin: 3px 5px 5px 5px;
                
            }
            #Tooltip #efpercentage {
                font-size: 12px;
                font-family: segoe ui;
                color:#E7C554;
                font-weight: bold;
            }
             #Tooltip #ef {
                 font-size: 20px;
                 font-family: segoe ui;
                 font-weight: bold;
                 
            }
            #grain {
                background-image: url("../Content/images/chart/grain.png");
                height: 50px;
                width: 50px;
                background-repeat: no-repeat;
            }
    </style>
    </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 TooltipTemplate : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                //Setting Range for PrimaryXAxis
                this.Chart1.PrimaryXAxis.Range.Min = 2001;
                this.Chart1.PrimaryXAxis.Range.Max = 2013;
                this.Chart1.PrimaryXAxis.Range.Interval = 1;
               
                //Setting Range for PrimaryYAxis
                this.Chart1.PrimaryYAxis.Range.Min = 1.50;
                this.Chart1.PrimaryYAxis.Range.Max = 2.70;
                this.Chart1.PrimaryYAxis.Range.Interval = 0.20;
    
                List<TooltipData> data = new List<TooltipData>();
    
                data.Add(new TooltipData(2002, 1.61));
                data.Add(new TooltipData(2003, 2.34));
                data.Add(new TooltipData(2004, 2.16));
                data.Add(new TooltipData(2005, 2.10));
                data.Add(new TooltipData(2006, 1.81));
    
                data.Add(new TooltipData(2007, 2.05));
                data.Add(new TooltipData(2008, 2.50));
                data.Add(new TooltipData(2009, 2.22));
                data.Add(new TooltipData(2010, 2.21));
                data.Add(new TooltipData(2011, 2.00));
                data.Add(new TooltipData(2012, 2.27));
    
                //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 TooltipData
        {
            public TooltipData(double xval, double yvalue1)
            {
                this.Xvalue = xval;
                this.YValue1 = yvalue1;
    
            }
            public double Xvalue
            {
                get;
                set;
            }
            public double YValue1
            {
                get;
                set;
            }
    
        }