JS Calendar Week Activity
Demonstrates Csv activity data calendar chart using a customized smartPalette.
<%@ 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 Csv activity data calendar chart using a customized smartPalette.
// Enable JSCharting
Chart.JS.Enabled = true;
// Specify the JS only chart type.
Chart.Type = ChartType.Calendar;
Chart.JS.Calendar.Type = JsOptions.CalendarView.Week30Min;
Chart.JS.Calendar.Calculation = Calculation.Average;
Chart.JS.Data = "./../../data/resources/activityData.csv";
//Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
Chart.Size = "740x250";
Chart.LegendBox.Template = "%name,%icon";
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
Chart.LegendBox.Padding = 2;
Chart.LegendBox.ClearColors();
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.SmartPalette = getSP();
Chart.Palette = new Color[] {Color.FromArgb(0,137,123),Color.FromArgb(224,224,224),Color.FromArgb(255,160,0)};
Chart.XAxis.Interval = 2;
Chart.XAxis.DefaultTick.Label.Text = "js:function(v){return ((v%24)/2).toString()}";
Chart.XAxis.DefaultTick.GridLine.Width = 0;
Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Top;
Chart.XAxis.FormatString = "n0";
Chart.XAxis.ExtraTicks.Add(new AxisTick(0, "js:'<icon name=weather/moon size=18 fill=#14327f><br/>AM'"));
Chart.XAxis.ExtraTicks.Add(new AxisTick(24, "js:'<icon name=weather/sun size=24 fill=#e9b82e><br/>PM'"));
Chart.XAxis.ExtraTicks.Add(new AxisTick(24, "12"));
Chart.ChartArea.ClearColors();
Chart.DefaultSeries.DefaultElement.Outline.Width = 0;
Chart.DefaultElement.ToolTip = "{%date:date f}";
Chart.ShadingEffectMode = ShadingEffectMode.None;
}
SmartPalette getSP()
{
SmartPalette sp = new SmartPalette();
SmartColor sc1 = new SmartColor(Color.FromArgb(3, 155, 229), new ScaleRange(0, .999), ElementValue.ZValue);
sc1.LegendEntry.Name = "Sleep";
SmartColor sc2 = new SmartColor(Color.FromArgb(40, 167, 228), new ScaleRange(1, 1.999), ElementValue.ZValue);
SmartColor sc3 = new SmartColor(Color.FromArgb(77, 178, 227), new ScaleRange(2, 2.999), ElementValue.ZValue);
SmartColor sc4 = new SmartColor(Color.FromArgb(114, 190, 227), new ScaleRange(3, 3.999), ElementValue.ZValue);
SmartColor sc5 = new SmartColor(Color.FromArgb(150, 201, 226), new ScaleRange(4, 4.999), ElementValue.ZValue);
SmartColor sc6 = new SmartColor(Color.FromArgb(187, 213, 225), new ScaleRange(5, 5.999), ElementValue.ZValue);
SmartColor sc7 = new SmartColor(Color.FromArgb(224, 224, 224), new ScaleRange(6, 6.999), ElementValue.ZValue);
sc7.LegendEntry.Name = "Inactive";
SmartColor sc9 = new SmartColor(Color.FromArgb(225, 196, 196), new ScaleRange(7, 7.999), ElementValue.ZValue);
sc9.LegendEntry.Name = "Active";
SmartColor sc10 = new SmartColor(Color.FromArgb(226, 168, 167), new ScaleRange(8, 8.999), ElementValue.ZValue);
SmartColor sc11 = new SmartColor(Color.FromArgb(227, 141, 139), new ScaleRange(9, 9.999), ElementValue.ZValue);
SmartColor sc12 = new SmartColor(Color.FromArgb(227, 113, 110), new ScaleRange(10, 10.999), ElementValue.ZValue);
SmartColor sc13 = new SmartColor(Color.FromArgb(228, 85, 81), new ScaleRange(11, 11.999), ElementValue.ZValue);
SmartColor sc14 = new SmartColor(Color.FromArgb(229, 57, 53), new ScaleRange(12, 12.999), ElementValue.ZValue);
sp.Add("Data", sc1);
sp.Add("Data", sc2);
sp.Add("Data", sc3);
sp.Add("Data", sc4);
sp.Add("Data", sc5);
sp.Add("Data", sc6);
sp.Add("Data", sc7);
sp.Add("Data", sc9);
sp.Add("Data", sc10);
sp.Add("Data", sc11);
sp.Add("Data", sc12);
sp.Add("Data", sc13);
sp.Add("Data", sc14);
return sp;
}
</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:300px;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 Csv activity data calendar chart using a customized smartPalette.
' Enable JSCharting
Chart.JS.Enabled = True
' Specify the JS only chart type.
Chart.Type = ChartType.Calendar
Chart.JS.Calendar.Type = JsOptions.CalendarView.Week30Min
Chart.JS.Calendar.Calculation = Calculation.Average
Chart.JS.Data = "./../../data/resources/activityData.csv"
'Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
Chart.Size = "740x250"
Chart.LegendBox.Template = "%name,%icon"
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom
Chart.LegendBox.Padding = 2
Chart.LegendBox.ClearColors()
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.SmartPalette = getSP()
Chart.Palette = New Color() {Color.FromArgb(0,137,123),Color.FromArgb(224,224,224),Color.FromArgb(255,160,0)}
Chart.XAxis.Interval = 2
Chart.XAxis.DefaultTick.Label.Text = "js:function(v){return ((v%24)/2).toString()}"
Chart.XAxis.DefaultTick.GridLine.Width = 0
Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Top
Chart.XAxis.FormatString = "n0"
Chart.XAxis.ExtraTicks.Add(New AxisTick(0, "js:'<icon name=weather/moon size=18 fill=#14327f><br/>AM'"))
Chart.XAxis.ExtraTicks.Add(New AxisTick(24, "js:'<icon name=weather/sun size=24 fill=#e9b82e><br/>PM'"))
Chart.XAxis.ExtraTicks.Add(New AxisTick(24, "12"))
Chart.ChartArea.ClearColors()
Chart.DefaultSeries.DefaultElement.Outline.Width = 0
Chart.DefaultElement.ToolTip = "{%date:date f}"
Chart.ShadingEffectMode = ShadingEffectMode.None
End Sub
Function getSP() As SmartPalette
Dim sp As SmartPalette = New SmartPalette()
Dim sc1 As SmartColor = New SmartColor(Color.FromArgb(3, 155, 229), New ScaleRange(0,.999), ElementValue.ZValue)
sc1.LegendEntry.Name = "Sleep"
Dim sc2 As SmartColor = New SmartColor(Color.FromArgb(40, 167, 228), New ScaleRange(1, 1.999), ElementValue.ZValue)
Dim sc3 As SmartColor = New SmartColor(Color.FromArgb(77, 178, 227), New ScaleRange(2, 2.999), ElementValue.ZValue)
Dim sc4 As SmartColor = New SmartColor(Color.FromArgb(114, 190, 227), New ScaleRange(3, 3.999), ElementValue.ZValue)
Dim sc5 As SmartColor = New SmartColor(Color.FromArgb(150, 201, 226), New ScaleRange(4, 4.999), ElementValue.ZValue)
Dim sc6 As SmartColor = New SmartColor(Color.FromArgb(187, 213, 225), New ScaleRange(5, 5.999), ElementValue.ZValue)
Dim sc7 As SmartColor = New SmartColor(Color.FromArgb(224, 224, 224), New ScaleRange(6, 6.999), ElementValue.ZValue)
sc7.LegendEntry.Name = "Inactive"
Dim sc9 As SmartColor = New SmartColor(Color.FromArgb(225, 196, 196), New ScaleRange(7, 7.999), ElementValue.ZValue)
sc9.LegendEntry.Name = "Active"
Dim sc10 As SmartColor = New SmartColor(Color.FromArgb(226, 168, 167), New ScaleRange(8, 8.999), ElementValue.ZValue)
Dim sc11 As SmartColor = New SmartColor(Color.FromArgb(227, 141, 139), New ScaleRange(9, 9.999), ElementValue.ZValue)
Dim sc12 As SmartColor = New SmartColor(Color.FromArgb(227, 113, 110), New ScaleRange(10, 10.999), ElementValue.ZValue)
Dim sc13 As SmartColor = New SmartColor(Color.FromArgb(228, 85, 81), New ScaleRange(11, 11.999), ElementValue.ZValue)
Dim sc14 As SmartColor = New SmartColor(Color.FromArgb(229, 57, 53), New ScaleRange(12, 12.999), ElementValue.ZValue)
sp.Add("Data", sc1)
sp.Add("Data", sc2)
sp.Add("Data", sc3)
sp.Add("Data", sc4)
sp.Add("Data", sc5)
sp.Add("Data", sc6)
sp.Add("Data", sc7)
sp.Add("Data", sc9)
sp.Add("Data", sc10)
sp.Add("Data", sc11)
sp.Add("Data", sc12)
sp.Add("Data", sc13)
sp.Add("Data", sc14)
Return sp
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:300px;margin:0px auto;" />
</body>
</html>
Previous