Gallery
PreviousJS Calendar Range Simple
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Outputcache Duration = "1000" Varybyparam = "none"%>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates a simple date range picker with random heatmap data.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "Simple Date Range Picker";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Regular);
Chart.TitleBox.Position = TitleBoxPosition.Left;
Annotation an = new Annotation("Click two points");
an.Position = new Point(297, 0);
an.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
an.Label.Width = 300;
an.Label.Alignment = StringAlignment.Far;
an.ClearColors();
Chart.Annotations.Add(an);
Chart.JS.Settings.Add("annotations.0.id", "an1");
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''");
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick");
Chart.YAxis.DefaultTick.Label.Text = "";
Chart.YAxis.Label.Text = "January";
Chart.ChartArea.Padding = 10;
Chart.ChartArea.ClearColors();
Chart.DefaultElement.SmartLabel.Padding = 3;
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;
Chart.DefaultElement.ShowValue = true;
Chart.DefaultElement.ToolTip = "";
Chart.LegendBox.ClearColors();
Chart.TitleBox.ClearColors();
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.Palette = new Color[] { }; //prevent adding default DNC Palette
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.Data = generateRandomData();
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
}
DateTime baseDateTime = new DateTime(1969, 12, 31, 16, 0, 0, DateTimeKind.Utc);
ArrayList generateRandomData()
{
DateTime start = new DateTime(2018, 1, 1);
DateTime end = new DateTime(2018, 4, 30);
TimeSpan span = TimeSpan.MinValue;
span = start.Subtract(baseDateTime);
double startNum = span.TotalMilliseconds;
span = end.Subtract(baseDateTime);
double endNum = span.TotalMilliseconds;
ArrayList ret = new ArrayList();
double currentdate= startNum;
int step = 1000 * 60 * 60;// oneHour;
while (currentdate < endNum)
{
double[] p = { currentdate, getRandomValue(currentdate,startNum,endNum) };
ret.Add(p);
currentdate += step;
}
return ret;
}
double getRandomValue(double currentdate, double startNum,double endNum)
{
double yValue = 0;
double hourOfHour = baseDateTime.AddMilliseconds(currentdate).Hour + 1;
double timeOfDayMod = Math.Sin(mapValue(0, 3, 0, 23, hourOfHour));
double mul = Math.Sin(mapValue(0, 4, startNum, endNum, currentdate)) * timeOfDayMod;
Random random = new Random();
double v = random.Next(1, 30);
yValue = v * mul;
return yValue;
}
double mapValue(int toStart,int toEnd,double fromStart,double fromEnd, double value)
{
return toStart + (value - fromStart) / (fromEnd - fromStart) * (toEnd - toStart);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script>
var selectedDates = [], selectorColor='#d2c7ed';
function pointClick() {
var point = this;
var clickedDate = point.tokenValue('%date');
if (selectedDates.length === 2) { selectedDates = []; }
selectedDates.push(clickedDate);
//Allow selecting end date first.
selectedDates.sort();
//Passing this date when count is 1 will remove animation
highlightDates(selectedDates.length === 1 ? clickedDate : undefined);
updateAnnotation();
//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 (selectedDates.length < 2) { highlightDates(pointDate); }
}
function updateAnnotation() {
var ann = myJSC.annotations('an1');
var dates = selectedDates;
var dCountToText = [
'Click two points',
'Click another point',
'Selected Range: ' + dates.map(function(d) { return JSC.formatDate(d, 'd') }).join(' - ')
];
ann.options({ label_text: dCountToText[dates.length] }, {animation:false});
}
function getHighlightCfg(hoverDate) {
var dates = selectedDates.slice(0);
hoverDate && dates.push(hoverDate) && dates.sort();
var isFinalRange = selectedDates.length === 2;
var cfg = {
id: 'selection',
fill: isFinalRange ? selectorColor : 'none',
outline: { color: selectorColor, dashStyle: isFinalRange ? 'solid' : 'dash' }
};
var 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 (dates.length) {
let config = getHighlightCfg(hoverDate);
if (hl) { hl.options(config, updateOptions); } else {
myJSC.highlights.add(config, updateOptions);
}
} else if (hl) { hl.remove(); }
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:740px;height:400px;margin:0px auto;" />
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Outputcache Duration = "1000" Varybyparam = "none"%>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates a simple date range picker with random heatmap data.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "Simple Date Range Picker"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Regular)
Chart.TitleBox.Position = TitleBoxPosition.Left
Dim an As Annotation = New Annotation("Click two points")
an.Position = New Point(297, 0)
an.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
an.Label.Width = 300
an.Label.Alignment = StringAlignment.Far
an.ClearColors()
Chart.Annotations.Add(an)
Chart.JS.Settings.Add("annotations.0.id", "an1")
Chart.JS.Settings.Add("defaultPoint.attributes_events", "''")
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick")
Chart.YAxis.DefaultTick.Label.Text = ""
Chart.YAxis.Label.Text = "January"
Chart.ChartArea.Padding = 10
Chart.ChartArea.ClearColors()
Chart.DefaultElement.SmartLabel.Padding = 3
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near
Chart.DefaultElement.ShowValue = True
Chart.DefaultElement.ToolTip = ""
Chart.LegendBox.ClearColors()
Chart.TitleBox.ClearColors()
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.Palette = New Color() { } 'prevent adding default DNC Palette
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Data = generateRandomData()
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
End Sub
Dim baseDateTime As DateTime = New DateTime(1969, 12, 31, 16, 0, 0, DateTimeKind.Utc)
Function generateRandomData() As ArrayList
Dim start As DateTime = New DateTime(2018, 1, 1)
Dim [end] As DateTime = New DateTime(2018, 4, 30)
Dim span As TimeSpan = TimeSpan.MinValue
span = start.Subtract(baseDateTime)
Dim startNum As Double = span.TotalMilliseconds
span = [end].Subtract(baseDateTime)
Dim endNum As Double = span.TotalMilliseconds
Dim ret As ArrayList = New ArrayList()
Dim currentdate As Double= startNum
Dim [step] As Integer = 1000 * 60 * 60 ' oneHour;
Do While currentdate < endNum
Dim p As Double() = { currentdate, getRandomValue(currentdate,startNum,endNum) }
ret.Add(p)
currentdate += [step]
Loop
Return ret
End Function
Function getRandomValue(ByVal currentdate As Double, ByVal startNum As Double, ByVal endNum As Double) As Double
Dim yValue As Double = 0
Dim hourOfHour As Double = baseDateTime.AddMilliseconds(currentdate).Hour + 1
Dim timeOfDayMod As Double = Math.Sin(mapValue(0, 3, 0, 23, hourOfHour))
Dim mul As Double = Math.Sin(mapValue(0, 4, startNum, endNum, currentdate)) * timeOfDayMod
Dim random As Random = New Random()
Dim v As Double = random.Next(1, 30)
yValue = v * mul
Return yValue
End Function
Function mapValue(ByVal toStart As Integer, ByVal toEnd As Integer, ByVal fromStart As Double, ByVal fromEnd As Double, ByVal value As Double) As Double
Return toStart + (value - fromStart) / (fromEnd - fromStart) * (toEnd - toStart)
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script>
var selectedDates = [], selectorColor='#d2c7ed';
function pointClick() {
var point = this;
var clickedDate = point.tokenValue('%date');
if (selectedDates.length === 2) { selectedDates = []; }
selectedDates.push(clickedDate);
//Allow selecting end date first.
selectedDates.sort();
//Passing this date when count is 1 will remove animation
highlightDates(selectedDates.length === 1 ? clickedDate : undefined);
updateAnnotation();
//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 (selectedDates.length < 2) { highlightDates(pointDate); }
}
function updateAnnotation() {
var ann = myJSC.annotations('an1');
var dates = selectedDates;
var dCountToText = [
'Click two points',
'Click another point',
'Selected Range: ' + dates.map(function(d) { return JSC.formatDate(d, 'd') }).join(' - ')
];
ann.options({ label_text: dCountToText[dates.length] }, {animation:false});
}
function getHighlightCfg(hoverDate) {
var dates = selectedDates.slice(0);
hoverDate && dates.push(hoverDate) && dates.sort();
var isFinalRange = selectedDates.length === 2;
var cfg = {
id: 'selection',
fill: isFinalRange ? selectorColor : 'none',
outline: { color: selectorColor, dashStyle: isFinalRange ? 'solid' : 'dash' }
};
var 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 (dates.length) {
let config = getHighlightCfg(hoverDate);
if (hl) { hl.options(config, updateOptions); } else {
myJSC.highlights.add(config, updateOptions);
}
} else if (hl) { hl.remove(); }
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:740px;height:400px;margin:0px auto;" />
</body>
</html>
- Sample FilenameJsCalendarRangeSimple.aspx
- Version9.1
- Uses DatabaseNo