JS Calendar Availability
Demonstrates Calendar chart with blackout dates loaded from a csv file.
<%@ 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 with blackout dates loaded from a csv file.
Chart.Type = ChartType.Calendar;
Chart.Width = 250;
Chart.Height = 250;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Mentor = false;
Chart.TitleBox.Label.Text = "January 2018";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
Chart.TitleBox.ClearColors();
Chart.ChartArea.ClearColors();
Chart.JS.Enabled = true;
Chart.JS.Calendar.StartDate = new DateTime(2018, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(2018, 1, 31);
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = false;
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "";
Chart.JS.Calendar.DefaultEdgeElement.Color = Color.Transparent;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.RenderCallback = "updateChart";
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.YAxis.Line.Visible = false;
//Custom legend box
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.LegendBox.Template = "%icon %name";
Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle;
Chart.LegendBox.ClearColors();
LegendEntry available = new LegendEntry();
available.Name = "Available";
available.Marker.Color = Color.FromArgb(203, 242, 183);
available.Marker.Type = ElementMarkerType.Rectangle;
Chart.LegendBox.ExtraEntries.Add(available);
LegendEntry booked = new LegendEntry();
booked.Name = "Booked";
booked.Background.HatchStyle = System.Drawing.Drawing2D.HatchStyle.LightUpwardDiagonal;
booked.Background.HatchColor = Color.FromArgb(202, 202, 202);
booked.Marker.Type = ElementMarkerType.Rectangle;
Chart.LegendBox.ExtraEntries.Add(booked);
Chart.DefaultSeries.DefaultElement.Transparency = 60;
Chart.DefaultElement.LabelTemplate = "<b>%name</b>";
Chart.DefaultElement.Outline.Width = 0;
Chart.Palette = new Color[] { };
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" style="max-width: 250px;max-height: 250px;margin:0px auto;">
</dnc:Chart>
</div>
<script type="text/javascript">
function updateChart(ch) { loadData(ch, makeChart); };
function loadData(chart, cb) {
JSC.fetch('./../../data/resources/bookingData.csv')
.then(function (response) { return response.text(); })
.then(function (csv) { cb(chart,JSC.parseCsv(csv).data); })
.catch(function (ex) { console.error(ex) });
}
function makeChart(chart,data) {
var customSeries = [{
points: data.map(function (row) {
var isAvailable = row[1] === 'a';
return isAvailable ? {
date: row[0],
color: '#cbf2b7',
tooltip: '{%date:date d}<br><b>Available</b>'
} : {
date: row[0],
tooltip: '{%date:date d}<br><b>Booked</b>',
hatch: {
style: 'light-upward-diagonal',
color: '#cacaca'
}
}
})
}];
chart.options({ series: [{ points: customSeries[0].points }] });
}
</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 with blackout dates loaded from a csv file.
Chart.Type = ChartType.Calendar
Chart.Width = 250
Chart.Height = 250
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Mentor = False
Chart.TitleBox.Label.Text = "January 2018"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.ChartArea.ClearColors()
Chart.JS.Enabled = True
Chart.JS.Calendar.StartDate = New DateTime(2018, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(2018, 1, 31)
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = False
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = ""
Chart.JS.Calendar.DefaultEdgeElement.Color = Color.Transparent
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.RenderCallback = "updateChart"
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.YAxis.Line.Visible = False
'Custom legend box
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.LegendBox.Template = "%icon %name"
Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle
Chart.LegendBox.ClearColors()
Dim available As LegendEntry = New LegendEntry()
available.Name = "Available"
available.Marker.Color = Color.FromArgb(203, 242, 183)
available.Marker.Type = ElementMarkerType.Rectangle
Chart.LegendBox.ExtraEntries.Add(available)
Dim booked As LegendEntry = New LegendEntry()
booked.Name = "Booked"
booked.Background.HatchStyle = System.Drawing.Drawing2D.HatchStyle.LightUpwardDiagonal
booked.Background.HatchColor = Color.FromArgb(202, 202, 202)
booked.Marker.Type = ElementMarkerType.Rectangle
Chart.LegendBox.ExtraEntries.Add(booked)
Chart.DefaultSeries.DefaultElement.Transparency = 60
Chart.DefaultElement.LabelTemplate = "<b>%name</b>"
Chart.DefaultElement.Outline.Width = 0
Chart.Palette = New Color() { }
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" style="max-width: 250px;max-height: 250px;margin:0px auto;">
</dnc:Chart>
</div>
<script type="text/javascript">
function updateChart(ch) { loadData(ch, makeChart); };
function loadData(chart, cb) {
JSC.fetch('./../../data/resources/bookingData.csv')
.then(function (response) { return response.text(); })
.then(function (csv) { cb(chart,JSC.parseCsv(csv).data); })
.catch(function (ex) { console.error(ex) });
}
function makeChart(chart,data) {
var customSeries = [{
points: data.map(function (row) {
var isAvailable = row[1] === 'a';
return isAvailable ? {
date: row[0],
color: '#cbf2b7',
tooltip: '{%date:date d}<br><b>Available</b>'
} : {
date: row[0],
tooltip: '{%date:date d}<br><b>Booked</b>',
hatch: {
style: 'light-upward-diagonal',
color: '#cacaca'
}
}
})
}];
chart.options({ series: [{ points: customSeries[0].points }] });
}
</script>
</body>
</html>
Previous