Gallery
JS Circular Heatmap
<%@ 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)
{
// This sample deomonstrates a circular heatmap chart using gauge with columns.
Chart.Type = ChartType.Gauges;
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars;
Chart.DonutHoleSize = 20;
Chart.XAxis.OrientationAngle = 0;
Chart.XAxis.SweepAngle = 360;
// Set he chart size.
Chart.Width = 760;
Chart.Height = 700;
// Set the title.
Chart.TitleBox.Label.Text = "20 years of daily precipitation in Canberra";
Chart.TitleBox.Label.Font = new Font("Tahoma", 16);
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.Debug = false;
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Right;
Chart.DefaultSeries.LegendEntry.Visible = false;
// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
Chart.DefaultElement.ToolTip = "{%value:date MMMM} {%xValue+1:date yyyy} <b>%zValue mm</b>";
Chart.DefaultElement.Outline.Width = 0;
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Settings.Add("xAxis.onTop", "true");
Chart.XAxis.SpacingPercentage = 0;
Chart.XAxis.Interval = 2;
Chart.XAxis.DefaultTick.Label.Color = Color.White;
Chart.XAxis.DefaultTick.Label.Font = new Font("Tahoma", 8);
Chart.YAxis.DefaultTick.Label.Text = "{%value:date MMM}";
Chart.YAxis.DefaultTick.Label.Font = new Font("Tahoma", 10);
Chart.YAxis.ScaleRange.ValueLow = 0;
Chart.YAxis.ScaleRange.ValueHigh = 12;
Chart.YAxis.Interval = 1;
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/canberra-rainfall-amount-data.csv";
de.DataFields = "yAxis=rainfall_amount,xDateTime=date";//cvs must have header
SeriesCollection sc = de.GetSeries();
SeriesCollection orgs = new SeriesCollection();
//calculae average
int count = sc.Count;
Series rainFall = new Series();
for (int i = 0; i < sc.Count; i++)
{
int month = 0;
double rainfallMonth = 0;
Element newEl = new Element();
for (int j = 0; j < sc[i].Elements.Count; j++)
{
if (month == 0)
{
month = sc[i].Elements[j].XDateTime.Month;
newEl.XValue = sc[i].Elements[j].XDateTime.Year;
newEl.YValueStart = sc[i].Elements[j].XDateTime.Month - 1;
newEl.YValue = sc[i].Elements[j].XDateTime.Month;
rainfallMonth += sc[i].Elements[j].YValue;
}
else if (month != sc[i].Elements[j].XDateTime.Month)
{
newEl.ZValue = rainfallMonth;
rainFall.Elements.Add(newEl);
newEl = new Element();
newEl.CustomAttributes.Add("currentdt", new DateTime(sc[i].Elements[j].XDateTime.Year, sc[i].Elements[j].XDateTime.Month, 1).ToString());
newEl.XValue = sc[i].Elements[j].XDateTime.Year;
newEl.YValueStart = sc[i].Elements[j].XDateTime.Month - 1;
newEl.YValue = sc[i].Elements[j].XDateTime.Month;
rainfallMonth = sc[i].Elements[j].YValue;
month = sc[i].Elements[j].XDateTime.Month;
}
else
{
rainfallMonth += sc[i].Elements[j].YValue;
}
}
newEl.ZValue = rainfallMonth;
rainFall.Elements.Add(newEl);
}
Chart.SeriesCollection.Add(rainFall);
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#9AEAFF"), ColorTranslator.FromHtml("#2765FF") };
Chart.SmartPalette = Chart.SeriesCollection[0].GetSmartPalette(ElementValue.ZValue, Chart.Palette);
}
</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)
' This sample deomonstrates a circular heatmap chart using gauge with columns.
Chart.Type = ChartType.Gauges
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars
Chart.DonutHoleSize = 20
Chart.XAxis.OrientationAngle = 0
Chart.XAxis.SweepAngle = 360
' Set he chart size.
Chart.Width = 760
Chart.Height = 700
' Set the title.
Chart.TitleBox.Label.Text = "20 years of daily precipitation in Canberra"
Chart.TitleBox.Label.Font = New Font("Tahoma", 16)
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.Debug = False
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Right
Chart.DefaultSeries.LegendEntry.Visible = False
' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
Chart.DefaultElement.ToolTip = "{%value:date MMMM} {%xValue+1:date yyyy} <b>%zValue mm</b>"
Chart.DefaultElement.Outline.Width = 0
' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Settings.Add("xAxis.onTop", "true")
Chart.XAxis.SpacingPercentage = 0
Chart.XAxis.Interval = 2
Chart.XAxis.DefaultTick.Label.Color = Color.White
Chart.XAxis.DefaultTick.Label.Font = New Font("Tahoma", 8)
Chart.YAxis.DefaultTick.Label.Text = "{%value:date MMM}"
Chart.YAxis.DefaultTick.Label.Font = New Font("Tahoma", 10)
Chart.YAxis.ScaleRange.ValueLow = 0
Chart.YAxis.ScaleRange.ValueHigh = 12
Chart.YAxis.Interval = 1
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/canberra-rainfall-amount-data.csv"
de.DataFields = "yAxis=rainfall_amount,xDateTime=date" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
Dim orgs As SeriesCollection = New SeriesCollection()
'calculae average
Dim count As Integer = sc.Count
Dim rainFall As Series = New Series()
For i As Integer = 0 To sc.Count - 1
Dim month As Integer = 0
Dim rainfallMonth As Double = 0
Dim newEl As Element = New Element()
For j As Integer = 0 To sc(i).Elements.Count - 1
If month = 0 Then
month = sc(i).Elements(j).XDateTime.Month
newEl.XValue = sc(i).Elements(j).XDateTime.Year
newEl.YValueStart = sc(i).Elements(j).XDateTime.Month - 1
newEl.YValue = sc(i).Elements(j).XDateTime.Month
rainfallMonth += sc(i).Elements(j).YValue
ElseIf month <> sc(i).Elements(j).XDateTime.Month Then
newEl.ZValue = rainfallMonth
rainFall.Elements.Add(newEl)
newEl = New Element()
newEl.CustomAttributes.Add("currentdt", New DateTime(sc(i).Elements(j).XDateTime.Year, sc(i).Elements(j).XDateTime.Month, 1).ToString())
newEl.XValue = sc(i).Elements(j).XDateTime.Year
newEl.YValueStart = sc(i).Elements(j).XDateTime.Month - 1
newEl.YValue = sc(i).Elements(j).XDateTime.Month
rainfallMonth = sc(i).Elements(j).YValue
month = sc(i).Elements(j).XDateTime.Month
Else
rainfallMonth += sc(i).Elements(j).YValue
End If
Next j
newEl.ZValue = rainfallMonth
rainFall.Elements.Add(newEl)
Next i
Chart.SeriesCollection.Add(rainFall)
Chart.Palette = New Color() { ColorTranslator.FromHtml("#9AEAFF"), ColorTranslator.FromHtml("#2765FF") }
Chart.SmartPalette = Chart.SeriesCollection(0).GetSmartPalette(ElementValue.ZValue, Chart.Palette)
End Sub
</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>
- Sample FilenameJsCircularHeatmap.aspx
- Version10.1
- Uses DatabaseNo