Gallery
PreviousJS Calendar Range Picker Data
<%@ 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 a fully functional calendar date range picker with blackout dates loaded from csv file.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Size = "300X360";
Chart.Debug = false;
Chart.DefaultElement.ToolTip = "";//disable tooltip
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
Chart.LegendBox.ClearColors();
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.Calendar.StartDate = new DateTime(2020, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(2020, 12, 31);
Chart.JS.Data = "./../../data/resources/stepData20.csv";
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;
Chart.JS.Settings.Add("toolbar_items_backward_position", "top left");
Chart.JS.Settings.Add("toolbar_items_backward_fill", "white");
Chart.JS.Settings.Add("toolbar_items_backward_icon_name", "material/hardware/keyboard-arrow-left");
Chart.JS.Settings.Add("toolbar_items_backward_events_click", "js:function(){var d = new Date(curDate);zoomTo(d.setMonth(d.getMonth() - 1));}");
Chart.JS.Settings.Add("toolbar_items_forward_position", "top right");
Chart.JS.Settings.Add("toolbar_items_forward_fill", "white");
Chart.JS.Settings.Add("toolbar_items_forward_icon_name", "material/hardware/keyboard-arrow-right");
Chart.JS.Settings.Add("toolbar_items_forward_events_click", "js:function(){var d = new Date(curDate);zoomTo(d.setMonth(d.getMonth() + 1));}");
Chart.JS.Settings.Add("toolbar_items_reset_events_click", "js:function(){reset();}");
Chart.JS.Settings.Add("toolbar_items_reset_boxVisible", "false");
Chart.JS.Settings.Add("toolbar_items_reset_visible", "false");
Chart.JS.Settings.Add("toolbar_items_reset_label_text", "Clear Dates");
Chart.JS.Settings.Add("toolbar_items_reset_label_color", "#e34e2f");
Chart.JS.Settings.Add("toolbar_items_reset_position", "bottom right");
Chart.JS.Settings.Add("toolbar_items_reset_margin_bottom", "3");
// Default Point Event
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick");
Chart.JS.Settings.Add("defaultPoint.events_mouseOver", "js:pointOver");
Chart.DefaultElement.Outline.Width = 0;
Chart.JS.Settings.Add("defaultPoint.states_hover.color", "'#cfd8dc'");
Chart.JS.Settings.Add("palette_colorBar_axis_scale_interval", "5000");
Annotation an = new Annotation();
an.Label.Text = "js:formatTitle(dateRange[0])";
an.Position = new Point(105,0);
an.Background.Color = Color.White;
an.ClearColors();
Chart.Annotations.Add(an);
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;//vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.OutsideTop;// StringAlignment.Near;
Chart.ChartArea.ClearColors();
Chart.ChartArea.Padding = 10;
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">/*CSS*/
.inputEl{
width: 112px;
display: inline-block;
font-family: arial;
font-size: 14px;
background-color: #f7f7f7;
border: 0px solid gray;
border-radius: 4px;
height: 22px;
}
.inputsWrapper {
margin-left:32px;
height:23px;
border: 1px solid gray;
border-radius:5px;
padding: 5px;
width: 275px;
}
#picker{
display: none;
margin-top: 5px;
margin-left: -9px;
z-index: 1;
position: absolute;
width: 368px;
height: 371px;
background-color: white;
-webkit-box-shadow: 3px 3px 20px 3px #ccc;
-moz-box-shadow: 3px 3px 20px 3px #ccc;
box-shadow: 3px 3px 20px 3px #ccc;
}
#pickerContainer{
width:350px;
margin-left:10px;
padding: 9px;
}
.opened{ background-color: #ffffff; height: 35px;}
.activeEl{ background-color: #c6d4ff;}</style>
<script type="text/javascript">
/**
* Date Utils
*/
function toDate(v) { return new Date(v); }
function formatTitle(date) {
return '<icon verticalAlign=middle name=material/maps/directions-walk outerShape=circle size=27 padding=5 fill="#36A6E6"> '
+ new Date(date).toLocaleDateString('en', { month: 'long', year: 'numeric' });
}
function addOneDay(date) {
var d = toDate(date);
return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1).getTime();
}
function formatDate(d) { return JSC.formatDate(d, 'd') }
/**
* Picked dates utils
*/
function reset() {
datesPicked = { start: undefined, end: undefined };
picking = 'start';
highlightInput(elementRefs.startDate);
updateInputs();
highlightDates();
updateReset();
}
function pickedDates() {
var dates = [];
datesPicked.start && dates.push(datesPicked.start);
datesPicked.end && dates.push(datesPicked.end);
return dates;
}
function pickedCount() {
var count = 0;
datesPicked.end && count++;
datesPicked.start && count++;
return count;
}
/**
* Chart event handlers
*/
function pointClick() {
var point = this;
var clickedDate = point.tokenValue('%date');
if (picking === 'end') {
datesPicked.end = clickedDate;
if (pickedCount() < 2) {
highlightInput(elementRefs.startDate);
picking = 'start';
} else { picking = 'none'; highlightDates(); }
} else {
datesPicked.start = clickedDate;
highlightInput(elementRefs.endDate);
highlightDates();
picking = 'end';
}
updateInputs();
if (picking == 'none') {
//Clear highligh
highlightInput();
closePicker();
}
updateReset();
if(datesPicked.start && datesPicked.end)
updateLineChart();
//Disable any default point click behavior.
return false;
}
function pointOver() {
var point = this;
var pointDate = point.tokenValue('%date');
//If another point is hovered while only one date is selected, update the highlight
if (pickedCount() === 1) { highlightDates(pointDate); }
}
var titleAnnotation = undefined,
lineChart = undefined,
dateRange = [new Date('1/1/2020'), new Date('12/31/2020')],
curDate = dateRange[0],
picking;
</script>
</head>
<body>
<div id="pickerContainer" >
<div class="inputsWrapper" >
<input id="startDate" autocomplete="off" class="inputEl" type="text" value="Check in" onkeyup="updateDatePicker(this)" onclick="inputClicked(this)" />
<input id="endDate" autocomplete="off" class="inputEl" style="margin-left:30px" type="text" value="Check out" onkeyup="updateDatePicker(this)" onclick="inputClicked(this)"/>
</div>
<div id="picker">
<dnc:Chart ID="Chart" runat="server"></dnc:Chart>
</div>
<div>
</div>
</div>
<div id="dataChart">
<div id="chartDiv2" style="max-width: 740px;height:400px;"></div>
</div>
<script type="text/javascript" src="temp/JSC/icons/material/maps/directions-walk.js"></script>
<script type="text/javascript" src="temp/JSC/icons/material/hardware/keyboard-arrow-left.js"></script>
<script type="text/javascript" src="temp/JSC/icons/material/hardware/keyboard-arrow-right.js"></script>
<script type="text/javascript">
//Note: html elements must be rendered before making references..
var elementRefs = {
startDate:document.getElementById('startDate'),
endDate:document.getElementById('endDate'),
pickerContainer:document.getElementById('pickerContainer'),
picker: document.getElementById('picker'),
dataChart: document.getElementById('dataChart'),
},
datesPicked = {start:undefined,end:undefined},
selectorColor='#5264cb',
//Blackout dates loaded from csv file.
tempData = undefined;
initPicker();
function initPicker() {
JSC.fetch('./../../data/resources/stepData20.csv').then(function (response) {
if (response.ok) {
response.text().then(function (text) {
var parsedData = JSC.parseCsv(text);
return parsedData.data;
}).then(function (data) {
tempData = data;//use for chart creation
});
} else { console.error('Problem loading csv data.') }
});
elementRefs.pickerContainer.addEventListener('click', function (ev) { ev.stopPropagation(); });
window.addEventListener('click', function () { highlightInput(); closePicker(); });
}
/**
* Update chart functions
*/
function getHighlightCfg(hoverDate) {
var cfg, dateVal, dates = pickedDates(),
isFinalRange = dates.length === 2;
//Include hoverDate in highlight range
hoverDate && dates.push(hoverDate) && dates.sort();
cfg = {
id: 'selection',
fill: isFinalRange ? selectorColor : '#c3d2ff',
outline: { color: selectorColor, dashStyle: isFinalRange ? 'solid' : 'dash' }
};
//Highlight date or range
dateVal = dates.length === 1 ? dates[0] : { range: dates }
if (dates.length) { cfg.pattern = { date: dateVal }; }
return cfg;
}
function highlightDates(hoverDate) {
var hl, //dates = selectedDates,
updateOptions = hoverDate ? { animation: { duration: 0 } } : {};
hl = myJSC.highlights('selection');
if (pickedCount() || hoverDate) {
let config = getHighlightCfg(hoverDate);
if (hl) { hl.options(config, updateOptions); } else {
myJSC.highlights.add(config, updateOptions);
}
} else if (hl) { hl.remove(); }
}
function zoomTo(d) {
var d = new Date(d);
if (d >= dateRange[0] && d <= dateRange[1] && d.getMonth() != curDate.getMonth()) {
titleAnnotation = titleAnnotation || myJSC.annotations(0);
titleAnnotation.options({ label_text: formatTitle(d) }, { animation: { duration: 0 } });
myJSC.zoom(d);
curDate = d;
}
}
function updateReset() {
myJSC.uiItems('reset').options({ visible: !!pickedCount() });
if (elementRefs.dataChart && elementRefs.dataChart.style.display == "block")
elementRefs.dataChart.style.display = "none";
}
/**
* Update HTML Elements
*/
function updateInputs() {
elementRefs.startDate.value = datesPicked.start ? formatDate(datesPicked.start) : 'Check in';
elementRefs.endDate.value = datesPicked.end ? formatDate(datesPicked.end) : 'Check out';
}
function updateDatePicker(el) {
if (el === startDate) {
datesPicked.start = new Date(elementRefs.startDate.value).getTime();
} else {
datesPicked.end = new Date(elementRefs.endDate.value).getTime();
}
highlightDates();
}
function inputClicked(el) {
clickedInput = el;
picking = el === elementRefs.startDate ? 'start' : 'end';
highlightInput(el);
openPicker();
//Zoom chart to date in clicked text input.
zoomTo(el.value);
}
function highlightInput(el) {
if (el !== elementRefs.startDate) {
elementRefs.startDate.classList.remove('activeEl');
}
if (el !== elementRefs.endDate) {
elementRefs.endDate.classList.remove('activeEl');
}
if (el) { el.classList.add('activeEl'); }
}
function openPicker() {
elementRefs.picker.style.display = "block";
elementRefs.pickerContainer.classList.add('opened');
}
function closePicker() {
elementRefs.picker && (elementRefs.picker.style.display = "none");
elementRefs.pickerContainer.classList.remove('opened');
}
function updateLineChart() {
if (elementRefs.dataChart)
elementRefs.dataChart.style.display = "block";
if (!lineChart) {
lineChart = new JSC.Chart('chartDiv2', {
type: 'line',
animation_duration: 800,
xAxis_scale_type: 'time',
legend: {
boxVisible: false,
position: 'inside top'
},
defaultSeries: {
legendEntry_value: 'Total: %sum',
line_width: 2, states_hover_line_width: 2,
defaultPoint: { marker_visible: false, },
},
series: [{}]
});
}
var values = cullData();
lineChart.series(0).options({ points: values.map(function (row) { return { x: row[0], y: row[1] } }) })
function cullData() {
return tempData.filter(function (row) {
var rowDate = toDate(row[0]);
return rowDate >= datesPicked.start && rowDate <= datesPicked.end
});
}
}
</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 a fully functional calendar date range picker with blackout dates loaded from csv file.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Size = "300X360"
Chart.Debug = False
Chart.DefaultElement.ToolTip = "" 'disable tooltip
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom
Chart.LegendBox.ClearColors()
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Calendar.StartDate = New DateTime(2020, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(2020, 12, 31)
Chart.JS.Data = "./../../data/resources/stepData20.csv"
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
Chart.JS.Settings.Add("toolbar_items_backward_position", "top left")
Chart.JS.Settings.Add("toolbar_items_backward_fill", "white")
Chart.JS.Settings.Add("toolbar_items_backward_icon_name", "material/hardware/keyboard-arrow-left")
Chart.JS.Settings.Add("toolbar_items_backward_events_click", "js:function(){var d = new Date(curDate);zoomTo(d.setMonth(d.getMonth() - 1));}")
Chart.JS.Settings.Add("toolbar_items_forward_position", "top right")
Chart.JS.Settings.Add("toolbar_items_forward_fill", "white")
Chart.JS.Settings.Add("toolbar_items_forward_icon_name", "material/hardware/keyboard-arrow-right")
Chart.JS.Settings.Add("toolbar_items_forward_events_click", "js:function(){var d = new Date(curDate);zoomTo(d.setMonth(d.getMonth() + 1));}")
Chart.JS.Settings.Add("toolbar_items_reset_events_click", "js:function(){reset();}")
Chart.JS.Settings.Add("toolbar_items_reset_boxVisible", "false")
Chart.JS.Settings.Add("toolbar_items_reset_visible", "false")
Chart.JS.Settings.Add("toolbar_items_reset_label_text", "Clear Dates")
Chart.JS.Settings.Add("toolbar_items_reset_label_color", "#e34e2f")
Chart.JS.Settings.Add("toolbar_items_reset_position", "bottom right")
Chart.JS.Settings.Add("toolbar_items_reset_margin_bottom", "3")
' Default Point Event
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick")
Chart.JS.Settings.Add("defaultPoint.events_mouseOver", "js:pointOver")
Chart.DefaultElement.Outline.Width = 0
Chart.JS.Settings.Add("defaultPoint.states_hover.color", "'#cfd8dc'")
Chart.JS.Settings.Add("palette_colorBar_axis_scale_interval", "5000")
Dim an As Annotation = New Annotation()
an.Label.Text = "js:formatTitle(dateRange[0])"
an.Position = New Point(105,0)
an.Background.Color = Color.White
an.ClearColors()
Chart.Annotations.Add(an)
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near 'vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.OutsideTop ' StringAlignment.Near;
Chart.ChartArea.ClearColors()
Chart.ChartArea.Padding = 10
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">/*CSS*/
.inputEl{
width: 112px;
display: inline-block;
font-family: arial;
font-size: 14px;
background-color: #f7f7f7;
border: 0px solid gray;
border-radius: 4px;
height: 22px;
}
.inputsWrapper {
margin-left:32px;
height:23px;
border: 1px solid gray;
border-radius:5px;
padding: 5px;
width: 275px;
}
#picker{
display: none;
margin-top: 5px;
margin-left: -9px;
z-index: 1;
position: absolute;
width: 368px;
height: 371px;
background-color: white;
-webkit-box-shadow: 3px 3px 20px 3px #ccc;
-moz-box-shadow: 3px 3px 20px 3px #ccc;
box-shadow: 3px 3px 20px 3px #ccc;
}
#pickerContainer{
width:350px;
margin-left:10px;
padding: 9px;
}
.opened{ background-color: #ffffff; height: 35px;}
.activeEl{ background-color: #c6d4ff;}</style>
<script type="text/javascript">
/**
* Date Utils
*/
function toDate(v) { return new Date(v); }
function formatTitle(date) {
return '<icon verticalAlign=middle name=material/maps/directions-walk outerShape=circle size=27 padding=5 fill="#36A6E6"> '
+ new Date(date).toLocaleDateString('en', { month: 'long', year: 'numeric' });
}
function addOneDay(date) {
var d = toDate(date);
return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1).getTime();
}
function formatDate(d) { return JSC.formatDate(d, 'd') }
/**
* Picked dates utils
*/
function reset() {
datesPicked = { start: undefined, end: undefined };
picking = 'start';
highlightInput(elementRefs.startDate);
updateInputs();
highlightDates();
updateReset();
}
function pickedDates() {
var dates = [];
datesPicked.start && dates.push(datesPicked.start);
datesPicked.end && dates.push(datesPicked.end);
return dates;
}
function pickedCount() {
var count = 0;
datesPicked.end && count++;
datesPicked.start && count++;
return count;
}
/**
* Chart event handlers
*/
function pointClick() {
var point = this;
var clickedDate = point.tokenValue('%date');
if (picking === 'end') {
datesPicked.end = clickedDate;
if (pickedCount() < 2) {
highlightInput(elementRefs.startDate);
picking = 'start';
} else { picking = 'none'; highlightDates(); }
} else {
datesPicked.start = clickedDate;
highlightInput(elementRefs.endDate);
highlightDates();
picking = 'end';
}
updateInputs();
if (picking == 'none') {
//Clear highligh
highlightInput();
closePicker();
}
updateReset();
if(datesPicked.start && datesPicked.end)
updateLineChart();
//Disable any default point click behavior.
return false;
}
function pointOver() {
var point = this;
var pointDate = point.tokenValue('%date');
//If another point is hovered while only one date is selected, update the highlight
if (pickedCount() === 1) { highlightDates(pointDate); }
}
var titleAnnotation = undefined,
lineChart = undefined,
dateRange = [new Date('1/1/2020'), new Date('12/31/2020')],
curDate = dateRange[0],
picking;
</script>
</head>
<body>
<div id="pickerContainer" >
<div class="inputsWrapper" >
<input id="startDate" autocomplete="off" class="inputEl" type="text" value="Check in" onkeyup="updateDatePicker(this)" onclick="inputClicked(this)" />
<input id="endDate" autocomplete="off" class="inputEl" style="margin-left:30px" type="text" value="Check out" onkeyup="updateDatePicker(this)" onclick="inputClicked(this)"/>
</div>
<div id="picker">
<dnc:Chart ID="Chart" runat="server"></dnc:Chart>
</div>
<div>
</div>
</div>
<div id="dataChart">
<div id="chartDiv2" style="max-width: 740px;height:400px;"></div>
</div>
<script type="text/javascript" src="temp/JSC/icons/material/maps/directions-walk.js"></script>
<script type="text/javascript" src="temp/JSC/icons/material/hardware/keyboard-arrow-left.js"></script>
<script type="text/javascript" src="temp/JSC/icons/material/hardware/keyboard-arrow-right.js"></script>
<script type="text/javascript">
//Note: html elements must be rendered before making references..
var elementRefs = {
startDate:document.getElementById('startDate'),
endDate:document.getElementById('endDate'),
pickerContainer:document.getElementById('pickerContainer'),
picker: document.getElementById('picker'),
dataChart: document.getElementById('dataChart'),
},
datesPicked = {start:undefined,end:undefined},
selectorColor='#5264cb',
//Blackout dates loaded from csv file.
tempData = undefined;
initPicker();
function initPicker() {
JSC.fetch('./../../data/resources/stepData20.csv').then(function (response) {
if (response.ok) {
response.text().then(function (text) {
var parsedData = JSC.parseCsv(text);
return parsedData.data;
}).then(function (data) {
tempData = data;//use for chart creation
});
} else { console.error('Problem loading csv data.') }
});
elementRefs.pickerContainer.addEventListener('click', function (ev) { ev.stopPropagation(); });
window.addEventListener('click', function () { highlightInput(); closePicker(); });
}
/**
* Update chart functions
*/
function getHighlightCfg(hoverDate) {
var cfg, dateVal, dates = pickedDates(),
isFinalRange = dates.length === 2;
//Include hoverDate in highlight range
hoverDate && dates.push(hoverDate) && dates.sort();
cfg = {
id: 'selection',
fill: isFinalRange ? selectorColor : '#c3d2ff',
outline: { color: selectorColor, dashStyle: isFinalRange ? 'solid' : 'dash' }
};
//Highlight date or range
dateVal = dates.length === 1 ? dates[0] : { range: dates }
if (dates.length) { cfg.pattern = { date: dateVal }; }
return cfg;
}
function highlightDates(hoverDate) {
var hl, //dates = selectedDates,
updateOptions = hoverDate ? { animation: { duration: 0 } } : {};
hl = myJSC.highlights('selection');
if (pickedCount() || hoverDate) {
let config = getHighlightCfg(hoverDate);
if (hl) { hl.options(config, updateOptions); } else {
myJSC.highlights.add(config, updateOptions);
}
} else if (hl) { hl.remove(); }
}
function zoomTo(d) {
var d = new Date(d);
if (d >= dateRange[0] && d <= dateRange[1] && d.getMonth() != curDate.getMonth()) {
titleAnnotation = titleAnnotation || myJSC.annotations(0);
titleAnnotation.options({ label_text: formatTitle(d) }, { animation: { duration: 0 } });
myJSC.zoom(d);
curDate = d;
}
}
function updateReset() {
myJSC.uiItems('reset').options({ visible: !!pickedCount() });
if (elementRefs.dataChart && elementRefs.dataChart.style.display == "block")
elementRefs.dataChart.style.display = "none";
}
/**
* Update HTML Elements
*/
function updateInputs() {
elementRefs.startDate.value = datesPicked.start ? formatDate(datesPicked.start) : 'Check in';
elementRefs.endDate.value = datesPicked.end ? formatDate(datesPicked.end) : 'Check out';
}
function updateDatePicker(el) {
if (el === startDate) {
datesPicked.start = new Date(elementRefs.startDate.value).getTime();
} else {
datesPicked.end = new Date(elementRefs.endDate.value).getTime();
}
highlightDates();
}
function inputClicked(el) {
clickedInput = el;
picking = el === elementRefs.startDate ? 'start' : 'end';
highlightInput(el);
openPicker();
//Zoom chart to date in clicked text input.
zoomTo(el.value);
}
function highlightInput(el) {
if (el !== elementRefs.startDate) {
elementRefs.startDate.classList.remove('activeEl');
}
if (el !== elementRefs.endDate) {
elementRefs.endDate.classList.remove('activeEl');
}
if (el) { el.classList.add('activeEl'); }
}
function openPicker() {
elementRefs.picker.style.display = "block";
elementRefs.pickerContainer.classList.add('opened');
}
function closePicker() {
elementRefs.picker && (elementRefs.picker.style.display = "none");
elementRefs.pickerContainer.classList.remove('opened');
}
function updateLineChart() {
if (elementRefs.dataChart)
elementRefs.dataChart.style.display = "block";
if (!lineChart) {
lineChart = new JSC.Chart('chartDiv2', {
type: 'line',
animation_duration: 800,
xAxis_scale_type: 'time',
legend: {
boxVisible: false,
position: 'inside top'
},
defaultSeries: {
legendEntry_value: 'Total: %sum',
line_width: 2, states_hover_line_width: 2,
defaultPoint: { marker_visible: false, },
},
series: [{}]
});
}
var values = cullData();
lineChart.series(0).options({ points: values.map(function (row) { return { x: row[0], y: row[1] } }) })
function cullData() {
return tempData.filter(function (row) {
var rowDate = toDate(row[0]);
return rowDate >= datesPicked.start && rowDate <= datesPicked.end
});
}
}
</script>
</body>
</html>
- Sample FilenameJsCalendarRangePickerData.aspx
- Version9.1
- Uses DatabaseNo