JS Linear Sleep
Demonstrates using gantt type data on linear gauges.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates using gantt type data on linear gauges.
Chart c = Chart;
c.Debug = true;
c.TempDirectory = "temp";
c.Width = 640;
c.Height = 340;
c.JS.Enabled = true;
c.ChartArea.ClearColors();
c.TitleBox.Label.Font = new Font("Arial", 24);
c.TitleBox.Label.Color = Color.FromArgb(97, 97, 97);
c.TitleBox.ClearColors();
c.XAxis.DefaultTick.Label.Color = Color.FromArgb(117, 117, 117);
c.YAxis.DefaultTick.Label.Color = Color.FromArgb(117, 117, 117);
c.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(217, 217, 217);
c.LegendBox.Visible = false;
c.JS.Buttons.EnableExportButton = false;
c.JS.Buttons.EnablePrintButton = false;
c.Type = ChartType.Gauges;
c.DefaultSeries.GaugeType = GaugeType.Bars;
//Name of the JS function called after chart renders.
c.JS.RenderCallback = "setColors";
c.DefaultElement.Color = Color.FromArgb(108, 159, 251);
c.DefaultElement.ToolTip = "js:tooltipFormatter";
c.YAxis.Orientation = dotnetCHARTING.Orientation.Top;
c.YAxis.ClearValues=true;;
c.YAxis.ExtraTicks.Add(new AxisTick(12,"<icon name=weather/moon size=18 fill=#888987 ><br/>12PM"));
c.YAxis.ExtraTicks.Add(new AxisTick(19,"<icon name=linear/basic/alarm size=22 fill=#888987><br/>7AM"));
c.YAxis.DefaultTick.GridLine.Color = Color.FromArgb(200, 200, 200);
c.YAxis.DefaultTick.GridLine.Width = 2;
c.SeriesCollection.Add(getCSVDataChart3());
}
SeriesCollection getCSVDataChart3()
{
string text = System.IO.File.ReadAllText(HttpContext.Current.Server.MapPath("~/data/resources/sleepData.csv"));
string[] entries = text.Split(new string[] { Environment.NewLine }, StringSplitOptions.None);
SeriesCollection sc = new SeriesCollection();
Series series = new Series();
series.Name = "Monday";
string curSeries = "Monday";
foreach (string entry in entries)
{
string[] values = entry.Split(',');
if (values.Length == 5)
{
if (values[0] != curSeries)
{
sc.Add(series);
series = new Series();
curSeries = series.Name = values[0];
}
Element el = new Element();
el.YValue = double.Parse(values[1]);
el.YValueStart = double.Parse(values[2]);
el.Name = values[3];
el.CustomAttributes.Add("action", values[4]);
series.Elements.Add(el);
}
}
sc.Add(series);
return sc;
}
SeriesCollection getLiveData()
{
DataEngine de = new DataEngine("ConnectionString goes here");
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ....";
return de.GetSeries();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
function setColors(c) {
/*Assign colors based on point attributes.*/
c.series().points(function (p) { return p.options('attributes.ACTION') === 'Awake' }).options({ color: '#faf' }, false);
c.series().points(function (p) { return p.options('attributes.ACTION') === 'Deep Sleep' }).options({ color: '#355fb5' });
}
function tooltipFormatter(point) {
var twoDigit = function (v) {
return ("0" + v).slice(-2);
};
var formatHour = function (v) {
var ampm = v <= 12 ? 'PM' : 'AM',
hour = Math.floor(v) % 12,
min = Math.floor(v % 1 * 60);
return (hour || 12) + ':' + twoDigit(min) + ampm;
};
return '<b>%name ' + '<br/>' + formatHour(point.y[0]) + ' - ' + formatHour(point.y[1]);
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample demonstrates using gantt type data on linear gauges.
Dim c As Chart = Chart
c.Debug = True
c.TempDirectory = "temp"
c.Width = 640
c.Height = 340
c.JS.Enabled = True
c.ChartArea.ClearColors()
c.TitleBox.Label.Font = New Font("Arial", 24)
c.TitleBox.Label.Color = Color.FromArgb(97, 97, 97)
c.TitleBox.ClearColors()
c.XAxis.DefaultTick.Label.Color = Color.FromArgb(117, 117, 117)
c.YAxis.DefaultTick.Label.Color = Color.FromArgb(117, 117, 117)
c.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(217, 217, 217)
c.LegendBox.Visible = False
c.JS.Buttons.EnableExportButton = False
c.JS.Buttons.EnablePrintButton = False
c.Type = ChartType.Gauges
c.DefaultSeries.GaugeType = GaugeType.Bars
'Name of the JS function called after chart renders.
c.JS.RenderCallback = "setColors"
c.DefaultElement.Color = Color.FromArgb(108, 159, 251)
c.DefaultElement.ToolTip = "js:tooltipFormatter"
c.YAxis.Orientation = dotnetCHARTING.Orientation.Top
c.YAxis.ClearValues = True
c.YAxis.ExtraTicks.Add(New AxisTick(12, "<icon name=weather/moon size=18 fill=#888987 ><br/>12PM"))
c.YAxis.ExtraTicks.Add(New AxisTick(19, "<icon name=linear/basic/alarm size=22 fill=#888987><br/>7AM"))
c.YAxis.DefaultTick.GridLine.Color = Color.FromArgb(200, 200, 200)
c.YAxis.DefaultTick.GridLine.Width = 2
c.SeriesCollection.Add(getCSVDataChart3())
End Sub
Function getCSVDataChart3() As SeriesCollection
Dim text As String = System.IO.File.ReadAllText(HttpContext.Current.Server.MapPath("~/data/resources/sleepData.csv"))
Dim stringSeparators() As String = {Environment.NewLine}
Dim entries As String() = text.Split(stringSeparators, StringSplitOptions.None)
Dim sc As SeriesCollection = New SeriesCollection()
Dim series As Series = New Series()
series.Name = "Monday"
Dim curSeries As String = "Monday"
For Each entry As String In entries
Dim values As String() = entry.Split(","c)
If values.Length = 5 Then
If values(0) <> curSeries Then
sc.Add(series)
series = New Series()
series.Name = values(0)
curSeries = series.Name
End If
Dim el As Element = New Element()
el.YValue = Double.Parse(values(1))
el.YValueStart = Double.Parse(values(2))
el.Name = values(3)
el.CustomAttributes.Add("action", values(4))
series.Elements.Add(el)
End If
Next entry
sc.Add(series)
Return sc
End Function
Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine("ConnectionString goes here")
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ...."
Return de.GetSeries()
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
function setColors(c) {
/*Assign colors based on point attributes.*/
c.series().points(function (p) { return p.options('attributes.ACTION') === 'Awake' }).options({ color: '#faf' }, false);
c.series().points(function (p) { return p.options('attributes.ACTION') === 'Deep Sleep' }).options({ color: '#355fb5' });
}
function tooltipFormatter(point) {
var twoDigit = function (v) {
return ("0" + v).slice(-2);
};
var formatHour = function (v) {
var ampm = v <= 12 ? 'PM' : 'AM',
hour = Math.floor(v) % 12,
min = Math.floor(v % 1 * 60);
return (hour || 12) + ':' + twoDigit(min) + ampm;
};
return '<b>%name ' + '<br/>' + formatHour(point.y[0]) + ' - ' + formatHour(point.y[1]);
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous