Gallery
PreviousJS Calendar Details
<%@ 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)
{
// This sample demonstrates Calendar heatmap with microcharts and details chart based on csv data.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Size = "740x680";
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend;//show full legend on top without Title
Chart.LegendBox.Template = "%name";
Chart.LegendBox.DefaultEntry.LabelStyle.Color = Color.FromArgb(2, 136, 209);
Chart.LegendBox.DefaultEntry.LabelStyle.Font = new Font("Tahoma", 11, FontStyle.Regular);
Chart.JS.Settings.Add("legend.defaultEntry.events_click", "js:monthClick");
Chart.YAxis.DefaultTick.Label.Text = "";
Chart.YAxis.Line.Visible = false;
Chart.ChartArea.ClearColors();
Chart.DefaultElement.SmartLabel.Padding = 3;
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;
Chart.DefaultElement.ShowValue = true;
Chart.DefaultElement.ToolTip = "";
Chart.DefaultElement.Color = Color.White;
Chart.DefaultElement.SmartLabel.Text = "<b>%name</b><br><chart:sparkline width=94 height=68 align=center verticalAlign=bottom data=%subvalueList axisMarker=30 colors=#039be5 min=24 max=38>";
Chart.LegendBox.ClearColors();
Chart.TitleBox.ClearColors();
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.Palette = new Color[] { }; //prevent adding default DNC Palette
// Default Point Event
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick");
Chart.JS.Settings.Add("defaultPoint.states_hover.color", "'#e3f2fd'");
Chart.JS.Settings.Add("palette_colorBar_visible", "false");
Chart.JS.Settings.Add("defaultSeries_pointSelection", "true");
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "callbackFunc";
Chart.JS.Data = "../../data/resources/electricLoad_2018.csv";
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "";//disable tooltip
Chart.JS.Calendar.DefaultEmptyElement.LegendEntry.Visible = false;
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = true;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
#monthLabel {
font-size: 20px;
font-family: arial;
max-width: 710px;
margin: 0px auto;
background-color: #0288d1;
color: white;
font-weight: bold;
padding: 15px;
text-align: center;
}
</style>
<script type="text/javascript">
function monthClick(series) {
document.getElementById('monthLabel').innerText = series.replaceTokens('{%date:MMMM}') + ' 2018'
}
var myJSC;
function callbackFunc(chart) {
myJSC = chart;
}
function pointClick(chartRef) {
var c = myJSC || chartRef;
setTimeout(function () {
var series = [];
var dates = [];
var data = [];
c.series().points({ selected: true }).each(function (point) {
var str = JSC.formatDate(point.tokenValue('%date'), 'm');
var pointData = point.tokenValue('%subvalueList');
dates.push(str);
data.push(pointData);
})
for (var i = 0; i < data.length; i++) {
var points = {
mapTo: 'x,y',
data: changeData(data[i])
}
series.push({ name: dates[i], points: points });
}
selectedDaysChart.options({ series: series });
}, 100);
}
</script>
</head>
<body>
<div style="max-width: 740px; margin: 0px auto; font-family: arial;">
<p>Select a month below. Click multiple days (Holding CTRL) to compare them.</p>
</div>
<div id="monthLabel">January 2018</div>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 740px; height: 680px; margin: 0px auto;" />
<div id='selectedDaysChart' style="width: 740px; height: 400px; margin: 0px auto;"></div>
<script type="text/javascript">
selectedDaysChart = initCharts([]);
function initCharts(series) {
var result = JSC.chart('selectedDaysChart', {
type: 'line spline',
palette: ['#039be5', '#f4511e', '#f9a825', '#00c853', '#8e24aa', '#eeff41', '#f06292', '#bf360c', '#2e7d32', '#1a237e'],
defaultBox_boxVisible: false,
axisToZoom: 'x',
legend: {
template: '%name',
position: 'top',
horizontalSpacing: 29
},
xAxis: {
scale_type: 'time',
crosshair_enabled: true,
formatString: 't',
line_color: '#cfd8dc',
defaultTick: {
line_color: '#cfd8dc',
gridLine_color: '#cfd8dc',
label: { color: '#78909C' }
}
},
yAxis: {
alternateGridFill: 'none',
formatString: 'n',
line_color: '#cfd8dc',
label_text: 'Killowatts',
defaultTick: {
line_color: '#cfd8dc',
gridLine_color: '#cfd8dc',
label: { color: '#78909C' }
},
markers: [
{
value: 30,
line_width: 2,
legendEntry_visible: false
}
]
},
defaultTooltip_label_text: '%points',
defaultPoint: {
marker: { type: 'circle', color: 'none', outline_width: 0 },
tooltip: '%icon <span style="width:80px;"> %seriesName</span> <b>{%yValue:n1}kW</b>'
},
toolbar: { items: { export: { visible: false } } },
defaultSeries: { states_hover_line_width: 2, },
series: series
});
return result;
}
function changeData(data) {
if (!data) { return null; }
else {
var lines = data.split(',');
var time = [];
var result = [];
for (var i = 0; i < lines.length; i++) {
time.push(new Date(2018, 0, 1, i, 0, 0, 0).getTime());
result.push(time[i] + ',' + lines[i])
}
data = result.join('\n');
return data;
}
}
</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)
' This sample demonstrates Calendar heatmap with microcharts and details chart based on csv data.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Size = "740x680"
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend 'show full legend on top without Title
Chart.LegendBox.Template = "%name"
Chart.LegendBox.DefaultEntry.LabelStyle.Color = Color.FromArgb(2, 136, 209)
Chart.LegendBox.DefaultEntry.LabelStyle.Font = New Font("Tahoma", 11, FontStyle.Regular)
Chart.JS.Settings.Add("legend.defaultEntry.events_click", "js:monthClick")
Chart.YAxis.DefaultTick.Label.Text = ""
Chart.YAxis.Line.Visible = False
Chart.ChartArea.ClearColors()
Chart.DefaultElement.SmartLabel.Padding = 3
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near
Chart.DefaultElement.ShowValue = True
Chart.DefaultElement.ToolTip = ""
Chart.DefaultElement.Color = Color.White
Chart.DefaultElement.SmartLabel.Text = "<b>%name</b><br><chart:sparkline width=94 height=68 align=center verticalAlign=bottom data=%subvalueList axisMarker=30 colors=#039be5 min=24 max=38>"
Chart.LegendBox.ClearColors()
Chart.TitleBox.ClearColors()
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.Palette = New Color() { } 'prevent adding default DNC Palette
' Default Point Event
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick")
Chart.JS.Settings.Add("defaultPoint.states_hover.color", "'#e3f2fd'")
Chart.JS.Settings.Add("palette_colorBar_visible", "false")
Chart.JS.Settings.Add("defaultSeries_pointSelection", "true")
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Data = "../../data/resources/electricLoad_2018.csv"
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "" 'disable tooltip
Chart.JS.Calendar.DefaultEmptyElement.LegendEntry.Visible = False
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
#monthLabel {
font-size: 20px;
font-family: arial;
max-width: 710px;
margin: 0px auto;
background-color: #0288d1;
color: white;
font-weight: bold;
padding: 15px;
text-align: center;
}
</style>
<script type="text/javascript">
function monthClick(series) {
document.getElementById('monthLabel').innerText = series.replaceTokens('{%date:MMMM}') + ' 2018'
}
function pointClick(chartRef) {
var c = myJSC || chartRef;
setTimeout(function () {
var series = [];
var dates = [];
var data = [];
c.series().points({ selected: true }).each(function (point) {
var str = JSC.formatDate(point.tokenValue('%date'), 'm');
var pointData = point.tokenValue('%subvalueList');
dates.push(str);
data.push(pointData);
})
for (var i = 0; i < data.length; i++) {
var points = {
mapTo: 'x,y',
data: changeData(data[i])
}
series.push({ name: dates[i], points: points });
}
selectedDaysChart.options({ series: series });
}, 100);
}
</script>
</head>
<body>
<div style="max-width: 740px; margin: 0px auto; font-family: arial;">
<p>Select a month below. Click multiple days (Holding CTRL) to compare them.</p>
</div>
<div id="monthLabel">January 2018</div>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 740px; height: 680px; margin: 0px auto;" />
<div id='selectedDaysChart' style="width: 740px; height: 400px; margin: 0px auto;"></div>
<script type="text/javascript">
selectedDaysChart = initCharts([]);
function initCharts(series) {
var result = JSC.chart('selectedDaysChart', {
type: 'line spline',
palette: ['#039be5', '#f4511e', '#f9a825', '#00c853', '#8e24aa', '#eeff41', '#f06292', '#bf360c', '#2e7d32', '#1a237e'],
defaultBox_boxVisible: false,
axisToZoom: 'x',
legend: {
template: '%name',
position: 'top',
horizontalSpacing: 29
},
xAxis: {
scale_type: 'time',
crosshair_enabled: true,
formatString: 't',
line_color: '#cfd8dc',
defaultTick: {
line_color: '#cfd8dc',
gridLine_color: '#cfd8dc',
label: { color: '#78909C' }
}
},
yAxis: {
alternateGridFill: 'none',
formatString: 'n',
line_color: '#cfd8dc',
label_text: 'Killowatts',
defaultTick: {
line_color: '#cfd8dc',
gridLine_color: '#cfd8dc',
label: { color: '#78909C' }
},
markers: [
{
value: 30,
line_width: 2,
legendEntry_visible: false
}
]
},
defaultTooltip_label_text: '%points',
defaultPoint: {
marker: { type: 'circle', color: 'none', outline_width: 0 },
tooltip: '%icon <span style="width:80px;"> %seriesName</span> <b>{%yValue:n1}kW</b>'
},
toolbar: { items: { export: { visible: false } } },
defaultSeries: { states_hover_line_width: 2, },
series: series
});
return result;
}
function changeData(data) {
if (!data) { return null; }
else {
var lines = data.split(',');
var time = [];
var result = [];
for (var i = 0; i < lines.length; i++) {
time.push(new Date(2018, 0, 1, i, 0, 0, 0).getTime());
result.push(time[i] + ',' + lines[i])
}
data = result.join('\n');
return data;
}
}
</script>
</body>
</html>
- Sample FilenameJsCalendarDetails.aspx
- Version9.2
- Uses DatabaseNo