Gallery
PreviousJS Live Heatmap
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates a heatmap chart with smartPalette.
Chart.Title = "Heatmap Data";
// Specify the JS only chart type.
Chart.Type = ChartType.Heatmap;
// Set the chart size.
Chart.Width = 500;
Chart.Height = 400;
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "callbackFunc";
//Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
Chart.DefaultSeries.DefaultElement.ToolTip = "";
Chart.DefaultSeries.DefaultElement.Outline.Color = Color.Empty;
Chart.DefaultSeries.DefaultElement.Transparency = 0;
//Provides additional performance boost by omitting hover state computations.
Chart.JS.Settings.Add("defaultSeries.mouseTracking_enabled", "false");
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Right;
Chart.XAxis.Label.Text = "Longitude";
Chart.YAxis.Label.Text = "Latitude";
Chart.SeriesCollection.Add(generateData(50,50));
Chart.Palette = new Color[] {ColorTranslator.FromHtml("#ffffcc"), ColorTranslator.FromHtml("#ffeda0"), ColorTranslator.FromHtml("#fed976"), ColorTranslator.FromHtml("#feb24c"), ColorTranslator.FromHtml("#fd8d3c"), ColorTranslator.FromHtml("#fc4e2a"), ColorTranslator.FromHtml("#e31a1c"), ColorTranslator.FromHtml("#bd0026"), ColorTranslator.FromHtml("#b00026")};
Chart.SmartPalette = Chart.SeriesCollection[0].GetSmartPalette(ElementValue.ZValue, Chart.Palette);
//Toolbar button
Chart.JS.Settings.Add("toolbar.items.Stop.margin", "10");
Chart.JS.Settings.Add("toolbar.items.Stop.type", "option");
Chart.JS.Settings.Add("toolbar.items.Stop.events_change", "js:playPause");
Chart.JS.Settings.Add("toolbar.items.Stop.states.select.icon.name", "system/default/play");
Chart.JS.Settings.Add("toolbar.items.Stop.icon.name", "system/default/pause");
Chart.JS.Settings.Add("toolbar.items.Stop.label.text", "Pause");
Chart.JS.Settings.Add("toolbar.items.Stop.states.select.label.text", "Play");
Chart.JS.Settings.Add("toolbar.items.Stop.boxVisible", "true");
}
double pointDistance(Element e1,Element e2) {
double xs = e2.XValue - e1.XValue;
xs = xs * xs;
double ys = e2.YValue - e1.YValue;
ys = ys * ys;
return Math.Sqrt(xs+ys);
}
Series generateData(int xCount,int yCount)
{
Series ser = new Series();
Element tempE = new Element();
tempE.XValue = xCount / 2;
tempE.YValue = yCount / 2;
for (int x = 0; x < xCount; x++) {
for (int y = 0; y < yCount; y++)
{
Element element = new Element();
element.XValue = x;
element.YValue = y;
double dist =pointDistance(element, tempE);
element.ZValue = Math.Sin(x / 3) + Math.Cos((y + x) / 2.5) + Math.Sin(dist / 6);
element.CustomAttributes.Add("dist", Math.Round(dist,15).ToString());
ser.Elements.Add(element);
}
}
return ser;
}
double myRound(double d)
{
string str = d.ToString("R");
string first = str.Substring(0,str.Length - 2);
string last = str.Substring(str.Length - 2);
double l = Math.Round(double.Parse("0." + last),1);
string str2 = first + l.ToString().Substring(2);
return double.Parse(str2);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<script type="text/javascript">
var i = 0,
isPlaying = true;
var chart;
function callbackFunc(c) {
chart = c;
update();
}
function generateData(xCount, yCount) {
var pointDistance = function (point1, point2) {
var xs = point2[0] - point1[0];
xs = xs * xs;
var ys = point2[1] - point1[1];
ys = ys * ys;
return Math.sqrt(xs + ys);
};
var points = [];
var cxy = [xCount / 2, yCount / 2];
for (var x = 0; x < xCount; x++) {
for (var y = 0; y < yCount; y++) {
var dist = pointDistance([x, y], cxy);
var d = i / 10;
points.push({
id: x + '-' + y,
x: x,
y: y,
z: Math.sin(x / (3 / Math.sin(d))) + Math.cos((y + x) / (2.5 + d)) + Math.sin(dist / 6),
attributes: { dist: dist },
});
}
}
i++;
return points;
}
function update() {
// Using a function with the then property of updateOptions to update the chart as soon as the
// animation completes.
chart.series(0).options(
{ points: generateData(25, 25) },
{
then: function () {
if (isPlaying) {
setTimeout(function () {
update(c);
}, 1);
}
},
}
);
}
function playPause() {
isPlaying = !isPlaying;
if (isPlaying) {
update();
}
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/right.js"></script>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/right-double.js"></script>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/downright.js"></script>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates a heatmap chart with smartPalette.
Chart.Title = "Heatmap Data"
' Specify the JS only chart type.
Chart.Type = ChartType.Heatmap
' Set the chart size.
Chart.Width = 500
Chart.Height = 400
' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.RenderCallback = "callbackFunc"
'Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
Chart.DefaultSeries.DefaultElement.ToolTip = ""
Chart.DefaultSeries.DefaultElement.Outline.Color = Color.Empty
Chart.DefaultSeries.DefaultElement.Transparency = 0
'Provides additional performance boost by omitting hover state computations.
Chart.JS.Settings.Add("defaultSeries.mouseTracking_enabled", "false")
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Right
Chart.XAxis.Label.Text = "Longitude"
Chart.YAxis.Label.Text = "Latitude"
Chart.SeriesCollection.Add(generateData(50,50))
Chart.Palette = New Color() {ColorTranslator.FromHtml("#ffffcc"), ColorTranslator.FromHtml("#ffeda0"), ColorTranslator.FromHtml("#fed976"), ColorTranslator.FromHtml("#feb24c"), ColorTranslator.FromHtml("#fd8d3c"), ColorTranslator.FromHtml("#fc4e2a"), ColorTranslator.FromHtml("#e31a1c"), ColorTranslator.FromHtml("#bd0026"), ColorTranslator.FromHtml("#b00026")}
Chart.SmartPalette = Chart.SeriesCollection(0).GetSmartPalette(ElementValue.ZValue, Chart.Palette)
'Toolbar button
Chart.JS.Settings.Add("toolbar.items.Stop.margin", "10")
Chart.JS.Settings.Add("toolbar.items.Stop.type", "option")
Chart.JS.Settings.Add("toolbar.items.Stop.events_change", "js:playPause")
Chart.JS.Settings.Add("toolbar.items.Stop.states.select.icon.name", "system/default/play")
Chart.JS.Settings.Add("toolbar.items.Stop.icon.name", "system/default/pause")
Chart.JS.Settings.Add("toolbar.items.Stop.label.text", "Pause")
Chart.JS.Settings.Add("toolbar.items.Stop.states.select.label.text", "Play")
Chart.JS.Settings.Add("toolbar.items.Stop.boxVisible", "true")
End Sub
Function pointDistance(ByVal e1 As Element, ByVal e2 As Element) As Double
Dim xs As Double = e2.XValue - e1.XValue
xs = xs * xs
Dim ys As Double = e2.YValue - e1.YValue
ys = ys * ys
Return Math.Sqrt(xs+ys)
End Function
Function generateData(ByVal xCount As Integer, ByVal yCount As Integer) As Series
Dim ser As Series = New Series()
Dim tempE As Element = New Element()
tempE.XValue = xCount / 2
tempE.YValue = yCount / 2
For x As Integer = 0 To xCount - 1
For y As Integer = 0 To yCount - 1
Dim element As Element = New Element()
element.XValue = x
element.YValue = y
Dim dist As Double =pointDistance(element, tempE)
element.ZValue = Math.Sin(x / 3) + Math.Cos((y + x) / 2.5) + Math.Sin(dist / 6)
element.CustomAttributes.Add("dist", Math.Round(dist,15).ToString())
ser.Elements.Add(element)
Next y
Next x
Return ser
End Function
Function myRound(ByVal d As Double) As Double
Dim str As String = d.ToString("R")
Dim first As String = str.Substring(0,str.Length - 2)
Dim last As String = str.Substring(str.Length - 2)
Dim l As Double = Math.Round(Double.Parse("0." & last),1)
Dim str2 As String = first & l.ToString().Substring(2)
Return Double.Parse(str2)
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<script type="text/javascript">
var i = 0,
isPlaying = true;
var chart;
function callbackFunc(c) {
chart = c;
update();
}
function generateData(xCount, yCount) {
var pointDistance = function (point1, point2) {
var xs = point2[0] - point1[0];
xs = xs * xs;
var ys = point2[1] - point1[1];
ys = ys * ys;
return Math.sqrt(xs + ys);
};
var points = [];
var cxy = [xCount / 2, yCount / 2];
for (var x = 0; x < xCount; x++) {
for (var y = 0; y < yCount; y++) {
var dist = pointDistance([x, y], cxy);
var d = i / 10;
points.push({
id: x + '-' + y,
x: x,
y: y,
z: Math.sin(x / (3 / Math.sin(d))) + Math.cos((y + x) / (2.5 + d)) + Math.sin(dist / 6),
attributes: { dist: dist },
});
}
}
i++;
return points;
}
function update() {
// Using a function with the then property of updateOptions to update the chart as soon as the
// animation completes.
chart.series(0).options(
{ points: generateData(25, 25) },
{
then: function () {
if (isPlaying) {
setTimeout(function () {
update(c);
}, 1);
}
},
}
);
}
function playPause() {
isPlaying = !isPlaying;
if (isPlaying) {
update();
}
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/right.js"></script>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/right-double.js"></script>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/downright.js"></script>
</html>
- Sample FilenameJsLiveHeatmap.aspx
- Version10.3
- Uses DatabaseNo