JS Us Counties Map
Demonstrates how to use external topoJSON and data files to generate a US counties choropleth map.
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
Chart.Debug = false;
// Demonstrates how to use external topoJSON and data files to generate a US counties choropleth map.
Chart.Type = ChartType.Map;
Chart.Width = 700;
Chart.Height = 480;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "US Unemployment Rate 2020 by County";
Chart.TitleBox.Label.Font = new Font("Arial", 12, FontStyle.Regular);
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.DefaultElement.ToolTip = "%state <br> <b>%name (%zValue%)</b>";
Chart.ChartArea.ClearColors();
Chart.LegendBox.ClearColors();
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Right;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.RenderCallback = "loadData";
Chart.JS.Settings.Add("series.0.defaultPoint.outline_color", "white");
Chart.JS.Settings.Add("series.0.defaultPoint.fill", "none");
Chart.JS.Settings.Add("series.0.mouseTracking_enabled", "false");
Chart.JS.Settings.Add("series.0.map", "./../../data/resources/us-albers.json.txt");
Chart.JS.Settings.Add("palette.pointValue", "'{%zValue:n1}%'");
Chart.SmartPalette.Add("*", new SmartColor(ColorTranslator.FromHtml("#ffffe5"), ColorTranslator.FromHtml("#fec44f"), new ScaleRange(1, 5), ElementValue.ZValue));
Chart.SmartPalette.Add("*", new SmartColor(ColorTranslator.FromHtml("#ec7014"), ColorTranslator.FromHtml("#662506"), new ScaleRange(5, 25), ElementValue.ZValue));
Chart.SeriesCollection.Add(getMapData());
}
SeriesCollection getMapData()
{
SeriesCollection SC = new SeriesCollection();
Series s = new Series();
s.JsMap = "US";
SC.Add(s);
return SC;
}
</script>
<style type="text/css">
.dnc {
margin: 0px auto;
max-width: 840px;
}
.jscGrid .dataTable thead th {
background-color: white;
color: #424242;
text-align: center !important;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid #f5f5f5;
}
.jscGrid .dataTable tr {
background-color: white !important;
}
.jscGrid .dataTable td {
font-size: 12px;
border-bottom: 1px solid #f5f5f5;
font-weight: 300;
}
</style>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="840px" Height="600px" CssClass="dnc" />
</div>
<script type="text/javascript">
// loadData();
function loadData() {
JSC.fetch('./../../data/resources/us-unemployment-rate-by-county.csv').then(function (response) { return response.text() }).then(function (text) {
var countiesData = JSC.csv2Json(text, {
coerce: function (d, i) {
return {
county: d.county,
// county code must be a string for cases like '001'
county_code: d.county_code + '',
state: d.state,
rate: d.rate,
};
},
});
renderMap(countiesData);
})
.catch(function (error) {
console.error(error);
});
};
function renderMap(data) {
var series = {
map:"./../../data/resources/us-albers-counties.json.txt",
defaultPoint_outline_width:0,
points:[]
};
var points2 = [];
for (var i = 0; i < data.length; i++) {
var state = data[i];
series.points.push({map:state.state+ '.' + state.county_code, z:state.rate});
}
//Insert as first series
myJSC.series.splice(0,0,series);
}
</script>
</body>
</html>
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Chart.Debug = False
' Demonstrates how to use external topoJSON and data files to generate a US counties choropleth map.
Chart.Type = ChartType.Map
Chart.Width = 700
Chart.Height = 480
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "US Unemployment Rate 2020 by County"
Chart.TitleBox.Label.Font = New Font("Arial", 12, FontStyle.Regular)
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.DefaultElement.ToolTip = "%state <br> <b>%name (%zValue%)</b>"
Chart.ChartArea.ClearColors()
Chart.LegendBox.ClearColors()
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Right
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.RenderCallback = "loadData"
Chart.JS.Settings.Add("series.0.defaultPoint.outline_color", "white")
Chart.JS.Settings.Add("series.0.defaultPoint.fill", "none")
Chart.JS.Settings.Add("series.0.mouseTracking_enabled", "false")
Chart.JS.Settings.Add("series.0.map", "./../../data/resources/us-albers.json.txt")
Chart.JS.Settings.Add("palette.pointValue", "'{%zValue:n1}%'")
Chart.SmartPalette.Add("*", New SmartColor(ColorTranslator.FromHtml("#ffffe5"), ColorTranslator.FromHtml("#fec44f"), New ScaleRange(1, 5), ElementValue.ZValue))
Chart.SmartPalette.Add("*", New SmartColor(ColorTranslator.FromHtml("#ec7014"), ColorTranslator.FromHtml("#662506"), New ScaleRange(5, 25), ElementValue.ZValue))
Chart.SeriesCollection.Add(getMapData())
End Sub
Function getMapData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim s As Series = New Series()
s.JsMap = "US"
SC.Add(s)
Return SC
End Function
</script>
<style type="text/css">
.dnc {
margin: 0px auto;
max-width: 840px;
}
.jscGrid .dataTable thead th {
background-color: white;
color: #424242;
text-align: center !important;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid #f5f5f5;
}
.jscGrid .dataTable tr {
background-color: white !important;
}
.jscGrid .dataTable td {
font-size: 12px;
border-bottom: 1px solid #f5f5f5;
font-weight: 300;
}
</style>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="840px" Height="600px" CssClass="dnc" />
</div>
<script type="text/javascript">
// loadData();
function loadData() {
JSC.fetch('./../../data/resources/us-unemployment-rate-by-county.csv').then(function (response) { return response.text() }).then(function (text) {
var countiesData = JSC.csv2Json(text, {
coerce: function (d, i) {
return {
county: d.county,
// county code must be a string for cases like '001'
county_code: d.county_code + '',
state: d.state,
rate: d.rate,
};
},
});
renderMap(countiesData);
})
.catch(function (error) {
console.error(error);
});
};
function renderMap(data) {
var series = {
map:"./../../data/resources/us-albers-counties.json.txt",
defaultPoint_outline_width:0,
points:[]
};
var points2 = [];
for (var i = 0; i < data.length; i++) {
var state = data[i];
series.points.push({map:state.state+ '.' + state.county_code, z:state.rate});
}
//Insert as first series
myJSC.series.splice(0,0,series);
}
</script>
</body>
</html>
Previous