JS Calendar Events
Demonstrates an events calendar based on csv data.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
// Demonstrates an events calendar based on csv data.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Size = "780X600";
Chart.Debug = false;
Chart.LegendBox.Visible = false;
Chart.TitleBox.Label.Text = "July 2018";
Chart.TitleBox.Label.Font = new Font("Arial", 20, FontStyle.Bold);
Chart.TitleBox.Label.Color = Color.FromArgb(11, 114, 133);
Chart.TitleBox.ClearColors();
Chart.ChartArea.ClearColors();
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "updateChart";
Chart.JS.Calendar.StartDate = new DateTime(2018, 7, 1);
Chart.JS.Calendar.EndDate = new DateTime(2018, 7, 31);
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = false;
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "";//disable tooltip
Chart.JS.Calendar.DefaultEdgeElement.Color = Color.Transparent;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Calendar.DefaultEdgeElement.Color = Color.FromArgb(16, 152, 173);
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = true;
//// Default Point Event
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''");
Chart.JS.Settings.Add("defaultPoint.states_hover.color", "'#e3fafc'");
Chart.DefaultElement.LabelTemplate = "<span style='align:right; font-size:14px;'><b>%name</b></span><br>%events";
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;//vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.Top;// StringAlignment.Near;
Chart.DefaultElement.SmartLabel.Font = new Font("Arial", 10, FontStyle.Bold);
Chart.DefaultElement.SmartLabel.Color = Color.FromArgb(16, 152, 173);
Chart.DefaultElement.ShowValue = true;
Chart.DefaultElement.ToolTip = "";//disable tooltip
Chart.ChartArea.Padding = 0;
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.Palette = new Color[] { };//prevent setting DNC default palette
Chart.YAxis.Line.Visible = false;
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:780px;max-height:620px;margin:0px auto;"/>
<script type="text/javascript">
function updateChart(ch) { loadData(ch, makeChart); };
function loadData(chart, cb) {
JSC.fetch('./../../data/resources/events_data.csv')
.then(function(response) {return response.text()})
.then(function(text) {
var parsed = JSC.parseCsv(text);
cb(chart,parsed.data)
})
.catch(function(err) { console.error(err) });
}
function makeChart(chart, data) {
//Format csv data into points that will bind the calendar cells.
var customSeries = [{
points: data.map(function(row) {
var labelText = '<br><span style="color:#78909c;font-size:12px;font-weight:normal">' + row[2] + '</span>'
+ ' <br><span style=\'font-size:8px;font-weight:normal;color:#b0bec5;\'>'
+ JSC.formatDate(new Date(row[0]), 't')
+ ' - ' + JSC.formatDate(new Date(row[1]), 't') + '</span>';
return {
date: [row[0], row[1]], attributes: { events: [labelText] }
}
})
}];
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" %>
<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 an events calendar based on csv data.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Size = "780X600"
Chart.Debug = False
Chart.LegendBox.Visible = False
Chart.TitleBox.Label.Text = "July 2018"
Chart.TitleBox.Label.Font = New Font("Arial", 20, FontStyle.Bold)
Chart.TitleBox.Label.Color = Color.FromArgb(11, 114, 133)
Chart.TitleBox.ClearColors()
Chart.ChartArea.ClearColors()
Chart.JS.Enabled = True
Chart.JS.RenderCallback = "updateChart"
Chart.JS.Calendar.StartDate = New DateTime(2018, 7, 1)
Chart.JS.Calendar.EndDate = New DateTime(2018, 7, 31)
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = False
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "" 'disable tooltip
Chart.JS.Calendar.DefaultEdgeElement.Color = Color.Transparent
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Calendar.DefaultEdgeElement.Color = Color.FromArgb(16, 152, 173)
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = True
'// Default Point Event
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''")
Chart.JS.Settings.Add("defaultPoint.states_hover.color", "'#e3fafc'")
Chart.DefaultElement.LabelTemplate = "<span style='align:right; font-size:14px;'><b>%name</b></span><br>%events"
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near 'vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.Top ' StringAlignment.Near;
Chart.DefaultElement.SmartLabel.Font = New Font("Arial", 10, FontStyle.Bold)
Chart.DefaultElement.SmartLabel.Color = Color.FromArgb(16, 152, 173)
Chart.DefaultElement.ShowValue = True
Chart.DefaultElement.ToolTip = "" 'disable tooltip
Chart.ChartArea.Padding = 0
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.Palette = New Color() { } 'prevent setting DNC default palette
Chart.YAxis.Line.Visible = False
End Sub
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:780px;max-height:620px;margin:0px auto;"/>
<script type="text/javascript">
function updateChart(ch) { loadData(ch, makeChart); };
function loadData(chart, cb) {
JSC.fetch('./../../data/resources/events_data.csv')
.then(function(response) {return response.text()})
.then(function(text) {
var parsed = JSC.parseCsv(text);
cb(chart,parsed.data)
})
.catch(function(err) { console.error(err) });
}
function makeChart(chart, data) {
//Format csv data into points that will bind the calendar cells.
var customSeries = [{
points: data.map(function(row) {
var labelText = '<br><span style="color:#78909c;font-size:12px;font-weight:normal">' + row[2] + '</span>'
+ ' <br><span style=\'font-size:8px;font-weight:normal;color:#b0bec5;\'>'
+ JSC.formatDate(new Date(row[0]), 't')
+ ' - ' + JSC.formatDate(new Date(row[1]), 't') + '</span>';
return {
date: [row[0], row[1]], attributes: { events: [labelText] }
}
})
}];
chart.options({ series: [{ points: customSeries[0].points }] });
}
</script>
</body>
</html>
Previous