Gallery
PreviousJS Calendar Planner Tooltips
<%@ 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;
//Tooltip
Chart.JS.Settings.Add("defaultTooltip.fill", "#495057");
Chart.JS.Settings.Add("defaultTooltip.label_style_color", "white");
Chart.JS.Settings.Add("defaultTooltip.padding", "8");
Chart.JS.Settings.Add("defaultTooltip.radius", "5");
Chart.DefaultElement.ToolTip = "js:'<b>{%date:date m}:</b><br><span style=\"listPadding: 0;\"><ul>%events</ul></span>'";
Chart.JS.Settings.Add("defaultSeries_cursor", "pointer");
// Default Point Event
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''");
Chart.JS.Settings.Add("defaultPoint.attributes_icons", "'<icon name=material/toggle/radio-button-unchecked color=transparent outerShape=circle size=6 >'");
Chart.DefaultElement.LabelTemplate = "%icons<br><span style='align:center;'><b>%name</b></span>";
Chart.DefaultElement.Outline.Width = 0;
Chart.JS.Settings.Add("defaultPoint.states_hover.color", "'#cfd8dc'");
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;//vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.OutsideTop;// StringAlignment.Near;
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>
<style type="text/css">
.events {
float: left;
}
</style>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 400px; margin: 0px auto;"></dnc:Chart>
<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'];
var colorOfCategory = {
'Sport': '#e082ff',
'Study': '#91e775',
'Birthdays': '#ffe082',
'Parties': '#82a1ff',
'Entertainment': '#75e7ca'
}
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 = '<span style=\'text-align:left;font-weight:bold; color:' + palette[customEntriesNames.indexOf(row[3])] + '\'><li>' + row[2] + ' - <span style="font-weight:normal">' + JSC.formatDate(new Date(row[0]), 't') + '</span></li></span>';
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 }] }, 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 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
'Tooltip
Chart.JS.Settings.Add("defaultTooltip.fill", "#495057")
Chart.JS.Settings.Add("defaultTooltip.label_style_color", "white")
Chart.JS.Settings.Add("defaultTooltip.padding", "8")
Chart.JS.Settings.Add("defaultTooltip.radius", "5")
Chart.DefaultElement.ToolTip = "js:'<b>{%date:date m}:</b><br><span style=""listPadding: 0;""><ul>%events</ul></span>'"
Chart.JS.Settings.Add("defaultSeries_cursor", "pointer")
' Default Point Event
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''")
Chart.JS.Settings.Add("defaultPoint.attributes_icons", "'<icon name=material/toggle/radio-button-unchecked color=transparent outerShape=circle size=6 >'")
Chart.DefaultElement.LabelTemplate = "%icons<br><span style='align:center;'><b>%name</b></span>"
Chart.DefaultElement.Outline.Width = 0
Chart.JS.Settings.Add("defaultPoint.states_hover.color", "'#cfd8dc'")
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near 'vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.OutsideTop ' StringAlignment.Near;
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>
<style type="text/css">
.events {
float: left;
}
</style>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 400px; margin: 0px auto;"></dnc:Chart>
<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'];
var colorOfCategory = {
'Sport': '#e082ff',
'Study': '#91e775',
'Birthdays': '#ffe082',
'Parties': '#82a1ff',
'Entertainment': '#75e7ca'
}
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 = '<span style=\'text-align:left;font-weight:bold; color:' + palette[customEntriesNames.indexOf(row[3])] + '\'><li>' + row[2] + ' - <span style="font-weight:normal">' + JSC.formatDate(new Date(row[0]), 't') + '</span></li></span>';
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 }] }, false);
myJSC.legends(0).options({ customEntries: customEntries });
}
</script>
</body>
</html>
- Sample FilenameJsCalendarPlannerTooltips.aspx
- Version9.1
- Uses DatabaseNo