Gallery

Gallery > Calendar Charts

JS Calendar Tick Charts

Demonstrates daily step data loaded from csv with a customized smartPalette.

Download Show C# Code Show VB Code

<%@ 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)
{
// Demonstrates daily step data loaded from csv with a customized smartPalette.
Chart.Type = ChartType.Calendar;
Chart.Width = 280;
Chart.Height = 940;
Chart.TempDirectory = "temp";
Chart.Debug = false;

Chart.TitleBox.Label.Text = "Daily Steps 2017";
Chart.TitleBox.Label.Font = new Font("Tahoma", 9, FontStyle.Bold);
Chart.TitleBox.ClearColors();
Chart.ShowDateInTitle = false;

Chart.DefaultElement.ToolTip = "<b>%name</b><br> %zValue Steps";
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.LegendBox.ClearColors();
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#f7fcfd"),ColorTranslator.FromHtml("#e0ecf4"),ColorTranslator.FromHtml("#bfd3e6"),ColorTranslator.FromHtml("#9ebcda"),ColorTranslator.FromHtml("#8c96c6"),ColorTranslator.FromHtml("#8c6bb1"),ColorTranslator.FromHtml("#88419d"),ColorTranslator.FromHtml("#810f7c"),ColorTranslator.FromHtml("#4d004b")};
Chart.JS.Settings.Add("palette_colorBar_axis_scale_interval", "5000");
Chart.JS.Settings.Add("series.0.points.0.date.day", "1");
Chart.JS.Settings.Add("series.0.points.0.label.text", "'{%date:date MM}'");
Chart.JS.Settings.Add("series.0.points.0.label.padding", "false");

//JS settings
Chart.JS.Enabled = true;
Chart.JS.Data = "./../../data/resources/stepData17.csv";
Chart.JS.ControlID = "myJSC";
Chart.JS.Calendar.StartDate = new DateTime(2017, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(2017, 12, 31);
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year;
Chart.JS.Calendar.Horizontal = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Right;
Chart.XAxis.TimeInterval = TimeInterval.Day;

DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/stepData17.csv";
de.DataFields = "xAxis=Date,yAxis=Actual";
de.DateGrouping = TimeInterval.Week;
de.StartDayOfWeek = DayOfWeek.Sunday;
SeriesCollection sc = de.GetSeries();
Chart.YAxis.ExtraTicks.Add(getCustomTicksY(sc));

DataEngine de2 = new DataEngine();
de2.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/stepData17.csv";
de2.DataFields = "xAxis=Date,yAxis=Actual";
de2.DateGrouping = TimeInterval.Weeks;
de2.StartDayOfWeek = DayOfWeek.Sunday;
SeriesCollection sc2 = de2.GetSeries();
Chart.XAxis.ExtraTicks.Add(getCustomTicksX(sc2));

}
AxisTickCollection getCustomTicksX(SeriesCollection sc)
{
AxisTickCollection atc = new AxisTickCollection();
ElementCollection el = sc[0].Elements;
double maxValue = el[0].YValue;
for (int i = 1; i < el.Count; i++)
{
if (maxValue < el[i].YValue)
maxValue = el[i].YValue;
}
for(int i=0;i < el.Count;i++)
{
AxisTick at = new AxisTick();
at.Value = i;
at.Label.Text = "<chart bar data=" +el[i].YValue+" tooltip='" + el[i].YValue+" Steps' max="+maxValue+" height=13 width=60 radius=3 colors=#8c96c6,#f5f5f5>";
atc.Add(at);
}
return atc;
}
AxisTickCollection getCustomTicksY(SeriesCollection sc)
{
string [] weekdayNames = { "S", "M", "T", "W", "T", "F", "S" };
AxisTickCollection atc = new AxisTickCollection();
ElementCollection el = sc[0].Elements;
double maxValue = el[0].YValue;
for (int i = 1; i < el.Count; i++)
{
if (maxValue < el[i].YValue)
maxValue = el[i].YValue;
}
for(int i=0;i < el.Count;i++)
{
AxisTick at = new AxisTick();
at.Label.Text = weekdayNames[i] + "<br><chart bar data=" +el[i].YValue+" tooltip='" + el[i].YValue+" Steps' max="+maxValue+" rotate=-90 radius=3 colors=#8c96c6,#f5f5f5 height=13 width=60 alt=TT>";
atc.Add(at);
}
return atc;
}
</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:400px;margin:0px auto;"/>

</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)
' Demonstrates daily step data loaded from csv with a customized smartPalette.
Chart.Type = ChartType.Calendar
Chart.Width = 280
Chart.Height = 940
Chart.TempDirectory = "temp"
Chart.Debug = False

Chart.TitleBox.Label.Text = "Daily Steps 2017"
Chart.TitleBox.Label.Font = New Font("Tahoma", 9, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.ShowDateInTitle = False

Chart.DefaultElement.ToolTip = "<b>%name</b><br> %zValue Steps"
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.LegendBox.ClearColors()
Chart.Palette = New Color() { ColorTranslator.FromHtml("#f7fcfd"),ColorTranslator.FromHtml("#e0ecf4"),ColorTranslator.FromHtml("#bfd3e6"),ColorTranslator.FromHtml("#9ebcda"),ColorTranslator.FromHtml("#8c96c6"),ColorTranslator.FromHtml("#8c6bb1"),ColorTranslator.FromHtml("#88419d"),ColorTranslator.FromHtml("#810f7c"),ColorTranslator.FromHtml("#4d004b")}
Chart.JS.Settings.Add("palette_colorBar_axis_scale_interval", "5000")
Chart.JS.Settings.Add("series.0.points.0.date.day", "1")
Chart.JS.Settings.Add("series.0.points.0.label.text", "'{%date:date MM}'")
Chart.JS.Settings.Add("series.0.points.0.label.padding", "false")

'JS settings
Chart.JS.Enabled = True
Chart.JS.Data = "./../../data/resources/stepData17.csv"
Chart.JS.ControlID = "myJSC"
Chart.JS.Calendar.StartDate = New DateTime(2017, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(2017, 12, 31)
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year
Chart.JS.Calendar.Horizontal = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Right
Chart.XAxis.TimeInterval = TimeInterval.Day

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/stepData17.csv"
de.DataFields = "xAxis=Date,yAxis=Actual"
de.DateGrouping = TimeInterval.Week
de.StartDayOfWeek = DayOfWeek.Sunday
Dim sc As SeriesCollection = de.GetSeries()
Chart.YAxis.ExtraTicks.Add(getCustomTicksY(sc))

Dim de2 As DataEngine = New DataEngine()
de2.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/stepData17.csv"
de2.DataFields = "xAxis=Date,yAxis=Actual"
de2.DateGrouping = TimeInterval.Weeks
de2.StartDayOfWeek = DayOfWeek.Sunday
Dim sc2 As SeriesCollection = de2.GetSeries()
Chart.XAxis.ExtraTicks.Add(getCustomTicksX(sc2))

End Sub
Function getCustomTicksX(ByVal sc As SeriesCollection) As AxisTickCollection
Dim atc As AxisTickCollection = New AxisTickCollection()
Dim el As ElementCollection = sc(0).Elements
Dim maxValue As Double = el(0).YValue
For i As Integer = 1 To el.Count - 1
If maxValue < el(i).YValue Then
maxValue = el(i).YValue
End If
Next i
For i As Integer = 0 To el.Count - 1
Dim at As AxisTick = New AxisTick()
at.Value = i
at.Label.Text = "<chart bar data=" & el(i).YValue & " tooltip='" & el(i).YValue & " Steps' max=" & maxValue & " height=13 width=60 radius=3 colors=#8c96c6,#f5f5f5>"
atc.Add(at)
Next i
Return atc
End Function
Function getCustomTicksY(ByVal sc As SeriesCollection) As AxisTickCollection
Dim weekdayNames As String() = { "S", "M", "T", "W", "T", "F", "S" }
Dim atc As AxisTickCollection = New AxisTickCollection()
Dim el As ElementCollection = sc(0).Elements
Dim maxValue As Double = el(0).YValue
For i As Integer = 1 To el.Count - 1
If maxValue < el(i).YValue Then
maxValue = el(i).YValue
End If
Next i
For i As Integer = 0 To el.Count - 1
Dim at As AxisTick = New AxisTick()
at.Label.Text = weekdayNames(i) & "<br><chart bar data=" & el(i).YValue & " tooltip='" & el(i).YValue & " Steps' max=" & maxValue & " rotate=-90 radius=3 colors=#8c96c6,#f5f5f5 height=13 width=60 alt=TT>"
atc.Add(at)
Next i
Return atc
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:400px;margin:0px auto;"/>

</body>
</html>

Sample FilenameJsCalendarTickCharts.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Calendar Tick Charts