JS Tile Map Microcharts
A tile map chart with microcharts.
<%@ 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 a tile map chart with microcharts.
// Specify the JS only chart type.
Chart.Type = ChartType.Heatmap;
// Set the chart size.
Chart.Width = 670;
Chart.Height = 530;
Chart.TitleBox.Label.Text = "Historical US Unemployment Rate 1976-2020";
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.Palette = new Color[] { };
// Enable JSCharting
Chart.JS.Enabled = true;
string [] regionColors = { "#6ef2f0", "#00d2fa", "#00aeff", "#0084ff", "#4c4bdf"};
Chart.JS.Settings.Add("palette.pointValue", "'{%zValue:n1}%'");
Chart.SmartPalette.Add("*", new SmartColor(ColorTranslator.FromHtml("#6ef2f0"), ColorTranslator.FromHtml("#4c4bdf"), new ScaleRange(4, 14), ElementValue.ZValue));
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
Chart.JS.Settings.Add("defaultSeries_legendEntry_visible","false");
Chart.ChartArea.ClearColors();
//Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
Chart.YAxis.InvertScale = true;
Chart.YAxis.Clear();
Chart.XAxis.Clear();
Chart.DefaultSeries.DefaultElement.ShowValue = true;
Chart.DefaultSeries.DefaultElement.LabelTemplate = "<b>%code</b><br>%micro";
Chart.DefaultSeries.DefaultElement.ToolTip = "<b>%name</b><br>2020 Rate: <b>%zValue %</b>";
Chart.DefaultSeries.DefaultElement.SmartLabel.Color = Color.White;
DataEngine states = new DataEngine();
states.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
states.Data = "./../../data/resources/tile-map-data.csv";
states.DataFields = "name=state,xValue=col,yValue=row,code,region";//cvs must have header
SeriesCollection statesSeries = states.GetSeries();
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/laborForceUs.csv";
de.DataFields = "yAxis=unemployed,xAxis=year,splitby=state,labor_force";//cvs must have header
SeriesCollection sc = de.GetSeries();
//Set unemployment rates to original series
int count = sc.Count;
count = count - 1;//exlcude Total
for (int i = 0; i < count; i++)
{
if (string.IsNullOrEmpty(sc[i].Name))
continue;
ElementCollection ec = sc[i].GetActiveElements();
Series ser = new Series();
ser.Name = sc[i].Name;
StringBuilder rates = new StringBuilder();
foreach (Element el in ec)
{
Element newEl = new Element();
double rate = (el.YValue * 100) / double.Parse(el.CustomAttributes["labor_force"].ToString());
newEl.YValue = rate;
rates.Append(rate.ToString("N0") + ",");
newEl.XDateTime = new DateTime((int)el.XValue, 1, 1);
ser.Elements.Add(newEl);
if (el.XValue == 2020)
{
statesSeries[0].Elements[i].ZValue = rate;
statesSeries[0].Elements[i].CustomAttributes.Add("micro", "<chart type=arealine colors=\"white\" width=61 height=39 margin_left=-1 data=\""+rates.ToString(0,rates.Length-1) + "\">");
}
}
}
Chart.SeriesCollection.Add(statesSeries);
}
</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" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample deomonstrates a computed line series with muted source lines for context.
Chart.Type = ChartType.Heatmap
Chart.Width = 670
Chart.Height = 530
Chart.TitleBox.Label.Text = "Historical US Unemployment Rate 1976-2020"
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.Palette = New Color() {}
Chart.JS.Enabled = True
Dim regionColors As String() = {"#6ef2f0", "#00d2fa", "#00aeff", "#0084ff", "#4c4bdf"}
Chart.JS.Settings.Add("palette.pointValue", "'{%zValue:n1}%'")
Chart.SmartPalette.Add("*", New SmartColor(ColorTranslator.FromHtml("#6ef2f0"), ColorTranslator.FromHtml("#4c4bdf"), New ScaleRange(4, 14), ElementValue.ZValue))
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom
Chart.JS.Settings.Add("defaultSeries_legendEntry_visible", "false")
Chart.ChartArea.ClearColors()
Chart.TempDirectory = "temp"
Chart.YAxis.InvertScale = True
Chart.YAxis.Clear()
Chart.XAxis.Clear()
Chart.DefaultSeries.DefaultElement.ShowValue = True
Chart.DefaultSeries.DefaultElement.LabelTemplate = "<b>%code</b><br>%micro"
Chart.DefaultSeries.DefaultElement.ToolTip = "<b>%name</b><br>2020 Rate: <b>%zValue %</b>"
Chart.DefaultSeries.DefaultElement.SmartLabel.Color = Color.White
Dim states As DataEngine = New DataEngine()
states.ChartObject = Chart
states.Data = "./../../data/resources/tile-map-data.csv"
states.DataFields = "name=state,xValue=col,yValue=row,code,region"
Dim statesSeries As SeriesCollection = states.GetSeries()
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart
de.Data = "./../../data/resources/laborForceUs.csv"
de.DataFields = "yAxis=unemployed,xAxis=year,splitby=state,labor_force"
Dim sc As SeriesCollection = de.GetSeries()
Dim count As Integer = sc.Count
count = count - 1
For i As Integer = 0 To count - 1
If String.IsNullOrEmpty(sc(i).Name) Then Continue For
Dim ec As ElementCollection = sc(i).GetActiveElements()
Dim ser As Series = New Series()
ser.Name = sc(i).Name
Dim rates As StringBuilder = New StringBuilder()
For Each el As Element In ec
Dim newEl As Element = New Element()
Dim rate As Double = (el.YValue * 100) / Double.Parse(el.CustomAttributes("labor_force").ToString())
newEl.YValue = rate
rates.Append(rate.ToString("N0") & ",")
newEl.XDateTime = New DateTime(CInt(el.XValue), 1, 1)
ser.Elements.Add(newEl)
If el.XValue = 2020 Then
statesSeries(0).Elements(i).ZValue = rate
statesSeries(0).Elements(i).CustomAttributes.Add("micro", "<chart type=arealine colors=""white"" width=61 height=39 margin_left=-1 data=""" & rates.ToString(0, rates.Length - 1) & """>")
End If
Next
Next
Chart.SeriesCollection.Add(statesSeries)
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>
Previous