Gallery
PreviousJS Multivariate Tile Map
<%@ Page Language="C#" Debug="true" 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 multivariate tile map chart of US states.
Chart.Type = ChartType.Heatmap;
// Enable JSCharting
Chart.JS.Enabled = true;
// Set the chart size.
Chart.Width = 670;
Chart.Height = 530;
Chart.Palette = new Color[] { };
Chart.TitleBox.Label.Text = "How much does the well-being index depend on the employment rate in the United States?";
Chart.TitleBox.Label.Font = new Font("Tahoma", 14, FontStyle.Regular);
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.LegendBox.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 = "%code";
Chart.DefaultSeries.DefaultElement.ToolTip = "<b>%state</b><br>Employment Rate: <b>%zValue %</b><br>Well-being index: <b>%wbi/100</b>";
DataEngine deLF = new DataEngine();
deLF.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
deLF.Data = "./../../data/resources/laborForceUs-2020.csv";
deLF.DataFields = "name=state,yValue=year,labor_force,employed";//cvs must have header state,year,labor_force,employed,unemployed
SeriesCollection scLF = deLF.GetSeries();
DataEngine deWbi = new DataEngine();
deWbi.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
deWbi.Data = "./../../data/resources/us-well-being-index-2019.csv";
deWbi.DataFields = "name=state,yValue=wbi";//cvs must have header state,wbi,quintile
SeriesCollection scWbi = deWbi.GetSeries();
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/tile-map-data.csv";
de.DataFields = "name=state,xvalue=col,yValue=row,code";//cvs must have header
SeriesCollection sc = de.GetSeries();
for (int i = 0; i < sc.Count; i++)
{
for (int j = 0; j < sc[i].Elements.Count; j++)
{
if (sc[i].Elements[j].Name == "District of Columbia")
continue;
string lf = scLF[i].Elements[j].CustomAttributes["labor_force"].ToString();
string em = scLF[i].Elements[j].CustomAttributes["employed"].ToString();
sc[i].Elements[j].ZValue = Convert.ToDouble(em) / Convert.ToDouble(lf)*100;
sc[i].Elements[j].CustomAttributes.Add("state", sc[i].Elements[j].Name);
sc[i].Elements[j].CustomAttributes.Add("wbi", scWbi[i].Elements[j].YValue);
sc[i].Elements[j].Color = getPaletteColor(sc[i].Elements[j].ZValue, (int)scWbi[i].Elements[j].YValue);
}
}
Chart.SeriesCollection.Add(sc);
}
string[] palette = { "#cbbed0", "#bc7b8e", "#af394d", "#89a1c8", "#806a8a", "#76314b", "#4885c0", "#425686", "#3e2848" };
Color getPaletteColor(double rate, int wbi) {
double [] c1 = {87.245873926776113, 95.779628730867287};//min,max unemployment rate
double [] c2 = {46,70};//min,max wbi
int[,] numbers = new int[3, 3] {
{0, 1, 2},
{3, 4, 5},
{6, 7, 8}
};
int index = numbers[mapValue(0, 2, c2[0], c2[1], wbi),mapValue(0, 2, c1[0], c1[1], rate)];
return System.Drawing.ColorTranslator.FromHtml(palette[index]);
}
int mapValue(int toStart,int toEnd, double fromStart,double fromEnd,double value) {
return (int)Math.Round(toStart + ((value - fromStart) / (fromEnd - fromStart)) * (toEnd - toStart));
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<style type="text/css">
#chartWrapper {
margin: 0px auto;
max-width: 800px;
display: flex;
justify-content: space-around;
// flex-wrap:wrap;
}
#legendDiv {
margin-left: 15px;
margin-top: 33px;
display: flex;
flex-wrap: wrap;
height: 140px;
width: 140px;
font-size: 12px;
font-family: tahoma, geneva, sans-serif;
}
#category2 {
margin-left: -60px;
margin-top: 50px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
padding-left: 10px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var palette = ['#cbbed0', '#bc7b8e', '#af394d', '#89a1c8', '#806a8a', '#76314b', '#4885c0', '#425686', '#3e2848'];
createLegendHTML(palette, 'Employment rate', 'Well-being index');
});
function createLegendHTML(palette, category1, category2) {
document.getElementById('category1').innerHTML = category1 + ' →';
document.getElementById('category2').innerHTML = '← ' + category2;
JSC.label(
'legendIcons',
addIcon(palette[0]) +
addIcon(palette[1]) +
addIcon(palette[2]) +
'<br>' +
addIcon(palette[3]) +
addIcon(palette[4]) +
addIcon(palette[5]) +
'<br>' +
addIcon(palette[6]) +
addIcon(palette[7]) +
addIcon(palette[8])
);
function addIcon(color) {
return '<icon name=material/av/stop size=40 color=' + color + '>';
}
}
</script>
</head>
<body>
<div id="chartWrapper">
<dotnet:Chart ID="Chart" runat="server" />
<div id="legendDiv">
<div id="category1" style="width: 100%; margin-left: 15px; margin-bottom: -5px;"></div>
<div id="category2" style="width: 120px; height: 20px;"></div>
<div id="legendIcons" style="width: 120px; margin-left: 15px; margin-top: -60px;"></div>
</div>
</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 a multivariate tile map chart of US states.
Chart.Type = ChartType.Heatmap
' Enable JSCharting
Chart.JS.Enabled = True
' Set the chart size.
Chart.Width = 670
Chart.Height = 530
Chart.Palette = New Color() { }
Chart.TitleBox.Label.Text = "How much does the well-being index depend on the employment rate in the United States?"
Chart.TitleBox.Label.Font = New Font("Tahoma", 14, FontStyle.Regular)
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.LegendBox.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 = "%code"
Chart.DefaultSeries.DefaultElement.ToolTip = "<b>%state</b><br>Employment Rate: <b>%zValue %</b><br>Well-being index: <b>%wbi/100</b>"
Dim deLF As DataEngine = New DataEngine()
deLF.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
deLF.Data = "./../../data/resources/laborForceUs-2020.csv"
deLF.DataFields = "name=state,yValue=year,labor_force,employed" 'cvs must have header state,year,labor_force,employed,unemployed
Dim scLF As SeriesCollection = deLF.GetSeries()
Dim deWbi As DataEngine = New DataEngine()
deWbi.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
deWbi.Data = "./../../data/resources/us-well-being-index-2019.csv"
deWbi.DataFields = "name=state,yValue=wbi" 'cvs must have header state,wbi,quintile
Dim scWbi As SeriesCollection = deWbi.GetSeries()
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/tile-map-data.csv"
de.DataFields = "name=state,xvalue=col,yValue=row,code" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
For i As Integer = 0 To sc.Count - 1
For j As Integer = 0 To sc(i).Elements.Count - 1
If sc(i).Elements(j).Name = "District of Columbia" Then
Continue For
End If
Dim lf As String = scLF(i).Elements(j).CustomAttributes("labor_force").ToString()
Dim em As String = scLF(i).Elements(j).CustomAttributes("employed").ToString()
sc(i).Elements(j).ZValue = Convert.ToDouble(em) / Convert.ToDouble(lf)*100
sc(i).Elements(j).CustomAttributes.Add("state", sc(i).Elements(j).Name)
sc(i).Elements(j).CustomAttributes.Add("wbi", scWbi(i).Elements(j).YValue)
sc(i).Elements(j).Color = getPaletteColor(sc(i).Elements(j).ZValue, CInt(Fix(scWbi(i).Elements(j).YValue)))
Next j
Next i
Chart.SeriesCollection.Add(sc)
End Sub
Dim palette As String() = { "#cbbed0", "#bc7b8e", "#af394d", "#89a1c8", "#806a8a", "#76314b", "#4885c0", "#425686", "#3e2848" }
Function getPaletteColor(ByVal rate As Double, ByVal wbi As Integer) As Color
Dim c1 As Double() = {87.245873926776113, 95.779628730867287} 'min,max unemployment rate
Dim c2 As Double() = {46,70} 'min,max wbi
Dim numbers As Integer(,) = New Integer(2, 2) { {0, 1, 2}, {3, 4, 5}, {6, 7, 8} }
Dim index As Integer = numbers(mapValue(0, 2, c2(0), c2(1), wbi),mapValue(0, 2, c1(0), c1(1), rate))
Return System.Drawing.ColorTranslator.FromHtml(palette(index))
End Function
Function mapValue(ByVal toStart As Integer, ByVal toEnd As Integer, ByVal fromStart As Double, ByVal fromEnd As Double, ByVal value As Double) As Integer
Return CInt(Fix(Math.Round(toStart + ((value - fromStart) / (fromEnd - fromStart)) * (toEnd - toStart))))
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<style type="text/css">
#chartWrapper {
margin: 0px auto;
max-width: 800px;
display: flex;
justify-content: space-around;
// flex-wrap:wrap;
}
#legendDiv {
margin-left: 15px;
margin-top: 33px;
display: flex;
flex-wrap: wrap;
height: 140px;
width: 140px;
font-size: 12px;
font-family: tahoma, geneva, sans-serif;
}
#category2 {
margin-left: -60px;
margin-top: 50px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
padding-left: 10px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var palette = ['#cbbed0', '#bc7b8e', '#af394d', '#89a1c8', '#806a8a', '#76314b', '#4885c0', '#425686', '#3e2848'];
createLegendHTML(palette, 'Employment rate', 'Well-being index');
});
function createLegendHTML(palette, category1, category2) {
document.getElementById('category1').innerHTML = category1 + ' →';
document.getElementById('category2').innerHTML = '← ' + category2;
JSC.label(
'legendIcons',
addIcon(palette[0]) +
addIcon(palette[1]) +
addIcon(palette[2]) +
'<br>' +
addIcon(palette[3]) +
addIcon(palette[4]) +
addIcon(palette[5]) +
'<br>' +
addIcon(palette[6]) +
addIcon(palette[7]) +
addIcon(palette[8])
);
function addIcon(color) {
return '<icon name=material/av/stop size=40 color=' + color + '>';
}
}
</script>
</head>
<body>
<div id="chartWrapper">
<dotnet:Chart ID="Chart" runat="server" />
<div id="legendDiv">
<div id="category1" style="width: 100%; margin-left: 15px; margin-bottom: -5px;"></div>
<div id="category2" style="width: 120px; height: 20px;"></div>
<div id="legendIcons" style="width: 120px; margin-left: 15px; margin-top: -60px;"></div>
</div>
</div>
</body>
</html>
- Sample FilenameJsMultivariateTileMap.aspx
- Version10.3
- Uses DatabaseNo