Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples


    <%@ Page Title="HeatMap-Cell Mapping-ASP.NET-SYNCFUSION"   Language="C#" MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="CellMapBinding.aspx.cs" Inherits="WebSampleBrowser.HeatMap.CellMapBinding" %>
    
    <asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">
    </asp:Content>
    <asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">
        <div style="border-width: 2px; opacity: 0.7; width: 290px; text-align: center;">
            <label style="color: Black; font-size: 22px; height: 25px; font-weight: Normal;">Product Sales by Year</label><br />
            <label style="color: Black; font-size: 22px; margin-top: -2px; height: 25px; font-weight: Normal;">(In Percentage)</label>
        </div>
        <br />
        <div class="control_section">
            <div style="width: 100%; margin: 0 auto; text-align: center;">
                <ej:HeatMap runat="server" ID="heatmap" IsResponsive="true" Width="100%">
                    <ColorMappingCollection>
                        <ej:HeatMapColorMapping Color="#8ec8f8" Value="0">
                            <label text="0"></label>
                        </ej:HeatMapColorMapping>
                        <ej:HeatMapColorMapping Color="#0d47a1" Value="100">
                            <label text="100"></label>
                        </ej:HeatMapColorMapping>
                    </ColorMappingCollection>
                </ej:HeatMap>
                <div style="height: 15px; width: 100%;"></div>
                <ej:HeatMapLegend runat="server" ID="heatmapLegend" Height="50px" Width="75%" ClientIDMode="static" legendmode="Gradient" orientation="Horizontal" IsResponsive="true">
                    <ColorMappingCollection>
                        <ej:HeatMapColorMapping Color="#8ec8f8" Value="0">
                            <label text="0"></label>
                        </ej:HeatMapColorMapping>
                        <ej:HeatMapColorMapping Color="#0d47a1" Value="100">
                            <label text="100"></label>
                        </ej:HeatMapColorMapping>
                    </ColorMappingCollection>
                </ej:HeatMapLegend>
            </div>
        </div>
    </asp:Content>
    <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="StyleSection">
        <style type="text/css">
            #heatmapLegend {
                margin-left: 120px;
            }
    
            /*.row [class*="cols-"]:first-child > div:first-child {
                margin: 0px;
            }*/
        </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;
    using Syncfusion.JavaScript.DataVisualization.Models.Collections;
    using Syncfusion.JavaScript.DataVisualization.HeatMapEnums;
    using Syncfusion.JavaScript.Shared.Serializer;
    using System.ComponentModel;
    
    namespace WebSampleBrowser.HeatMap
    {
        public partial class CellMapBinding : System.Web.UI.Page
        {
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    CreateHeatmap();
    
                }
            }
            public void CreateHeatmap()
            {
                heatmap.LegendCollection.Add("heatmapLegend");
                CellMapping CellMapping = new CellMapping();
                CellMapping.Column = new PropertyMapping() { PropertyName = "ProductName", DisplayName = "Product Name" };
                CellMapping.Row = new PropertyMapping() { PropertyName = "Year", DisplayName = "Year" };
                CellMapping.Value = new PropertyMapping() { PropertyName = "Value" };
                Collection columnMapping = new Collection();
                columnMapping.Add(new HeaderMapping() { PropertyName = "Vegie-spread", DisplayName = "Vegie-spread" });
                columnMapping.Add(new HeaderMapping() { PropertyName = "Tofuaa", DisplayName = "Tofuaa" });
                columnMapping.Add(new HeaderMapping() { PropertyName = "Alice Mutton", DisplayName = "Alice Mutton" });
                columnMapping.Add(new HeaderMapping() { PropertyName = "Konbu", DisplayName = "Konbu" });
                columnMapping.Add(new HeaderMapping() { PropertyName = "Fløtemysost", DisplayName = "Fløtemysost" });
                columnMapping.Add(new HeaderMapping() { PropertyName = "Perth Pasties", DisplayName = "Perth Pasties" });
                CellMapping.ColumnMapping = columnMapping;
                HeaderMapping headerMapping = new HeaderMapping() { PropertyName = "Year", DisplayName = "Year", ColumnStyle = new ColumnStyle() { Width = 105, TextAlign = HeatMapTextAlign.Right } };
                CellMapping.HeaderMapping = headerMapping;
                heatmap.ItemsSource = GetCellSource();
                heatmap.ItemsMapping = CellMapping;
            }
            public Collection GetCellSource()
            {
                Collection collection = new Collection();
                string[] name = { "Vegie-spread", "Tofuaa", "Alice Mutton", "Konbu", "Fløtemysost", "Perth Pasties" };
                Random random = new Random();
    
                foreach (string item in name)
                {
                    for (int i = 0; i < 6; i++)
                    {
                        double value = random.Next(0, random.Next(0, 100));
                        collection.Add(new SampleCellData() { ProductName = item, Year = "Y" + (2011 + i), Value = value });
                    }
                }
                return collection;
            }
        }
        [Serializable]
        public class SampleCellData
        {
            private string productName;
    
            [JsonProperty("ProductName")]
            [DefaultValue("")]
            public string ProductName
            {
                get { return productName; }
                set { productName = value; }
            }
    
            private string year;
            [JsonProperty("Year")]
            [DefaultValue("")]
            public string Year
            {
                get { return year; }
                set { year = value; }
            }
    
            private Double valuex;
            [JsonProperty("Value")]
            [DefaultValue("")]
            public Double Value
            {
                get { return valuex; }
                set { valuex = value; }
            }
    
    
        }
    }