JS Calendar Custom Ticks
Demonstrates Custom ticks on a calendar chart and heatmap value formatting.
<%@ 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 Custom ticks on a calendar chart and heatmap value formatting.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "1:00 AM Cashflow by minute";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Regular);
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Top;
Chart.XAxis.Interval = 1;
Chart.XAxis.Scale = Scale.Range;
Chart.XAxis.DefaultTick.Label.Text = "+:0%value";
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.Data = generateRandomData();
Chart.JS.Calendar.Type = JsOptions.CalendarView.HourMinutes;
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, 1, 0, 0);
DateTime end = new DateTime(2018, 1, 1, 3, 0, 0);
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 / 20;
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 minOfHour = baseDateTime.AddMilliseconds(currentdate).Minute + 1;
double timeOfDayMod = Math.Sin(mapValue(0, 3, 0, 60, minOfHour));
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>
</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 Custom ticks on a calendar chart and heatmap value formatting.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "1:00 AM Cashflow by minute"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Regular)
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Top
Chart.XAxis.Interval = 1
Chart.XAxis.Scale = Scale.Range
Chart.XAxis.DefaultTick.Label.Text = "+:0%value"
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.Data = generateRandomData()
Chart.JS.Calendar.Type = JsOptions.CalendarView.HourMinutes
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, 1, 0, 0)
Dim [end] As DateTime = New DateTime(2018, 1, 1, 3, 0, 0)
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 / 20
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 minOfHour As Double = baseDateTime.AddMilliseconds(currentdate).Minute + 1
Dim timeOfDayMod As Double = Math.Sin(mapValue(0, 3, 0, 60, minOfHour))
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>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:740px;height:400px;margin:0px auto;" />
</body>
</html>
Previous