JS Calendar Exams
Demonstrates Calendar chart with events marked by a custom svg path.
<%@ 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 Calendar chart with events marked by a custom svg path.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Size = "470X430";
Chart.Debug = false;
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
Chart.LegendBox.Template = "%icon %name";
Chart.LegendBox.ClearColors();
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.TitleBox.Orientation = dotnetCHARTING.Orientation.Top;
Chart.TitleBox.Label.Text = "Exam Schedule January 2018";
Chart.TitleBox.Label.Font = new Font("Arial", 16, FontStyle.Regular);
Chart.TitleBox.Label.Alignment = StringAlignment.Center;
Chart.TitleBox.ClearColors();
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "updateChart";
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.Color = Color.Transparent;
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "";//disable tooltip
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
//// Default Point Event
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''");
Chart.DefaultElement.LabelTemplate = "<b>%name</b><br>%events";
Chart.DefaultElement.ToolTip = "";//disable tooltip
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;//vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.Center;// StringAlignment.Near;
Chart.DefaultElement.SmartLabel.Font = new Font("Arial", 18, FontStyle.Bold);
Chart.ChartArea.ClearColors();
Chart.ChartArea.Padding = 0;
Chart.DefaultElement.ShowValue = true;
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:470px;max-height:450px;margin:0px auto;"/>
<script type="text/javascript">
function updateChart(ch) { loadData(ch, makeChart); };
function loadData(chart, cb) {
JSC.fetch('./../../data/resources/examSchedule.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,rows) {
//Format csv data into points that will bind the calendar cells.
var palette = JSC.getPalette(0);
var customEntries = rows.map(function (row, i) {
return { name: row[2], icon_color: palette[i],visible:true };
});
var customSeries = [{
points: rows.map(function (row, i) {
return {
date: [row[0], row[1]],
attributes: {
subject: row[2],
//When attribute strings are wrapped inside an array, they will merge with other point string
// that bind to the same date cell.
events: ['<icon path="M0 0L80 0 L80 6L0 6 z" width="55" height="8" color=' + palette[i] + '><br>']
}
};
})
}];
chart.options({ series: [{ points: customSeries[0].points }] }, false);
chart.legends(0).options({ customEntries: customEntries });
}
</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 Calendar chart with events marked by a custom svg path.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Size = "470X430"
Chart.Debug = False
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom
Chart.LegendBox.Template = "%icon %name"
Chart.LegendBox.ClearColors()
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.TitleBox.Orientation = dotnetCHARTING.Orientation.Top
Chart.TitleBox.Label.Text = "Exam Schedule January 2018"
Chart.TitleBox.Label.Font = New Font("Arial", 16, FontStyle.Regular)
Chart.TitleBox.Label.Alignment = StringAlignment.Center
Chart.TitleBox.ClearColors()
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
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.Color = Color.Transparent
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "" 'disable tooltip
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
'// Default Point Event
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''")
Chart.DefaultElement.LabelTemplate = "<b>%name</b><br>%events"
Chart.DefaultElement.ToolTip = "" 'disable tooltip
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near 'vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.Center ' StringAlignment.Near;
Chart.DefaultElement.SmartLabel.Font = New Font("Arial", 18, FontStyle.Bold)
Chart.ChartArea.ClearColors()
Chart.ChartArea.Padding = 0
Chart.DefaultElement.ShowValue = True
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:470px;max-height:450px;margin:0px auto;"/>
<script type="text/javascript">
loadData(makeChart);
function loadData(cb) {
JSC.fetch('./../../data/resources/examSchedule.csv')
.then(function(response) { return response.text() })
.then(function(text) {
var parsed = JSC.parseCsv(text);
cb(parsed.data)
})
.catch(function(err) { console.error(err) });
}
function makeChart(rows) {
//Format csv data into points that will bind the calendar cells.
var palette = JSC.getPalette(0);
var customEntries = rows.map(function (row, i) {
return { name: row[2], icon_color: palette[i],visible:true };
});
var customSeries = [{
points: rows.map(function (row, i) {
return {
date: [row[0], row[1]],
attributes: {
subject: row[2],
//When attribute strings are wrapped inside an array, they will merge with other point string
// that bind to the same date cell.
events: ['<icon path="M0 0L80 0 L80 6L0 6 z" width="55" height="8" color=' + palette[i] + '><br>']
}
};
})
}];
myJSC.options({ series: [{ points: customSeries[0].points }] }, false);
myJSC.legends(0).options({ customEntries: customEntries });
}
</script>
</body>
</html>
Previous