JS Heatmap
Demonstrates several features of heatmap type microchart options.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates several features of heatmap type microchart options.
Chart.JS.Enabled = true;
Chart.Size = "450x700";
Chart.TempDirectory = "temp";
Chart.Background.Color = Color.FromArgb(249,249,255);
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
string s = "<span style='font-size:14px; font-weight: bold;'>Heatmap Types and Options</span><hr><ul>";
// Plain heatmap
s += "<li><span style='width:200px'>Plain heatmap</span><chart type='heatmap' width=55 height=55 margin=10 cells=3x3 verticalAlign=middle data='10,14,15,-6,-12,-14,19,11,-5'></li>";
// Heatmap opitons
s += "<li><span style='width:200px'>Heatmap, empty values</span><chart type='heatmap' width=55 height=55 margin=10 cells=3x3 verticalAlign=middle data='10,,,-6,-12,,,,-5'></li>";
s += "<li><span style='width:200px'>Heatmap, +/- values</span><chart:heatmap cellSize=12x15 margin=10 cells=12x1 verticalAlign=middle values='-4,-3,-2,-1,1,2,3,4,5,6,7,8'></li>";
s += "<li><span style='width:200px'>Heatmap, + values</span><chart:heatmap cellSize=12x15 margin=10 cells=12x1 verticalAlign=middle values='11,12,13,14,15,16,17,18'></li>";
s += "<li><span style='width:200px'>Heatmap, - values</span><chart:heatmap cellSize=12x15 margin=10 cells=12x1 verticalAlign=middle values='-18,-17,-16,-15,-14,-13,-12,-11'></li>";
s += "<li><span style='width:200px'>Heatmap, custom colors</span><chart:heatmap cellSize=12x15 margin=10 cells=12x1 verticalAlign=middle values='-4,-3,-2,-1,1,2,3,4,5,6,7,8' colors=blue,white,orange></li>";
s += "<li><span style='width:200px'>Heatmap, custom cellSize</span><chart:heatmap cellSize=15 margin=10 cells=4x2 verticalAlign=middle values='10,14,15,-6,-12,-14,19,11'></li>";
s += "<li><span style='width:200px'>Heatmap, auto cellSize</span><chart:heatmap width=100 height=40 margin=10 cells=4x2 verticalAlign=middle values='10,14,15,-6,-12,-14,19,11'></li>";
s += "<li><span style='width:200px'>Heatmap, custom padding 10%</span><chart:heatmap cellSize=15x15 margin=5 cells=4x2 padding=.1 verticalAlign=middle values='10,14,15,-6,-12,-14,19,11'></li>";
s += "<li><span style='width:200px'>Heatmap, custom padding 5px</span><chart:heatmap cellSize=15x15 margin=5 cells=4x2 padding=5 verticalAlign=middle values='10,14,15,-6,-12,-14,19,11'></li>";
s += "<li><span style='width:200px'>Heatmap, blank items</span><chart:heatmap fill=lightgray width=55 height=55 margin=10 cells=3x3 verticalAlign=middle values='10,14,15,-6,-12,-14,19'></li>";
s += "</ul></span>";
Chart.ObjectChart = new dotnetCHARTING.Label(s);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates several features of heatmap type microchart options.
Chart.JS.Enabled = True
Chart.Size = "450x700"
Chart.TempDirectory = "temp"
Chart.Background.Color = Color.FromArgb(249,249,255)
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Dim s As String = "<span style='font-size:14px; font-weight: bold;'>Heatmap Types and Options</span><hr><ul>"
' Plain heatmap
s &= "<li><span style='width:200px'>Plain heatmap</span><chart type='heatmap' width=55 height=55 margin=10 cells=3x3 verticalAlign=middle data='10,14,15,-6,-12,-14,19,11,-5'></li>"
' Heatmap opitons
s &= "<li><span style='width:200px'>Heatmap, empty values</span><chart type='heatmap' width=55 height=55 margin=10 cells=3x3 verticalAlign=middle data='10,,,-6,-12,,,,-5'></li>"
s &= "<li><span style='width:200px'>Heatmap, +/- values</span><chart:heatmap cellSize=12x15 margin=10 cells=12x1 verticalAlign=middle values='-4,-3,-2,-1,1,2,3,4,5,6,7,8'></li>"
s &= "<li><span style='width:200px'>Heatmap, + values</span><chart:heatmap cellSize=12x15 margin=10 cells=12x1 verticalAlign=middle values='11,12,13,14,15,16,17,18'></li>"
s &= "<li><span style='width:200px'>Heatmap, - values</span><chart:heatmap cellSize=12x15 margin=10 cells=12x1 verticalAlign=middle values='-18,-17,-16,-15,-14,-13,-12,-11'></li>"
s &= "<li><span style='width:200px'>Heatmap, custom colors</span><chart:heatmap cellSize=12x15 margin=10 cells=12x1 verticalAlign=middle values='-4,-3,-2,-1,1,2,3,4,5,6,7,8' colors=blue,white,orange></li>"
s &= "<li><span style='width:200px'>Heatmap, custom cellSize</span><chart:heatmap cellSize=15 margin=10 cells=4x2 verticalAlign=middle values='10,14,15,-6,-12,-14,19,11'></li>"
s &= "<li><span style='width:200px'>Heatmap, auto cellSize</span><chart:heatmap width=100 height=40 margin=10 cells=4x2 verticalAlign=middle values='10,14,15,-6,-12,-14,19,11'></li>"
s &= "<li><span style='width:200px'>Heatmap, custom padding 10%</span><chart:heatmap cellSize=15x15 margin=5 cells=4x2 padding=.1 verticalAlign=middle values='10,14,15,-6,-12,-14,19,11'></li>"
s &= "<li><span style='width:200px'>Heatmap, custom padding 5px</span><chart:heatmap cellSize=15x15 margin=5 cells=4x2 padding=5 verticalAlign=middle values='10,14,15,-6,-12,-14,19,11'></li>"
s &= "<li><span style='width:200px'>Heatmap, blank items</span><chart:heatmap fill=lightgray width=55 height=55 margin=10 cells=3x3 verticalAlign=middle values='10,14,15,-6,-12,-14,19'></li>"
s &= "</ul></span>"
Chart.ObjectChart = New dotnetCHARTING.Label(s)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous