Gallery

Gallery > Calendar Charts

JS Calendar Micro Gauge

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 = "<b>Last Year</b>";
Chart.TitleBox.Label.Text = "Car Sales vs Goal";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
Chart.TitleBox.ClearColors();
Chart.ChartArea.ClearColors();
//JS settings
Chart.JS.Enabled = true;
Chart.JS.Data = "./../../data/resources/CarSales_2020.csv";
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.DefaultEdgeElement.SmartLabel.Text = "";
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "";
Chart.JS.Calendar.DefaultEmptyElement.ToolTip = "";
Chart.JS.Calendar.DefaultEmptyElement.LegendEntry.Visible = false;
Chart.JS.Calendar.DefaultEmptyElement.Outline.Visible = false;
Chart.JS.Calendar.DefaultEmptyElement.ShowValue = true;
Chart.JS.Calendar.DefaultEmptyElement.HatchColor = Color.Transparent;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Settings.Add("defaultPoint_opacity", "0.00001");
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.YAxis.Line.Visible = false;
Chart.YAxis.DefaultTick.Label.Text = "";
Chart.ChartArea.Padding = 10;
Chart.DefaultElement.FocusGlow.Width = 0;
Chart.DefaultElement.SmartLabel.Text = "js:function(p){return makeLabels(p);}";
Chart.DefaultElement.SmartLabel.Color = ColorTranslator.FromHtml("#424242");
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[] { ColorTranslator.FromHtml("#d73027"), ColorTranslator.FromHtml("#f46d43"), ColorTranslator.FromHtml("#fdae61"), ColorTranslator.FromHtml("#fee08b"), ColorTranslator.FromHtml("#d9ef8b"), ColorTranslator.FromHtml("#a6d96a"), ColorTranslator.FromHtml("#66bd63"), ColorTranslator.FromHtml("#1a9850") };
Chart.LegendBox.ClearColors();

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
function makeLabels(p) {
var salesGoal = 8;
// The circle circular gauge is created with a pie with two points, one with a color and a gray one.
// On top a circle icon to clip the middle, and a centered label on top of that.
// The <absolute> tag allows stacking items this way.
if (p.replaceTokens('%zValue') < salesGoal) {
return (
'<span style="align:right; color:#757575; font-size:11px">%name</span><br>' +
'<absolute><chart pie data=' +
p.replaceTokens('%zValue') +
',' +
(salesGoal - p.replaceTokens('%zValue')) +
' size=42 colors=,' +
p.replaceTokens('%color') +
',#F5F5F5 align=center verticalAlign=middle>' +
'<icon name=system/default/circle size=30 color=white margin_left=10 align=center verticalAlign=middle><span style="width:50px; align:center;"><b>%zValue</b></span></absolute>'
);
} else {
return (
'<span style="align:right; color:#757575; font-size:11px">%name</span><br>' +
'<absolute><chart pie data=' +
p.replaceTokens('%zValue') +
',1 size=42 colors=,' +
p.replaceTokens('%color') +
',' +
p.replaceTokens('%color') +
' align=center verticalAlign=middle>' +
'<icon name=system/default/circle size=30 color=white margin_left=10 align=center verticalAlign=middle><span style="width:50px; align:center;"><b>%zValue</b></span></absolute>'
);
}
}
</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 = "<b>Last Year</b>"
Chart.TitleBox.Label.Text = "Car Sales vs Goal"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.ChartArea.ClearColors()
'JS settings
Chart.JS.Enabled = True
Chart.JS.Data = "./../../data/resources/CarSales_2020.csv"
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.DefaultEdgeElement.SmartLabel.Text = ""
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = ""
Chart.JS.Calendar.DefaultEmptyElement.ToolTip = ""
Chart.JS.Calendar.DefaultEmptyElement.LegendEntry.Visible = False
Chart.JS.Calendar.DefaultEmptyElement.Outline.Visible = False
Chart.JS.Calendar.DefaultEmptyElement.ShowValue = True
Chart.JS.Calendar.DefaultEmptyElement.HatchColor = Color.Transparent
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Settings.Add("defaultPoint_opacity", "0.00001")
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.YAxis.Line.Visible = False
Chart.YAxis.DefaultTick.Label.Text = ""
Chart.ChartArea.Padding = 10
Chart.DefaultElement.FocusGlow.Width = 0
Chart.DefaultElement.SmartLabel.Text = "js:function(p){return makeLabels(p);}"
Chart.DefaultElement.SmartLabel.Color = ColorTranslator.FromHtml("#424242")
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() { ColorTranslator.FromHtml("#d73027"), ColorTranslator.FromHtml("#f46d43"), ColorTranslator.FromHtml("#fdae61"), ColorTranslator.FromHtml("#fee08b"), ColorTranslator.FromHtml("#d9ef8b"), ColorTranslator.FromHtml("#a6d96a"), ColorTranslator.FromHtml("#66bd63"), ColorTranslator.FromHtml("#1a9850") }
Chart.LegendBox.ClearColors()

End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
function makeLabels(p) {
var salesGoal = 8;
// The circle circular gauge is created with a pie with two points, one with a color and a gray one.
// On top a circle icon to clip the middle, and a centered label on top of that.
// The <absolute> tag allows stacking items this way.
if (p.replaceTokens('%zValue') < salesGoal) {
return (
'<span style="align:right; color:#757575; font-size:11px">%name</span><br>' +
'<absolute><chart pie data=' +
p.replaceTokens('%zValue') +
',' +
(salesGoal - p.replaceTokens('%zValue')) +
' size=42 colors=,' +
p.replaceTokens('%color') +
',#F5F5F5 align=center verticalAlign=middle>' +
'<icon name=system/default/circle size=30 color=white margin_left=10 align=center verticalAlign=middle><span style="width:50px; align:center;"><b>%zValue</b></span></absolute>'
);
} else {
return (
'<span style="align:right; color:#757575; font-size:11px">%name</span><br>' +
'<absolute><chart pie data=' +
p.replaceTokens('%zValue') +
',1 size=42 colors=,' +
p.replaceTokens('%color') +
',' +
p.replaceTokens('%color') +
' align=center verticalAlign=middle>' +
'<icon name=system/default/circle size=30 color=white margin_left=10 align=center verticalAlign=middle><span style="width:50px; align:center;"><b>%zValue</b></span></absolute>'
);
}
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 500px; height: 400px; margin: 0px auto;" />
</body>
</html>

Sample FilenameJsCalendarMicroGauge.aspx
Version10.1
Uses DatabaseNo

JS Charting

Gallery

JS Calendar Micro Gauge