JS Heatmap Algorithm
Demonstrates using a smartPalette with a heatmap chart.
<%@ 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 using a smartPalette with a heatmap chart.
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.Type = ChartType.Surface;
Chart.DefaultSeries.Type = SeriesType.Marker;
//Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
Chart.LegendBox.Visible = false;
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.Palette = new Color[] { };
Chart.JS.Settings.Add("series", "js:" + generateJsSeries(30,20));
Chart.JS.Settings.Add("palette", "js:{}");
//Set new values that define a smartPalette
Chart.JS.Settings.Add("palette.pointValue", "'{%zvalue/100}'");
Chart.JS.Settings.Add("palette.colors", "['green','yellow', 'red']");
Chart.JS.Settings.Add("palette.colorBar.axis.defaultTick.label.text", "'{%value*100}'");
// Set the chart size.
Chart.Width = 740;
Chart.Height = 400;
Chart.TitleBox.Label.Text = "Heatmap Data sin(distance from center)";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
Chart.TitleBox.ClearColors();
Chart.DefaultElement.ToolTip = "(%xValue, %yValue)<br>Distance: {%dist:n2}";
Chart.XAxis.DefaultTick.GridLine.Width = 0;
Chart.YAxis.DefaultTick.GridLine.Width = 0;
}
double pointDistance (float[] point1,float[] point2) {
float xs = point2[0] - point1[0];
xs = xs * xs;
float ys = point2[1] - point1[1];
ys = ys * ys;
return Math.Sqrt(xs + ys);
}
String generateJsSeries(int xCount, int yCount)
{
ArrayList points = new ArrayList();
float[] cxy = { (xCount / 2), (yCount / 2) };
for (int x = 0; x < xCount; x++)
{
for (int y = 0; y < yCount; y++)
{
float[] p1 = { x, y };
double dist = pointDistance(p1, cxy);
string point = "{x:" + x + ",y:" + y + ",z:" + Math.Sin(dist) + ",attributes:{dist:" + dist + "}}";
points.Add(point);
}
}
return "[{points:[" + string.Join(",", (string[])points.ToArray(typeof(string))) + "]}]";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery 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 using a smartPalette with a heatmap chart.
' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.Type = ChartType.Surface
Chart.DefaultSeries.Type = SeriesType.Marker
'Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
Chart.LegendBox.Visible = False
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.Palette = New Color() { }
Chart.JS.Settings.Add("series", "js:" & generateJsSeries(30,20))
Chart.JS.Settings.Add("palette", "js:{}")
'Set new values that define a smartPalette
Chart.JS.Settings.Add("palette.pointValue", "'{%zvalue/100}'")
Chart.JS.Settings.Add("palette.colors", "['green','yellow', 'red']")
Chart.JS.Settings.Add("palette.colorBar.axis.defaultTick.label.text", "'{%value*100}'")
' Set the chart size.
Chart.Width = 740
Chart.Height = 400
Chart.TitleBox.Label.Text = "Heatmap Data sin(distance from center)"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.DefaultElement.ToolTip = "(%xValue, %yValue)<br>Distance: {%dist:n2}"
Chart.XAxis.DefaultTick.GridLine.Width = 0
Chart.YAxis.DefaultTick.GridLine.Width = 0
End Sub
Function pointDistance(ByVal point1 As Single(), ByVal point2 As Single()) As Double
Dim xs As Single = point2(0) - point1(0)
xs = xs * xs
Dim ys As Single = point2(1) - point1(1)
ys = ys * ys
Return Math.Sqrt(xs + ys)
End Function
Function generateJsSeries(ByVal xCount As Integer, ByVal yCount As Integer) As String
Dim points As ArrayList = New ArrayList()
Dim cxy As Single() = { (xCount / 2), (yCount / 2) }
For x As Integer = 0 To xCount - 1
For y As Integer = 0 To yCount - 1
Dim p1 As Single() = { x, y }
Dim dist As Double = pointDistance(p1, cxy)
Dim point As String = "{x:" & x & ",y:" & y & ",z:" & Math.Sin(dist) & ",attributes:{dist:" & dist & "}}"
points.Add(point)
Next y
Next x
Return "[{points:[" & String.Join(",", CType(points.ToArray(GetType(String)), String())) & "]}]"
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous