Gallery
PreviousJS Calendar Planner Selection
<%@ 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 data loaded dynamically shown as dots with expanded view on click.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Size = "400X380";
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 = "JULY 2019";
Chart.TitleBox.Label.Font = new Font("Arial", 16, FontStyle.Regular);
Chart.TitleBox.Label.Alignment = StringAlignment.Center;
Chart.TitleBox.Position = TitleBoxPosition.Right;
Chart.TitleBox.ClearColors();
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "updateChart";
Chart.JS.Calendar.StartDate = new DateTime(2019, 7, 1);
Chart.JS.Calendar.EndDate = new DateTime(2019, 7, 31);
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = false;
Chart.JS.Calendar.DefaultEdgeElement.Color = Color.Transparent;
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "";//disable tooltip
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
// Default Point Event
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''");
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick");
Chart.JS.Settings.Add("defaultPoint.attributes_icons", "'<icon name=material/toggle/radio-button-unchecked color=transparent outerShape=circle size=6 >'");
Chart.JS.Settings.Add("defaultSeries_cursor", "pointer");
Chart.JS.Settings.Add("defaultPoint.states_hover_color", "#eaf5f9");
Chart.DefaultElement.LabelTemplate = "%icons<br><span style='align:center;'><b>%name</b></span>";
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;//vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.OutsideTop;// StringAlignment.Near;
Chart.DefaultElement.Outline.Width = 0;
Chart.DefaultElement.ShowValue = true;
Chart.DefaultElement.ToolTip = "";
Chart.ChartArea.ClearColors();
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.Palette = new Color[] { };//prevent setting DNC default palette
Chart.YAxis.Line.Visible = false;
}
</script>
<style type="text/css">
#eventsDiv{
width: 300px;
margin: 0px auto;
min-height:100px;
display: block;
font-family:Arial
}
.day{
color:#263238;
width:40px;
float:left;
padding-top:5px;
padding-right:10px;
text-align:center;
font-size:12px
}
.events{ float:left;}
.dayEvents{
width: 300px;
overflow: hidden;
clear:right;
}
.dayEvents table{
width:200px;
font-size:14px;
word-wrap:break-word;
padding:8px;
margin:5px;
color:#263238
}
</style>
<script type="text/javascript">
function pointClick() {
var clickedPoint = this;
setTimeout(function () {
var dates = [];
var attributes = clickedPoint.options('attributes');
var day = '<div class="day">' + '<span style="font-size:22px; font-weight:bold">' + JSC.formatDate(clickedPoint.tokenValue('%date'), 'dd') + '</span>' + '\n' + '<span style="font-weight:100;text-transform:uppercase">' + weekDays[new Date(clickedPoint.tokenValue('%date')).getDay()] + '</span>' + '</div>'
var str = day;
str += '<div class="events">' + attributes.events + '</div>';
dates.push('<div class="dayEvents">' + str + '</div>');
document.getElementById('eventsDiv').innerHTML = dates.join('\n');
}, 100);
}
</script>
</head>
<body>
<div id="background">
<dnc:Chart ID="Chart" runat="server" style="max-width:400px;height:380px;margin:0px auto;"></dnc:Chart>
<br /><br />
<div id="eventsDiv"></div>
</div>
<script type="text/javascript" src="temp/JSC/icons/material/toggle/radio-button-unchecked.js"></script>
<script type="text/javascript">
var weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
function updateChart(ch) { loadData(ch, makeChart); };
function loadData(chart, cb) {
JSC.fetch('./../../data/resources/events_data2.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) {
var palette = JSC.getPalette(0);
//Format csv data into points that will bind the calendar cells.
var customEntriesNames = [];
data.map(function (row) {
var entryName = row[3];
if (customEntriesNames.indexOf(entryName) === -1) { customEntriesNames.push(entryName); }
});
var customSeries = [{
points: data.map(function (row, i) {
var eventsText = '<div class="' + row[3] + '" style="border-left:5px solid ' + palette[customEntriesNames.indexOf(row[3])] + '";><table><tr><th style=\'text-align:left; font-weight:normal\'><icon name=material/toggle/radio-button-unchecked color=black size=4>' + row[2] + '</th><th style=\'text-align:right;font-size:10px; width:50px\'>' + JSC.formatDate(new Date(row[0]), 't') + '</th></tr></table></div>';
var labelText = '<icon name=material/toggle/radio-button-unchecked color=' + palette[customEntriesNames.indexOf(row[3])] + ' outerShape=circle size=6 >';
return {
date: [row[0], row[1]], attributes: { events: [eventsText], icons: [labelText] }
}
})
}];
var customEntries = customEntriesNames.map(function (name, i) {
return {
name: name,
icon: {
color: palette[i],
name: 'material/toggle/radio-button-unchecked',
size: 14,
outerShape: 'circle',
outline_width: 0
}
};
});
chart.options({ series: [{ points: customSeries[0].points }] });
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 data loaded dynamically shown as dots with expanded view on click.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Size = "400X380"
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 = "JULY 2019"
Chart.TitleBox.Label.Font = New Font("Arial", 16, FontStyle.Regular)
Chart.TitleBox.Label.Alignment = StringAlignment.Center
Chart.TitleBox.Position = TitleBoxPosition.Right
Chart.TitleBox.ClearColors()
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Calendar.StartDate = New DateTime(2019, 7, 1)
Chart.JS.Calendar.EndDate = New DateTime(2019, 7, 31)
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = False
Chart.JS.Calendar.DefaultEdgeElement.Color = Color.Transparent
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "" 'disable tooltip
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
' Default Point Event
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''")
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick")
Chart.JS.Settings.Add("defaultPoint.attributes_icons", "'<icon name=material/toggle/radio-button-unchecked color=transparent outerShape=circle size=6 >'")
Chart.JS.Settings.Add("defaultSeries_cursor", "pointer")
Chart.JS.Settings.Add("defaultPoint.states_hover_color", "#eaf5f9")
Chart.DefaultElement.LabelTemplate = "%icons<br><span style='align:center;'><b>%name</b></span>"
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near 'vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.OutsideTop ' StringAlignment.Near;
Chart.DefaultElement.Outline.Width = 0
Chart.DefaultElement.ShowValue = True
Chart.DefaultElement.ToolTip = ""
Chart.ChartArea.ClearColors()
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.Palette = New Color() { } 'prevent setting DNC default palette
Chart.YAxis.Line.Visible = False
End Sub
</script>
<style type="text/css">
#eventsDiv{
width: 300px;
margin: 0px auto;
min-height:100px;
display: block;
font-family:Arial
}
.day{
color:#263238;
width:40px;
float:left;
padding-top:5px;
padding-right:10px;
text-align:center;
font-size:12px
}
.events{ float:left;}
.dayEvents{
width: 300px;
overflow: hidden;
clear:right;
}
.dayEvents table{
width:200px;
font-size:14px;
word-wrap:break-word;
padding:8px;
margin:5px;
color:#263238
}
</style>
<script type="text/javascript">
function pointClick(obj) {
var c = myJSC;
var clickedPoint = this;
setTimeout(function () {
var dates = [];
var attributes = clickedPoint.options('attributes');
var day = '<div class="day">' + '<span style="font-size:22px; font-weight:bold">' + JSC.formatDate(clickedPoint.tokenValue('%date'), 'dd') + '</span>' + '\n' + '<span style="font-weight:100;text-transform:uppercase">' + weekDays[new Date(clickedPoint.tokenValue('%date')).getDay()] + '</span>' + '</div>'
var str = day;
str += '<div class="events">' + attributes.events + '</div>';
dates.push('<div class="dayEvents">' + str + '</div>');
document.getElementById('eventsDiv').innerHTML = dates.join('\n');
}, 100);
}
</script>
</head>
<body>
<div id="background">
<dnc:Chart ID="Chart" runat="server" style="max-width:400px;height:380px;margin:0px auto;"></dnc:Chart>
<br /><br />
<div id="eventsDiv"></div>
</div>
<script type="text/javascript" src="temp/JSC/icons/material/toggle/radio-button-unchecked.js"></script>
<script type="text/javascript">
loadData(makeChart);
var weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
function loadData(cb) {
JSC.fetch('./../../data/resources/events_data2.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(data) {
var palette = JSC.getPalette(0);
//Format csv data into points that will bind the calendar cells.
var customEntriesNames = [];
data.map(function (row) {
var entryName = row[3];
if (customEntriesNames.indexOf(entryName) === -1) { customEntriesNames.push(entryName); }
});
var customSeries = [{
points: data.map(function (row, i) {
var eventsText = '<div class="' + row[3] + '" style="border-left:5px solid ' + palette[customEntriesNames.indexOf(row[3])] + '";><table><tr><th style=\'text-align:left; font-weight:normal\'><icon name=material/toggle/radio-button-unchecked color=black size=4>' + row[2] + '</th><th style=\'text-align:right;font-size:10px; width:50px\'>' + JSC.formatDate(new Date(row[0]), 't') + '</th></tr></table></div>';
var labelText = '<icon name=material/toggle/radio-button-unchecked color=' + palette[customEntriesNames.indexOf(row[3])] + ' outerShape=circle size=6 >';
return {
date: [row[0], row[1]], attributes: { events: [eventsText], icons: [labelText] }
}
})
}];
var customEntries = customEntriesNames.map(function (name, i) {
return {
name: name,
icon: {
color: palette[i],
name: 'material/toggle/radio-button-unchecked',
size: 14,
outerShape: 'circle',
outline_width: 0
}
};
});
myJSC.options({ series: [{ points: customSeries[0].points }] });
myJSC.legends(0).options({ customEntries: customEntries });
}
</script>
</body>
</html>
- Sample FilenameJsCalendarPlannerSelection.aspx
- Version9.1
- Uses DatabaseNo