Gallery
PreviousJS UnemploymentRateUS
<%@ 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)
{
// Demonstrates a dashboard with a map and grid with microchart sparklines.
Chart.Type = ChartType.Map;
Chart.Width = 668;
Chart.Height = 420;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "US Unemployment Rate, 2020";
Chart.TitleBox.Label.Font = new Font("Arial", 12, FontStyle.Regular);
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.DefaultElement.ToolTip = "%name <b>{%zValue:n1}%</b>";
Chart.ChartArea.ClearColors();
Chart.LegendBox.ClearColors();
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Top;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.DataGrid.Enabled = true;
Chart.JS.DataGrid.EnableExportButton = false;
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.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 id="grid" style="max-width: 600px; margin: 0px auto;" />
</div>
<script type="text/javascript">
var grid = undefined;
var nest, stepData, year = 2017, calcFn = 'sum', groupingBy = 'month',
dateFormatters = { month: 'date MMM', week: 'date d', day: 'date d', weekday: 'n' },
maxValues = { month: 200000, week: 100000, day: 20000, weekday: 350000 },
firstColHeaders = { month: 'Month', week: 'Week', day: 'Day', weekday: 'Weekday' },
secondColHeaders = { sum: 'Sum', min: 'Min', max: 'Max', mean: 'Mean' };
var weekdays = 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday'.split(',');
function viewToOptions(view, calc) {
var max = calc === 'sum' ? maxValues[view] : 20000;
return {
columns: [
{ header: firstColHeaders[view], value: '{%xValue:' + dateFormatters[view] + '}' },
{ header: secondColHeaders[calc], value: '{%yValue:n0}' },
{ header: '<chart scale data=0,' + max + 'K color=white>', value: '<chart bar colors=#0277bd,,#ddd data=%yValue max=' + max + '>', align: 'center' },
{ header: 'Daily', value: '<chart sparkline data=%list>', align: 'center' }]
};
}
loadData();
function loadData() {
JSC.fetch('./../../data/resources/laborForceUs.csv').then(function (response) { return response.text() }).then(function (text) {
var mapData = JSC.csv2Json(text, {
coerce: function (d, i) {
if (d.year == "2020") {
return {
state: d.state,
year: d.year,
unemployment_rate: (parseInt(d.unemployed) * 100) / parseInt(d.labor_force)
};
}
}
}).filter(function (el) {
return el != null;
});
var gridData = JSC.csv2Json(text, {
coerce: function (d, i) {
return {
state: d.state,
year: d.year,
unemployment_rate: (parseInt(d.unemployed) * 100) / parseInt(d.labor_force)
};
}
});
renderMap(mapData);
grid = renderGrid(gridData);
});
};
function renderMap(data) {
var points2 = [];
for (var i = 0; i < data.length; i++) {
var state = data[i];
points2.push({ map: "US.name:" + state.state, z: state.unemployment_rate });
}
myJSC.options({ series: [{ points: points2 }] });
}
function renderGrid(data) {
var barColors = [
{ value: [4, 6], color: "#6ef2f0" },
{ value: [6, 8], color: "#00d2fa" },
{ value: [8, 10], color: "#00aeff" },
{ value: [10, 12], color: "#0084ff" },
{ value: [12, 14], color: "#4c4bdf" }
];
var dataG = JSC.nest()
.key("state")
.pointRollup(function (key, val) {
let values = val[0];
rates = val.map(function (a) {
return a.unemployment_rate;
});
return {
state: key,
trends_line:
'<chart type=sparkline colors="#333F89,,#00aeff" width=130 height=20 margin=3 data="' +
rates.join(",") +
'">',
rate_bar:
'<chart type=bar margin_right=5 color="' +
getColor(rates[rates.length - 1]) +
'" data=' +
rates[rates.length - 1] +
" max=7>" +
Math.round(rates[rates.length - 1] * 10) / 10,
min_rate:
Math.round(Math.min.apply(null, rates) * 10) / 10 +
"% (" +
(+1976 + rates.indexOf(Math.min.apply(null, rates))) +
")",
max_rate:
Math.round(Math.max.apply(null, rates) * 10) / 10 +
"% (" +
(+1976 + rates.indexOf(Math.max.apply(null, rates))) +
")"
};
})
.points(data);
dataG.pop();
return new JSC.Grid("grid", {
data: dataG,
className: "dataTable",
exportFile: false,
columns: [
{ header: "State", value: "%state" },
{ header: "Unemployment Rate 2020", value: "%rate_bar%" },
{ header: "Trends (1970-2020)", value: "%trends_line" },
{ header: "Min Unemployment Rate", value: "%min_rate", align: "right" },
{ header: "Max Unemployment Rate", value: "%max_rate", align: "right" }
]
});
function getColor(val) {
for (var i = 0; i < barColors.length; i++) {
if (val > barColors[i].value[0] && val <= barColors[i].value[1]) return barColors[i].color;
}
}
}
</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)
' Demonstrates a dashboard with a map and grid with microchart sparklines.
Chart.Type = ChartType.Map
Chart.Width = 668
Chart.Height = 420
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "US Unemployment Rate, 2020"
Chart.TitleBox.Label.Font = New Font("Arial", 12, FontStyle.Regular)
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.DefaultElement.ToolTip = "%name <b>{%zValue:n1}%</b>"
Chart.ChartArea.ClearColors()
Chart.LegendBox.ClearColors()
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Top
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.DataGrid.Enabled = True
Chart.JS.DataGrid.EnableExportButton = False
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.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 id="grid" style="max-width: 600px; margin: 0px auto;" />
</div>
<script type="text/javascript">
var grid = undefined;
var nest, stepData, year = 2017, calcFn = 'sum', groupingBy = 'month',
dateFormatters = { month: 'date MMM', week: 'date d', day: 'date d', weekday: 'n' },
maxValues = { month: 200000, week: 100000, day: 20000, weekday: 350000 },
firstColHeaders = { month: 'Month', week: 'Week', day: 'Day', weekday: 'Weekday' },
secondColHeaders = { sum: 'Sum', min: 'Min', max: 'Max', mean: 'Mean' };
var weekdays = 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday'.split(',');
function viewToOptions(view, calc) {
var max = calc === 'sum' ? maxValues[view] : 20000;
return {
columns: [
{ header: firstColHeaders[view], value: '{%xValue:' + dateFormatters[view] + '}' },
{ header: secondColHeaders[calc], value: '{%yValue:n0}' },
{ header: '<chart scale data=0,' + max + 'K color=white>', value: '<chart bar colors=#0277bd,,#ddd data=%yValue max=' + max + '>', align: 'center' },
{ header: 'Daily', value: '<chart sparkline data=%list>', align: 'center' }]
};
}
loadData();
function loadData() {
JSC.fetch('./../../data/resources/laborForceUs.csv').then(function (response) { return response.text() }).then(function (text) {
var mapData = JSC.csv2Json(text, {
coerce: function (d, i) {
if (d.year == "2020") {
return {
state: d.state,
year: d.year,
unemployment_rate: (parseInt(d.unemployed) * 100) / parseInt(d.labor_force)
};
}
}
}).filter(function (el) {
return el != null;
});
var gridData = JSC.csv2Json(text, {
coerce: function (d, i) {
return {
state: d.state,
year: d.year,
unemployment_rate: (parseInt(d.unemployed) * 100) / parseInt(d.labor_force)
};
}
});
renderMap(mapData);
grid = renderGrid(gridData);
});
};
function renderMap(data) {
var points2 = [];
for (var i = 0; i < data.length; i++) {
var state = data[i];
points2.push({ map: "US.name:" + state.state, z: state.unemployment_rate });
}
myJSC.options({ series: [{ points: points2 }] });
}
function renderGrid(data) {
var barColors = [
{ value: [4, 6], color: "#6ef2f0" },
{ value: [6, 8], color: "#00d2fa" },
{ value: [8, 10], color: "#00aeff" },
{ value: [10, 12], color: "#0084ff" },
{ value: [12, 14], color: "#4c4bdf" }
];
var dataG = JSC.nest()
.key("state")
.pointRollup(function (key, val) {
let values = val[0];
rates = val.map(function (a) {
return a.unemployment_rate;
});
return {
state: key,
trends_line:
'<chart type=sparkline colors="#333F89,,#00aeff" width=130 height=20 margin=3 data="' +
rates.join(",") +
'">',
rate_bar:
'<chart type=bar margin_right=5 color="' +
getColor(rates[rates.length - 1]) +
'" data=' +
rates[rates.length - 1] +
" max=7>" +
Math.round(rates[rates.length - 1] * 10) / 10,
min_rate:
Math.round(Math.min.apply(null, rates) * 10) / 10 +
"% (" +
(+1976 + rates.indexOf(Math.min.apply(null, rates))) +
")",
max_rate:
Math.round(Math.max.apply(null, rates) * 10) / 10 +
"% (" +
(+1976 + rates.indexOf(Math.max.apply(null, rates))) +
")"
};
})
.points(data);
dataG.pop();
return new JSC.Grid("grid", {
data: dataG,
className: "dataTable",
exportFile: false,
columns: [
{ header: "State", value: "%state" },
{ header: "Unemployment Rate 2020", value: "%rate_bar%" },
{ header: "Trends (1970-2020)", value: "%trends_line" },
{ header: "Min Unemployment Rate", value: "%min_rate", align: "right" },
{ header: "Max Unemployment Rate", value: "%max_rate", align: "right" }
]
});
function getColor(val) {
for (var i = 0; i < barColors.length; i++) {
if (val > barColors[i].value[0] && val <= barColors[i].value[1]) return barColors[i].color;
}
}
}
</script>
</body>
</html>
- Sample FilenameJsUnemploymentRateUS.aspx
- Version10.0
- Uses DatabaseNo