Gallery

Gallery > Data Grid Charts

JS World Holidays

Demonstrates federal holidays of several countries highlighted using calendar patterns.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates federal holidays of several countries highlighted using calendar patterns.
Chart.Type = ChartType.Calendar;
Chart.Width = 800;
Chart.Height = 180;
Chart.TempDirectory = "temp";
Chart.Debug = false;

Chart.TitleBox.Label.Text = "National holidays in Australia (2020)";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
Chart.TitleBox.ClearColors();

//JS settings
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.DataGrid.Enabled = true;
Chart.JS.DataGrid.EnableExportButton = false;
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year;
Chart.JS.Calendar.StartDate = new DateTime(2020, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(2020, 12, 31);
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
JsOptions.JsHighlight hl = new JsOptions.JsHighlight();
hl.Fill.Color = Color.Red;
hl.Fill.Visible = true;
hl.Outline.Color = Color.Empty;
hl.CalendarFilter.Weekday = "0,6";
Chart.JS.Highlights.Add(hl);

Chart.Palette = new Color[] { };
Chart.LegendBox.Visible = false;
Chart.DefaultElement.ToolTip = "<b>%name</b><br>%holiday";
Chart.JS.Settings.Add("defaultSeries.shape_innerPadding", "0");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
.jscGrid .countryGrid thead th {
background-color: white;
color: #424242;
text-align: left;
font-weight: bold;
font-size: 14px;
}
.jscGrid .countryGrid tr {
background-color: white !important;
}
.jscGrid .countryGrid td {
border-bottom: 1px solid #F5F5F5;
}
.a option {
height: 100px;
line-height:10px;
max-height:20px;
}
</style>
</head>
<body>
<div style="width:800px;margin:0px auto;">
<div style="padding-left:36px; font:12px Arial;">
Choose country <select id="countries" class="a" onchange="countryChanged()">
</select>
</div>
<dnc:Chart ID="Chart" runat="server" />
<div id="gridDiv" class="countryGrid" style="max-width: 400px; height: 400px; margin: 0px auto;"></div>
</div>
<script type="text/javascript">
var chart, data, grid = undefined;
JSC.fetch('./../../data/resources/worldHolidays.csv')
.then(function (response) { return response.text() })
.then(function (text) {
parsedData = JSC.parseCsv(text);
data = JSC.csv2Json(text);
makeCountriesArray(data);
var holidayPoints = getCountryData('Australia');
myJSC.options({ series: [{ points: holidayPoints }] });
makeGrid('Australia');
});
function countryChanged() {
var selectedCountry = document.getElementById("countries").value;
var holidayPoints = getCountryData(selectedCountry);
makeGrid(selectedCountry);
myJSC.options({ title_label_text: 'National holidays in ' + selectedCountry + ' (2020)', series: [{ points: holidayPoints }] });

}
function makeGrid(country) {

var gridData = JSC.nest()
.key('date')
.pointRollup(function (key, values) {
return {
Date: JSC.formatDate(parseInt(key), 'm'),
Holiday: values[0].holiday
}
})
.points(data.filter(function (x) { return x.country === country }));
if (!grid) {
JSC.Grid('gridDiv', {
data: gridData,
className: 'countryGrid',
//Dont load default css file.
cssFile: ''
}).then(function (g) { grid = g; });
} else { grid.options({ data: gridData }) }
}
function getCountryData(country) {
return JSC.nest()
.key('date')
.pointRollup(function (key, values) {
return {
date: parseInt(key),
color: 'red',
opacity: 0.4,
attributes: { holiday: values[0].holiday, }
}
})
.points(data.filter(function (x) { return x.country === country; }));
}
function makeCountriesArray(data) {
var countries = data.map(function (a) { return a.country });
var uniqueCountries = countries.filter(function (value, index) { return countries.indexOf(value) === index; });
array = uniqueCountries.sort();
//return uniqueCountries.sort().join(',');
//Create and append select list
var selectList = document.getElementById("countries");
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}

}
</script>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates federal holidays of several countries highlighted using calendar patterns.
Chart.Type = ChartType.Calendar
Chart.Width = 800
Chart.Height = 180
Chart.TempDirectory = "temp"
Chart.Debug = False

Chart.TitleBox.Label.Text = "National holidays in Australia (2020)"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
Chart.TitleBox.ClearColors()

'JS settings
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.DataGrid.Enabled = True
Chart.JS.DataGrid.EnableExportButton = False
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year
Chart.JS.Calendar.StartDate = New DateTime(2020, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(2020, 12, 31)
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Dim hl As JsOptions.JsHighlight = New JsOptions.JsHighlight()
hl.Fill.Color = Color.Red
hl.Fill.Visible = True
hl.Outline.Color = Color.Empty
hl.CalendarFilter.Weekday = "0,6"
Chart.JS.Highlights.Add(hl)

Chart.Palette = New Color() { }
Chart.LegendBox.Visible = False
Chart.DefaultElement.ToolTip = "<b>%name</b><br>%holiday"
Chart.JS.Settings.Add("defaultSeries.shape_innerPadding", "0")
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
.jscGrid .countryGrid thead th {
background-color: white;
color: #424242;
text-align: left;
font-weight: bold;
font-size: 14px;
}
.jscGrid .countryGrid tr {
background-color: white !important;
}
.jscGrid .countryGrid td {
border-bottom: 1px solid #F5F5F5;
}
.a option {
height: 100px;
line-height:10px;
max-height:20px;
}
</style>
</head>
<body>
<div style="width:800px;margin:0px auto;">
<div style="padding-left:36px; font:12px Arial;">
Choose country <select id="countries" class="a" onchange="countryChanged()">
</select>
</div>
<dnc:Chart ID="Chart" runat="server" />
<div id="gridDiv" class="countryGrid" style="max-width: 400px; height: 400px; margin: 0px auto;"></div>
</div>
<script type="text/javascript">
var chart, data, grid = undefined;
JSC.fetch('./../../data/resources/worldHolidays.csv')
.then(function (response) { return response.text() })
.then(function (text) {
parsedData = JSC.parseCsv(text);
data = JSC.csv2Json(text);
makeCountriesArray(data);
var holidayPoints = getCountryData('Australia');
myJSC.options({ series: [{ points: holidayPoints }] });
makeGrid('Australia');
});
function countryChanged() {
var selectedCountry = document.getElementById("countries").value;
var holidayPoints = getCountryData(selectedCountry);
makeGrid(selectedCountry);
myJSC.options({ title_label_text: 'National holidays in ' + selectedCountry + ' (2020)', series: [{ points: holidayPoints }] });

}
function makeGrid(country) {

var gridData = JSC.nest()
.key('date')
.pointRollup(function (key, values) {
return {
Date: JSC.formatDate(parseInt(key), 'm'),
Holiday: values[0].holiday
}
})
.points(data.filter(function (x) { return x.country === country }));
if (!grid) {
JSC.Grid('gridDiv', {
data: gridData,
className: 'countryGrid',
//Dont load default css file.
cssFile: ''
}).then(function (g) { grid = g; });
} else { grid.options({ data: gridData }) }
}
function getCountryData(country) {
return JSC.nest()
.key('date')
.pointRollup(function (key, values) {
return {
date: parseInt(key),
color: 'red',
opacity: 0.4,
attributes: { holiday: values[0].holiday, }
}
})
.points(data.filter(function (x) { return x.country === country; }));
}
function makeCountriesArray(data) {
var countries = data.map(function (a) { return a.country });
var uniqueCountries = countries.filter(function (value, index) { return countries.indexOf(value) === index; });
array = uniqueCountries.sort();
//return uniqueCountries.sort().join(',');
//Create and append select list
var selectList = document.getElementById("countries");
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}

}
</script>
</body>
</html>

Sample FilenameJsWorldHolidays.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS World Holidays