Gallery
PreviousJS Calendar Highlights
<%@ 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 update highlights using the FP API..
Chart.Type = ChartType.Calendar;
Chart.Height = 240;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "Vacation Days 2020";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
Chart.TitleBox.ClearColors();
Chart.LegendBox.Header.Label.Text = "Click entries below to <br>toggle vacation highlights";
Chart.JS.Settings.Add("legend.header","Days Off,,Name");
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.LegendBox.ClearColors();
//JS settings
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year;
Chart.JS.Calendar.StartDate = new DateTime(2020, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(2020, 12, 31);
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.YAxis.Label.Text = "2020";
Chart.YAxis.Label.Font = new Font("Tahoma", 20, FontStyle.Bold);
Chart.DefaultElement.Outline.Color = Color.FromArgb(50, 50, 50);
Chart.DefaultElement.Transparency = 92;
Chart.ChartArea.Padding = 0;
Chart.Palette = new Color[] { };
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:740px;margin:0px auto;"/>
<script type="text/javascript">
//Get a default chart palette
var chartPalette = JSC.getPalette();
//Some data for the chart
var items2 = [
{
name: 'Alex',
pattern: {
date: [
'6/5/2020',
'6/6/2020',
'6/7/2020',
'6/8/2020',
'6/9/2020',
'6/10/2020',
'6/11/2020',
'6/12/2020',
'9/5/2020',
'9/6/2020',
'9/7/2020',
'9/8/2020',
]
}
},
{
name: 'Mike',
pattern: {
date: [
'1/1/2020',
'1/2/2020',
'1/3/2020',
'1/4/2020',
'1/5/2020',
'6/9/2020',
'6/10/2020',
'6/11/2020',
'6/12/2020',
'6/13/2020',
'6/14/2020',
'6/15/2020',
]
}
},
{
name: 'Jeff',
pattern: {
date: [
'2/1/2020',
'2/2/2020',
'2/3/2020',
'2/4/2020',
'2/5/2020',
'2/6/2020',
'2/7/2020',
'2/8/2020',
'7/9/2020',
'7/10/2020',
'7/11/2020',
'7/12/2020',
'7/13/2020',
'7/14/2020',
'7/15/2020',
]
}
}
];
//Assign colors to data array.
items2.forEach(function (item, i) {
item.color = chartPalette[i];
//To keep track visibility
item.visible = true;
});
makeHolidayPoints(initChart);
function initChart(holidayPoints) {
myJSC.options({ series: [{ points: holidayPoints }] });
var customEntries = items2.map(function (item2, i) {
return {
name: item2.name,
id: 'lid-' + i,
icon_color: item2.color,
value: item2.pattern.date.length.toString(),
events: {
click: function () {
var item2 = items2[i];
if (item2.visible) {
hideDays(i);
item2.visible = false;
} else {
showDays(i);
item2.visible = true;
}
}
}
}
});
customEntries.push({
name: 'Holidays', value: '',
lineAbove: { width: 1 },
icon: { color: '#ffb77d' }
});
myJSC.legends(0).options({ customEntries: customEntries });
showAll();
}
//This timeout is used to delay showing all items to prevent flickering while moving mouse over legend.
var showAllDelayTimer;
function showAll() {
if (!myJSC) {
showAllDelayTimer = setTimeout(execShowAll, 200);
} else { execShowAll(); }
function execShowAll() {
for (var i = 0; i < items2.length; i++) { showDays(i); }
}
}
function hideAll() {
clearTimeout(showAllDelayTimer);
for (var i = 0; i < items2.length; i++) { hideDays(i); }
}
function hideDays(i) {
var highlight = myJSC.highlights('id-' + i);
highlight && highlight.remove();
//Gray out legend entry
myJSC.legends(0).entries('lid-' + i).options({ color: '#bababa' });
}
function showDays(i) {
var id = 'id-' + i, config = items2[i];
var c = myJSC;
var highlight = c.highlights(id);
config.id = id;
config.outline = { width: 0, color: items2[i].color};
if (!highlight){ myJSC.highlights.add(config);}
//Restore legend entry color
c.legends(0).entries('lid-' + i).options({ color: 'black' });
}
function makeHolidayPoints(callback) {
JSC.fetch('./../../data/resources/usHolidays.json.txt').then(function (response) { return response.json() }).then(function (data) {
var holidayPoints = data.map(function (item) {
return {
date: item.pattern,
fill: '#ffb77d',
opacity: .8,
outline: {
dashStyle: 'dot',
color: '#ffa14d',
width: 1
},
tooltip: '<b>%name</b> ' + item.name
}
});
callback(holidayPoints);
});
}
</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 update highlights using the FP API..
Chart.Type = ChartType.Calendar
Chart.Height = 240
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "Vacation Days 2020"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.LegendBox.Header.Label.Text = "Click entries below to <br>toggle vacation highlights"
Chart.JS.Settings.Add("legend.header","Days Off,,Name")
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.LegendBox.ClearColors()
'JS settings
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year
Chart.JS.Calendar.StartDate = New DateTime(2020, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(2020, 12, 31)
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.YAxis.Label.Text = "2020"
Chart.YAxis.Label.Font = New Font("Tahoma", 20, FontStyle.Bold)
Chart.DefaultElement.Outline.Color = Color.FromArgb(50, 50, 50)
Chart.DefaultElement.Transparency = 92
Chart.ChartArea.Padding = 0
Chart.Palette = New Color() { }
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:740px;margin:0px auto;"/>
<script type="text/javascript">
//Get a default chart palette
var chartPalette = JSC.getPalette();
//Some data for the chart
var items2 = [
{
name: 'Alex',
pattern: {
date: [
'6/5/2020',
'6/6/2020',
'6/7/2020',
'6/8/2020',
'6/9/2020',
'6/10/2020',
'6/11/2020',
'6/12/2020',
'9/5/2020',
'9/6/2020',
'9/7/2020',
'9/8/2020',
]
}
},
{
name: 'Mike',
pattern: {
date: [
'1/1/2020',
'1/2/2020',
'1/3/2020',
'1/4/2020',
'1/5/2020',
'6/9/2020',
'6/10/2020',
'6/11/2020',
'6/12/2020',
'6/13/2020',
'6/14/2020',
'6/15/2020',
]
}
},
{
name: 'Jeff',
pattern: {
date: [
'2/1/2020',
'2/2/2020',
'2/3/2020',
'2/4/2020',
'2/5/2020',
'2/6/2020',
'2/7/2020',
'2/8/2020',
'7/9/2020',
'7/10/2020',
'7/11/2020',
'7/12/2020',
'7/13/2020',
'7/14/2020',
'7/15/2020',
]
}
}
];
//Assign colors to data array.
items2.forEach(function (item, i) {
item.color = chartPalette[i];
//To keep track visibility
item.visible = true;
});
makeHolidayPoints(initChart);
function initChart(holidayPoints) {
myJSC.options({ series: [{ points: holidayPoints }] });
var customEntries = items2.map(function (item2, i) {
return {
name: item2.name,
id: 'lid-' + i,
icon_color: item2.color,
value: item2.pattern.date.length.toString(),
events: {
click: function () {
var item2 = items2[i];
if (item2.visible) {
hideDays(i);
item2.visible = false;
} else {
showDays(i);
item2.visible = true;
}
}
}
}
});
customEntries.push({
name: 'Holidays', value: '',
lineAbove: { width: 1 },
icon: { color: '#ffb77d' }
});
myJSC.legends(0).options({ customEntries: customEntries });
showAll();
}
//This timeout is used to delay showing all items to prevent flickering while moving mouse over legend.
var showAllDelayTimer;
function showAll() {
if (!myJSC) {
showAllDelayTimer = setTimeout(execShowAll, 200);
} else { execShowAll(); }
function execShowAll() {
for (var i = 0; i < items2.length; i++) { showDays(i); }
}
}
function hideAll() {
clearTimeout(showAllDelayTimer);
for (var i = 0; i < items2.length; i++) { hideDays(i); }
}
function hideDays(i) {
var highlight = myJSC.highlights('id-' + i);
highlight && highlight.remove();
//Gray out legend entry
myJSC.legends(0).entries('lid-' + i).options({ color: '#bababa' });
}
function showDays(i) {
var id = 'id-' + i, config = items2[i];
var c = myJSC;
var highlight = c.highlights(id);
config.id = id;
config.outline = { width: 0, color: items2[i].color};
if (!highlight){ myJSC.highlights.add(config);}
//Restore legend entry color
c.legends(0).entries('lid-' + i).options({ color: 'black' });
}
function makeHolidayPoints(callback) {
JSC.fetch('./../../data/resources/usHolidays.json.txt').then(function (response) { return response.json() }).then(function (data) {
var holidayPoints = data.map(function (item) {
return {
date: item.pattern,
fill: '#ffb77d',
opacity: .8,
outline: {
dashStyle: 'dot',
color: '#ffa14d',
width: 1
},
tooltip: '<b>%name</b> ' + item.name
}
});
callback(holidayPoints);
});
}
</script>
</body>
</html>
- Sample FilenameJsCalendarHighlights.aspx
- Version9.1
- Uses DatabaseNo