Gallery
JS Calendar Steps
<%@ 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 = 740;
Chart.Height = 215;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "Daily Steps 2020";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
Chart.TitleBox.ClearColors();
//JS settings
Chart.JS.Enabled = true;
Chart.JS.Data = "./../../data/resources/stepData20.csv";
Chart.JS.Calendar.StartDate = new DateTime(2020, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(2020, 12, 31);
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.ShadingEffectMode = ShadingEffectMode.None;
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.DefaultElement.ToolTip = "<b>%name</b><br> %zValue Steps";
Chart.DefaultSeries.LegendEntry.Value = "Total: %zSum";
Chart.LegendBox.ClearColors();
Chart.JS.Settings.Add("palette_colorBar_axis_scale_interval", "5000");
}
</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;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 = 740
Chart.Height = 215
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "Daily Steps 2020"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
Chart.TitleBox.ClearColors()
'JS settings
Chart.JS.Enabled = True
Chart.JS.Data = "./../../data/resources/stepData20.csv"
Chart.JS.Calendar.StartDate = New DateTime(2020, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(2020, 12, 31)
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.ShadingEffectMode = ShadingEffectMode.None
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.DefaultElement.ToolTip = "<b>%name</b><br> %zValue Steps"
Chart.DefaultSeries.LegendEntry.Value = "Total: %zSum"
Chart.LegendBox.ClearColors()
Chart.JS.Settings.Add("palette_colorBar_axis_scale_interval", "5000")
End Sub
</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;margin:0px auto;"/>
</body>
</html>
- Sample FilenameJsCalendarSteps.aspx
- Version9.1
- Uses DatabaseNo