Gallery

Gallery > Calendar Charts

JS Calendar Car Sales

Demonstrates Calendar heatmap chart based on csv data.

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 Calendar heatmap chart based on csv data.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Debug = false;

Chart.LegendBox.Header.Label.Text = "Click to change month";
Chart.DefaultSeries.LegendEntry.Hotspot.Attributes.Custom.Add("click", "js:entryClick");
Chart.TitleBox.Label.Text = "Car Sales January 2020";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
Chart.TitleBox.ClearColors();
Chart.ChartArea.ClearColors();
//JS settings
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "callbackFunc";
Chart.JS.Data = "./../../data/resources/CarSales_2020.csv";
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.DefaultEmptyElement.ToolTip = "<b>{%date:date D}</b><br> 0 cars sold";
Chart.JS.Calendar.DefaultEmptyElement.Transparency = 50;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;

Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.YAxis.Line.Visible = false;
Chart.ChartArea.Padding = 10;
Chart.DefaultElement.ToolTip = "<b>{%date:date D}</b><br> %zValue cars sold";
Chart.DefaultElement.SmartLabel.Padding = 3;
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;
Chart.DefaultElement.ShowValue = true;
Chart.Palette = new Color[] { };
Chart.LegendBox.ClearColors();

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
var entryClick;
function callbackFunc(chart) {
entryClick = function () {
var le = this;
var date = le.legendEntry.target.tokenValue('%date');
chart.options({ title_label_text: 'Car Sales ' + JSC.formatDate(date, 'Y') });
}
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:500px;height: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 Calendar heatmap chart based on csv data.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Debug = False

Chart.LegendBox.Header.Label.Text = "Click to change month"
Chart.DefaultSeries.LegendEntry.Hotspot.Attributes.Custom.Add("click", "js:entryClick")
Chart.TitleBox.Label.Text = "Car Sales January 2020"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.ChartArea.ClearColors()
'JS settings
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Data = "./../../data/resources/CarSales_2020.csv"
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.DefaultEmptyElement.ToolTip = "<b>{%date:date D}</b><br> 0 cars sold"
Chart.JS.Calendar.DefaultEmptyElement.Transparency = 50
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False

Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.YAxis.Line.Visible = False
Chart.ChartArea.Padding = 10
Chart.DefaultElement.ToolTip = "<b>{%date:date D}</b><br> %zValue cars sold"
Chart.DefaultElement.SmartLabel.Padding = 3
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near
Chart.DefaultElement.ShowValue = True
Chart.Palette = New Color() { }
Chart.LegendBox.ClearColors()

End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
function entryClick() {
var le = this;
var date = le.legendEntry.target.tokenValue('%date');
myJSC.options({title_label_text:'Car Sales '+JSC.formatDate(date,'Y')});
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:500px;height:400px;margin:0px auto;"/>
</body>
</html>

Sample FilenameJsCalendarCarSales.aspx
Version9.1
Uses DatabaseNo

JS Charting

Gallery

JS Calendar Car Sales