Gallery

Gallery > Calendar Charts

JS Calendar Holidays

Demonstrates Calendar chart highlights loaded form a file.

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 Calendar chart highlights loaded form a file.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Debug = false;

Chart.TitleBox.Label.Text = "Federal US Holidays";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
Chart.TitleBox.Orientation = dotnetCHARTING.Orientation.Top;
Chart.TitleBox.ClearColors();

Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
Chart.LegendBox.Template = "%name";
Chart.LegendBox.ClearColors();
Chart.DefaultSeries.LegendEntry.Visible = true;

//JS settings
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year;
Chart.JS.Calendar.StartDate = new DateTime(2018, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(2018, 12, 31);
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;

Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.ChartArea.Padding = 0;
Chart.DefaultElement.ToolTip = "%name";
Chart.Palette = new Color[] { };

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:740px;height:300px;margin:0px auto;"/>
<script type="text/javascript">
makeHolidayPoints(initChart);
function initChart(holidayPoints) {
myJSC.options({ series: [{ points: holidayPoints }] });
//This timeout will ensure the chart is rendered before processing additional year.
setTimeout(function () {
myJSC.options({ calendar: { range: ['1/1/2018', '1/1/2030'] } })
}, 200);
}
function makeHolidayPoints(callback) {
JSC.fetch('./../../data/resources/usHolidays.json.txt').then(function (response) { return response.json() }).then(function (data) {
var holidayPoints = data.map(function (item) {
return {
date: item.pattern,
fill: '#ffb77d',
opacity: .8,
outline: {
dashStyle: 'dot',
color: '#ffa14d',
width: 1
},
tooltip: '<b>%name</b> ' + item.name
}
});
callback(holidayPoints);
});
}
</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 Calendar chart highlights loaded form a file.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Debug = False

Chart.TitleBox.Label.Text = "Federal US Holidays"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
Chart.TitleBox.Orientation = dotnetCHARTING.Orientation.Top
Chart.TitleBox.ClearColors()

Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom
Chart.LegendBox.Template = "%name"
Chart.LegendBox.ClearColors()
Chart.DefaultSeries.LegendEntry.Visible = True

'JS settings
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year
Chart.JS.Calendar.StartDate = New DateTime(2018, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(2018, 12, 31)
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False

Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.ChartArea.Padding = 0
Chart.DefaultElement.ToolTip = "%name"
Chart.Palette = New Color() { }

End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:740px;height:300px;margin:0px auto;"/>
<script type="text/javascript">
makeHolidayPoints(initChart);
function initChart(holidayPoints) {
myJSC.options({ series: [{ points: holidayPoints }] });
//This timeout will ensure the chart is rendered before processing additional year.
setTimeout(function () {
myJSC.options({ calendar: { range: ['1/1/2018', '1/1/2030'] } })
}, 200);
}
function makeHolidayPoints(callback) {
JSC.fetch('./../../data/resources/usHolidays.json.txt').then(function (response) { return response.json() }).then(function (data) {
var holidayPoints = data.map(function (item) {
return {
date: item.pattern,
fill: '#ffb77d',
opacity: .8,
outline: {
dashStyle: 'dot',
color: '#ffa14d',
width: 1
},
tooltip: '<b>%name</b> ' + item.name
}
});
callback(holidayPoints);
});
}
</script>
</body>
</html>

Sample FilenameJsCalendarHolidays.aspx
Version9.1
Uses DatabaseNo

JS Charting

Gallery

JS Calendar Holidays