Gallery
PreviousJS Calendar Sea Temps
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Outputcache Duration = "1000" Varybyparam = "none"%>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates a calendar based dashboard using JavaScript charts.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Size = "780x430";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "Sea Temperature (Celcius) January 2009";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Regular);
Chart.TitleBox.Position = TitleBoxPosition.Left;
Annotation an = new Annotation("Click cells below for details.");
an.Position = new Point(8, 50);
an.Label.Font = new Font("Tahoma", 10, FontStyle.Regular);
an.ClearColors();
Chart.Annotations.Add(an);
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''");
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick");
Chart.JS.Settings.Add("legend.defaultEntry.events.click", "js:entryClick");
Chart.YAxis.DefaultTick.Label.Text = "";
Chart.ChartArea.ClearColors();
Chart.DefaultElement.SmartLabel.Padding = 3;
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;
Chart.DefaultElement.ShowValue = true;
Chart.DefaultElement.ToolTip = "";
Chart.LegendBox.Template = "%name %value";
Chart.LegendBox.Header.Label.Text = "Celcius (Average)<br>Click to select";
Chart.TitleBox.ClearColors();
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.Palette = new Color[] { };//prevent setting DNC default palette
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "updateChartCB";
Chart.JS.Calendar.StartDate = new DateTime(2009, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(2009, 12, 31);
Chart.JS.Data = "./../../data/resources/WaveBuoyNetwork.csv";
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.Calculation = Calculation.Average;
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "";
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Settings.Add("yAxis_alternateGridFill", "none");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
/*CSS*/
.header {
font-family: sans-serif;
font-size: 18px;
margin-left: 20px;
background-color: #eaeaea;
padding: 5px;
width: 732px;
}
</style>
</head>
<body>
<script type="text/javascript">
var myJSC;
function updateChartCB(ch) { myJSC = ch; };
function pointClick() {
var pointDate = new Date(this.tokenValue('%date')), dateRange = dayRange(pointDate);
viewMode = 'day';
updateBottomHeader(dateRange);
highlightDay(pointDate);
renderWaveChart(dateRange);
renderLineChart(dateRange);
}
function entryClick() {
if (!this.target.tokenValue) {
return;
}
var dateRange = monthRange(this.target.tokenValue('%date'));
viewMode = 'month';
this.chart.options({ title_label_text: 'Sea Temperature (Celcius)' + ' ' + JSC.formatDate(dateRange[0], 'Y') })
updateBottomHeader(dateRange);
renderLineChart(dateRange);
renderWaveChart(dateRange);
}
</script>
<table style="width: 780px; margin: 0px auto;">
<tr>
<td colspan="2">
<dnc:Chart ID="Chart" runat="server" Style="max-width: 740px; margin: 0px auto;" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="bottomSectionHeader" class="header"></div>
</td>
</tr>
<tr>
<td style="width: 340px;">
<div id="chartDiv2" style="max-width: 340px; height: 250px; margin: 0px auto;">
</div>
</td>
<td style="width: 440px;">
<div id="chartDivL" style="max-width: 440px; height: 250px; margin: 0px auto;">
</div>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
var initialDate = '1/1/2009';
var chart2 = undefined, chartL = undefined, data, parsedData,
dataBySet = { waveHeight: [], peakPeriod: [], upcrossPeriod: [], seaTemps: [] }, viewMode = 'month';
function addOneDay(date) {
var d = toDate(date);
return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1).getTime();
}
function toDate(d) { return new Date(d); }
function isInRange(range, val) { return val >= range[0] && val < range[1] }
function monthRange(date) {
var start = toDate(date);
start = new Date(start.getFullYear(), start.getMonth(), 1);
var end = new Date(start.getFullYear(), start.getMonth() + 1, 1).getTime() - 1;
return [start.getTime(), end];
}
function dayRange(date) {
var start = toDate(date);
return [start, addOneDay(date) - 1];
}
function highlightDay(date) {
if (viewMode === 'day') {
var pattern = myJSC.highlights('cphl');
if (!pattern) {
myJSC.highlights.add({ id: 'cphl', pattern: { date: date }, outline: { width: 2, color: '#5c5c5c', dashStyle: 'dash' } })
} else { pattern.options({ pattern: { date: date } }) }
}
}
function highlightHour(date) {
var xAx = chartL.axes('x');
var marker = xAx.markers('hl');
if (!marker) {
xAx.markers.add({ id: 'hl', value: date, legendEntry_visible: false })
} else { marker.options({ value: date }) }
}
function updateBottomHeader(dateRange) {
var el = document.getElementById('bottomSectionHeader');
el.innerText = 'Wave height and Peak/Upcross periods for '
+ JSC.formatDate(dateRange[0], viewMode === 'day' ? 'd' : 'Y');
}
function getTemplateConfig() {
return {
title_label_style: { fontSize: 14 },
defaultBox_boxVisible: false,
animation: { duration: 0 },
yAxis_alternateGridFill: 'none',
toolbar_items_export_visible: false
}
}
function renderWaveChart(dateRange) {
var cfg = getChartConfig2();
var title = 'Significant Wave Height (cm)';
var type = viewMode === 'month' ? 'calendar month solid' : 'calendar day30min solid';
setTimeout(execUpdate, 5)
function execUpdate() {
var data = cullData('waveHeight', dateRange);
var viewIsDay = viewMode === 'day';
if (!chart2) {
cfg.title_label_text = title;
cfg.type = type;
cfg.data = data;
chart2 = new JSC.chart('chartDiv2', cfg);
} else {
chart2.options({
type: type,
data: data,
title_label_text: title,
defaultPoint_label_visible: viewIsDay ? false : true,
})
}
}
function pointHover() {
var point = this;
highlightHour(point.tokenValue('%date'))
}
function getChartConfig2() {
return {
debug: false,
type: 'calendar solid',
defaultBox_boxVisible: false,
template: getTemplateConfig(),
legend: {},
palette: {
colorsValueRange: [0, 405],
colors: ['#0000E3', '#0047FF', '#00ABFF', '#0FFFEF', '#43FFBB', '#73FF8B', '#A7FF57', '#FFEF00', '#FF8B00', '#FF5700', '#FF2300', '#ED0000', '#830000']
},
calendar: {
defaultEmptyPoint_label_text: '',
calculation: 'average'
},
defaultSeries: { legendEntry_visible: false },
defaultPoint: {
events_mouseOver: pointHover,
label: {
autoHide: false,
verticalAlign: 'top'
}
},
toolbar_items_export_visible: false
}
}
}
function renderLineChart(dateRange) {
var cfg;
//Allow other charts to render first
setTimeout(execUpdate, 15);
function execUpdate() {
if (!chartL) {
cfg = getLineChartConfig(dateRange);
chartL = new JSC.chart('chartDivL', cfg);
} else {
if (viewMode === 'day') {
chartL.axes('x').zoom(dateRange[0], dateRange[1]);
} else {
cfg = getLineChartConfig(dateRange);
var series = cfg.series;
chartL.axes('x').zoom(dateRange[0], dateRange[1], false);
chartL.series(series[0].name).options({ points: series[0].points }, false);
chartL.series(series[1].name).options({ points: series[1].points }, true);
}
}
}
function getLineChartConfig(dateRange) {
return {
debug: false,
type: 'line',
legend: { position: 'top', template: '%icon %name' },
template: getTemplateConfig(),
xAxis_scale: { type: 'time', zoomLimit: 1000 * 60 },
yAxis_label_text: 'Seconds',
defaultPoint_marker_visible: false,
defaultSeries: { states: { hover: { line_width: 1 } } },
series: genLineSeries()
};
function genLineSeries() {
var columns = 'Peak Period,Upcross Period'.split(',');
var series = columns.map(function (colName) {
return { name: colName, points: [] };
});
series[0].points = cullData('peakPeriod', dateRange);
series[1].points = cullData('upcrossPeriod', dateRange);
return series;
}
}
}
function cullData(setName, dateRange) {
dateRange = dateRange.map(toDate);
var set = dataBySet[setName], ret = [];
for (var i = 0; i < set.length; i++) {
var row = set[i];
if (isInRange(dateRange, row[0])) { ret.push(row); /* If row is past*/ } else if (ret.length) { break; }
}
return ret;
}
function loadData(cb) {
JSC.fetch('./../../data/resources/WaveBuoyNetwork.csv')
.then(function (response) { return response.text(); })
.then(function (csv) {
parsedData = JSC.parseCsv(csv);
cb(parsedData.data);
})
.catch(function (ex) { console.error(ex) });
}
loadData(function (rows) {
var dateRange = monthRange(initialDate);
data = rows;
dataBySet.waveHeight = rows.map(function (row) { return [row[0], (row[4])] });
dataBySet.seaTemps = rows.map(function (row) { return [row[0], (row[5])] });
dataBySet.upcrossPeriod = rows.map(function (row) { return [row[0], (row[3])] });
dataBySet.peakPeriod = rows.map(function (row) { return [row[0], (row[1])] });
updateChart(function () {
renderWaveChart(dateRange);
renderLineChart(dateRange);
});
updateBottomHeader(dateRange);
});
function updateChart(cb) {
cb();
}
</script>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Outputcache Duration = "1000" Varybyparam = "none"%>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates a calendar based dashboard using JavaScript charts.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Size = "780x430"
Chart.Debug = False
Chart.TitleBox.Label.Text = "Sea Temperature (Celcius) January 2009"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Regular)
Chart.TitleBox.Position = TitleBoxPosition.Left
Dim an As Annotation = New Annotation("Click cells below for details.")
an.Position = New Point(8, 50)
an.Label.Font = New Font("Tahoma", 10, FontStyle.Regular)
an.ClearColors()
Chart.Annotations.Add(an)
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''")
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick")
Chart.JS.Settings.Add("legend.defaultEntry.events.click", "js:entryClick")
Chart.YAxis.DefaultTick.Label.Text = ""
Chart.ChartArea.ClearColors()
Chart.DefaultElement.SmartLabel.Padding = 3
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near
Chart.DefaultElement.ShowValue = True
Chart.DefaultElement.ToolTip = ""
Chart.LegendBox.Template = "%name %value"
Chart.LegendBox.Header.Label.Text = "Celcius (Average)<br>Click to select"
Chart.TitleBox.ClearColors()
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.Palette = New Color() { } 'prevent setting DNC default palette
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Calendar.StartDate = New DateTime(2009, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(2009, 12, 31)
Chart.JS.Data = "./../../data/resources/WaveBuoyNetwork.csv"
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.Calculation = Calculation.Average
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = ""
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Settings.Add("yAxis_alternateGridFill", "none")
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">/*CSS*/
.header{
font-family: sans-serif;
font-size: 18px;
margin-left: 20px;
background-color: #eaeaea;
padding: 5px;
width: 732px;
}</style>
</head>
<body>
<script>
function pointClick(p) {
var pointDate = new Date(this.tokenValue('%date')), dateRange = dayRange(pointDate);
viewMode = 'day';
updateBottomHeader(dateRange);
highlightDay(pointDate);
renderWaveChart(dateRange);
renderLineChart(dateRange);
}
function entryClick() {
if(!this.target.tokenValue){
return;
}
var dateRange = monthRange(this.target.tokenValue('%date'));
viewMode = 'month';
this.chart.options({ title_label_text: 'Sea Temperature (Celcius)' + ' ' + JSC.formatDate(dateRange[0], 'Y') })
updateBottomHeader(dateRange);
renderLineChart(dateRange);
renderWaveChart(dateRange);
}
</script>
<table style="width:780px;margin:0px auto;" >
<tr>
<td colSpan=2 >
<dnc:Chart ID="Chart" runat="server" style="max-width:740px;margin:0px auto;" />
</td>
</tr>
<tr>
<td colSpan=2 >
<div id="bottomSectionHeader" class="header"></div>
</td>
</tr>
<tr>
<td style="width:340px;">
<div id="chartDiv2" style="max-width: 340px;height: 250px;margin: 0px auto;">
</div>
</td>
<td style="width:440px;">
<div id="chartDivL" style="max-width: 440px;height: 250px;margin: 0px auto;">
</div>
</td>
</tr>
</table>
</body>
<script>
var initialDate = '1/1/2009';
var chart2=undefined,chartL=undefined,data,parsedData,
dataBySet={waveHeight:[],peakPeriod:[],upcrossPeriod:[],seaTemps:[]},viewMode='month';
function addOneDay(date) {
var d = toDate(date);
return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1).getTime();
}
function toDate(d){return new Date(d);}
function isInRange(range, val) { return val >= range[0] && val < range[1]}
function monthRange(date) {
var start = toDate(date);
start = new Date(start.getFullYear(), start.getMonth(), 1);
var end = new Date(start.getFullYear(), start.getMonth() + 1, 1).getTime() - 1;
return [start.getTime(), end];
}
function dayRange(date) {
var start = toDate(date);
return [start, addOneDay(date) - 1];
}
function highlightDay(date) {
if (viewMode === 'day') {
var pattern = myJSC.highlights('cphl');
if (!pattern) {
myJSC.highlights.add({ id: 'cphl', pattern: { date: date }, outline: { width: 2, color: '#5c5c5c',dashStyle:'dash' } })
} else { pattern.options({ pattern: { date: date } }) }
}
}
function highlightHour(date) {
var xAx = chartL.axes('x');
var marker = xAx.markers('hl');
if (!marker) {
xAx.markers.add({ id: 'hl', value: date, legendEntry_visible: false })
} else { marker.options({ value: date }) }
}
function updateBottomHeader(dateRange) {
var el = document.getElementById('bottomSectionHeader');
el.innerText = 'Wave height and Peak/Upcross periods for '
+ JSC.formatDate(dateRange[0], viewMode === 'day' ? 'd' : 'Y');
}
function getTemplateConfig() {
return {
title_label_style: { fontSize: 14 },
defaultBox_boxVisible: false,
animation: { duration: 0 },
yAxis_alternateGridFill: 'none',
toolbar_items_export_visible: false
}
}
function renderWaveChart(dateRange) {
var cfg = getChartConfig2();
var title = 'Significant Wave Height (cm)';
var type = viewMode === 'month' ? 'calendar month solid' : 'calendar day30min solid';
setTimeout(execUpdate, 5)
function execUpdate() {
var data = cullData('waveHeight', dateRange);
var viewIsDay = viewMode === 'day';
if (!chart2) {
cfg.title_label_text = title;
cfg.type = type;
cfg.data = data;
chart2 = new JSC.chart('chartDiv2', cfg);
} else {
chart2.options({
type: type,
data: data,
title_label_text: title,
defaultPoint_label_visible: viewIsDay ? false : true,
})
}
}
function pointHover() {
var point = this;
highlightHour(point.tokenValue('%date'))
}
function getChartConfig2() {
return {
debug: false,
type: 'calendar solid',
defaultBox_boxVisible: false,
template: getTemplateConfig(),
legend: { },
palette: {
colorsValueRange: [0, 405],
colors: ['#0000E3', '#0047FF', '#00ABFF', '#0FFFEF', '#43FFBB', '#73FF8B', '#A7FF57', '#FFEF00', '#FF8B00', '#FF5700', '#FF2300', '#ED0000', '#830000']
},
calendar: {
defaultEmptyPoint_label_text: '',
calculation: 'average'
},
defaultSeries: { legendEntry_visible: false },
defaultPoint: {
events_mouseOver: pointHover,
label: {
autoHide: false,
verticalAlign: 'top'
}
},
toolbar_items_export_visible: false
}
}
}
function renderLineChart(dateRange) {
var cfg;
//Allow other charts to render first
setTimeout(execUpdate, 15);
function execUpdate() {
if (!chartL) {
cfg = getLineChartConfig(dateRange);
chartL = new JSC.chart('chartDivL', cfg);
} else {
if (viewMode === 'day') {
chartL.axes('x').zoom(dateRange[0], dateRange[1]);
} else {
cfg = getLineChartConfig(dateRange);
var series = cfg.series;
chartL.axes('x').zoom(dateRange[0], dateRange[1], false);
chartL.series(series[0].name).options({ points: series[0].points }, false);
chartL.series(series[1].name).options({ points: series[1].points }, true);
}
}
}
function getLineChartConfig(dateRange) {
return {
debug: false,
type: 'line',
legend: { position: 'top', template: '%icon %name' },
template: getTemplateConfig(),
xAxis_scale: { type: 'time', zoomLimit: 1000 * 60 },
yAxis_label_text:'Seconds',
defaultPoint_marker_visible: false,
defaultSeries:{ states:{hover:{line_width:1}} },
series: genLineSeries()
};
function genLineSeries() {
var columns = 'Peak Period,Upcross Period'.split(',');
var series = columns.map(function(colName) {
return { name: colName, points: [] };
});
series[0].points = cullData('peakPeriod', dateRange);
series[1].points = cullData('upcrossPeriod', dateRange);
return series;
function toPoints(rows) {
return rows.map(function(row) { return { x: row[0], y: row[1] } })
}
}
}
}
function cullData(setName,dateRange) {
dateRange = dateRange.map(toDate);
var set = dataBySet[setName], ret = [];
for (var i = 0; i < set.length; i++) {
var row = set[i];
if (isInRange(dateRange, row[0])) { ret.push(row); /* If row is past*/ } else if (ret.length) { break; }
}
return ret;
}
function loadData(cb) {
JSC.fetch('./../../data/resources/WaveBuoyNetwork.csv')
.then(function(response) { return response.text(); })
.then(function(csv) {
parsedData = JSC.parseCsv(csv);
cb(parsedData.data);
})
.catch(function(ex) {console.error(ex)});
}
loadData(function(rows) {
var dateRange = monthRange(initialDate);
data = rows;
dataBySet.waveHeight = rows.map(function(row) { return [row[0], (row[4])] });
dataBySet.seaTemps = rows.map(function(row) { return [row[0], (row[5])] });
dataBySet.upcrossPeriod = rows.map(function(row) { return [row[0], (row[3])] });
dataBySet.peakPeriod = rows.map(function(row) { return [row[0], (row[1])] });
updateChart(function () {
renderWaveChart(dateRange);
renderLineChart(dateRange);
});
updateBottomHeader(dateRange);
});
function updateChart(cb) {
cb();
}
</script>
</html>
- Sample FilenameJsCalendarSeaTemps.aspx
- Version9.1
- Uses DatabaseNo