JS Calendar Zoom
Demonstrates zooming calendar chart.
<%@ 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 zooming calendar chart.
Chart.Type = ChartType.Calendar;
Chart.Width = 800;
Chart.Height = 240;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.TitleBox.Label.Text = "Activity steps taken every 30 minutes";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
Chart.TitleBox.ClearColors();
Chart.TitleBox.Orientation = dotnetCHARTING.Orientation.Top;
//JS settings
Chart.JS.Enabled = true;
Chart.JS.Data = "../../data/resources/step-data-by-minute.csv";
Chart.JS.Calendar.Type = JsOptions.CalendarView.Week30Min;
Chart.JS.ControlID = "myJSC";
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
//Highlight lunch time and add legend entry.
LegendEntry lg = new LegendEntry();
lg.Name = "Lunch time";
Chart.LegendBox.ExtraEntries.Add(lg);
Chart.JS.Settings.Add("legend.customEntries.0.icon.outline_color", "#8D6E63");
Chart.JS.Settings.Add("highlights", "[]");
Chart.JS.Settings.Add("highlights.0.pattern.hour", "14");
Chart.JS.Settings.Add("highlights.0.pattern.weekday", "[1, 2, 3, 4, 5]");
Chart.JS.Settings.Add("highlights.0.outline_color", "#8D6E63");
Chart.JS.Settings.Add("chartArea_clipContent", "true");
Chart.DefaultElement.ToolTip = "{%date:date g}<br><b>%zValue steps</b>";
Chart.LegendBox.Template = "%icon %name";
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#ffebe0"), ColorTranslator.FromHtml("#ffcdb2"), ColorTranslator.FromHtml("#ffb4a2"), ColorTranslator.FromHtml("#e5989b"), ColorTranslator.FromHtml("#b5838d"), ColorTranslator.FromHtml("#6d6875") };
Chart.LegendBox.ClearColors();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script>
function changeZoom(val) {
// Each cell in the calendar chart starts and ends at .5 with intervals of 1.
// For example a numeric range of a cell can be [.5, 1.5]
if (val.checked) {
myJSC.axes('y').zoom(0.5, 5.5);
myJSC.axes('x').zoom(19.5, 38.5);
} else {
myJSC.axes('y').zoom(-0.5, 6.5);
myJSC.axes('x').zoom(-0.5, 47.5);
}
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
<div>
<label style="font-family: Arial; font-size: small;">
<input type="checkbox" name="checkbox" onchange="changeZoom(this)" value="value">Zoom to working hours</label>
</div>
</div>
</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 zooming calendar chart.
Chart.Type = ChartType.Calendar
Chart.Width = 800
Chart.Height = 240
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.TitleBox.Label.Text = "Activity steps taken every 30 minutes"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.TitleBox.Orientation = dotnetCHARTING.Orientation.Top
'JS settings
Chart.JS.Enabled = True
Chart.JS.Data = "../../data/resources/step-data-by-minute.csv"
Chart.JS.Calendar.Type = JsOptions.CalendarView.Week30Min
Chart.JS.ControlID = "myJSC"
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
'Highlight lunch time and add legend entry.
Dim lg As LegendEntry = New LegendEntry()
lg.Name = "Lunch time"
Chart.LegendBox.ExtraEntries.Add(lg)
Chart.JS.Settings.Add("legend.customEntries.0.icon.outline_color", "#8D6E63")
Chart.JS.Settings.Add("highlights", "[]")
Chart.JS.Settings.Add("highlights.0.pattern.hour", "14")
Chart.JS.Settings.Add("highlights.0.pattern.weekday", "[1, 2, 3, 4, 5]")
Chart.JS.Settings.Add("highlights.0.outline_color", "#8D6E63")
Chart.JS.Settings.Add("chartArea_clipContent", "true")
Chart.DefaultElement.ToolTip = "{%date:date g}<br><b>%zValue steps</b>"
Chart.LegendBox.Template = "%icon %name"
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.Palette = New Color() { ColorTranslator.FromHtml("#ffebe0"), ColorTranslator.FromHtml("#ffcdb2"), ColorTranslator.FromHtml("#ffb4a2"), ColorTranslator.FromHtml("#e5989b"), ColorTranslator.FromHtml("#b5838d"), ColorTranslator.FromHtml("#6d6875") }
Chart.LegendBox.ClearColors()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script>
function changeZoom(val) {
// Each cell in the calendar chart starts and ends at .5 with intervals of 1.
// For example a numeric range of a cell can be [.5, 1.5]
if (val.checked) {
myJSC.axes('y').zoom(0.5, 5.5);
myJSC.axes('x').zoom(19.5, 38.5);
} else {
myJSC.axes('y').zoom(-0.5, 6.5);
myJSC.axes('x').zoom(-0.5, 47.5);
}
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
<div>
<label style="font-family: Arial; font-size: small;">
<input type="checkbox" name="checkbox" onchange="changeZoom(this)" value="value">Zoom to working hours</label>
</div>
</div>
</body>
</html>
Previous