Gallery

Gallery > Circular Gauges Charts

JS Circular Live Data

Demonstrates using a real-time circular gauge.

Download Show C# Code Show VB Code

<%@ 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 a real-time circular gauge.

Chart.Type = ChartType.Gauges;
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars;
//Specifies animation duration for all animatios.
Chart.JS.InitialAnimationDuration = 1000;
Chart.ChartArea.ClearColors();

//ShadingEffectMode.Three enables rounded caps on circular column gauges
Chart.ShadingEffectMode = ShadingEffectMode.Three;
Chart.YAxis.Scale = Scale.Range;
Chart.YAxis.ScaleRange.ValueLow = 0;
Chart.YAxis.ScaleRange.ValueHigh = 100;
Chart.Size = "350X350";

Chart.TempDirectory = "temp";
Chart.Debug = false;

Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
Chart.LegendBox.ClearColors();
Chart.LegendBox.Background.Color = Color.White;
Chart.LegendBox.Shadow.Visible = false;

// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.ControlID = "myJSC";

//Enables the visual under the column.
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230, 230, 230);
Chart.XAxis.OrientationAngle = -90;
Chart.XAxis.SweepAngle = 180;
Chart.DonutHoleSize = .7;

//Outer axis properties
Chart.YAxis.ClearValues = true;
Chart.YAxis.Line.Width = 0;

//Annotations
Annotation an = new Annotation();
an.ClearColors();
an.Label.Text = "0";
an.Label.Font = new Font("Arial", 26F);
Chart.Annotations.Add(an);
Chart.JS.Settings.Add("annotations.0.id", "anVal");
Chart.JS.Settings.Add("annotations.0.margin.top", "68");
Chart.JS.Settings.Add("annotations.0.position", "ca:center");

Annotation an2 = new Annotation();
an2.ClearColors();
an2.Label.Text = "KW";
an2.Label.Font = new Font("Arial", 15F);
an2.Label.Color = Color.DarkGray;
Chart.Annotations.Add(an2);
Chart.JS.Settings.Add("annotations.1.position", "ca:center");

//Reset properties set by default
Chart.JS.Settings.Add("defaultPoint", "js:{}");
Chart.JS.Settings.Add("series.0.defaultPoint", "js:{}");
Chart.JS.Settings.Add("palette", "js:{}");
//Set new values that define a smartPalette
Chart.JS.Settings.Add("palette.pointValue", "'{%value/100}'");
Chart.JS.Settings.Add("palette.colors", "['green','yellow', 'red']");
Chart.JS.Settings.Add("palette.colorBar.axis.defaultTick.label.text", "'{%value*100}'");

//Toolbar button
Chart.JS.Settings.Add("toolbar.items.Stop.margin", "10");
Chart.JS.Settings.Add("toolbar.items.Stop.type", "option");
Chart.JS.Settings.Add("toolbar.items.Stop.events_change", "js:playPause");
Chart.JS.Settings.Add("toolbar.items.Stop.states.select.icon.name", "system/default/play");
Chart.JS.Settings.Add("toolbar.items.Stop.icon.name", "system/default/pause");
Chart.JS.Settings.Add("toolbar.items.Stop.label.text", "Pause");
Chart.JS.Settings.Add("toolbar.items.Stop.states.select.label.text", "Play");
Chart.JS.Settings.Add("toolbar.items.Stop.boxVisible", "true");

// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Use the getLiveData() method using the dataEngine to query a database.
// - Help File > Getting Started > Data Tutorials
// - DataEngine Class in the help file
// - Sample: features/DataEngine.aspx

SeriesCollection sc = new SeriesCollection();
Series s1 = new Series();
Element e1 = new Element();
e1.YValue = 5;
e1.JsID = "1";
e1.Name = "speed";
s1.Elements.Add(e1);
sc.Add(s1);

// Add the random data.
Chart.SeriesCollection.Add(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">
var INTERVAL_ID;

playPause();
function setGauge(max, y) {
myJSC.series(0).options({ points: [{ id: '1', x: 'speed', y: y}] });
myJSC.annotations('anVal').options({ label_text: JSC.formatNumber(y, 'n1') });
}
function playPause(val) {
if (val) { clearInterval(INTERVAL_ID); } else { update(); }
}
function update() {
INTERVAL_ID = setInterval(function () { setGauge(100, Math.random() * 100); }, 1000);
}
</script>
</head>
<body>
<div style="margin: 0px auto;">
<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)
' Demonstrates using a real-time circular gauge.

Chart.Type = ChartType.Gauges
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars
'Specifies animation duration for all animatios.
Chart.JS.InitialAnimationDuration = 1000
Chart.ChartArea.ClearColors()

'ShadingEffectMode.Three enables rounded caps on circular column gauges
Chart.ShadingEffectMode = ShadingEffectMode.Three
Chart.YAxis.Scale = Scale.Range
Chart.YAxis.ScaleRange.ValueLow = 0
Chart.YAxis.ScaleRange.ValueHigh = 100
Chart.Size = "350X350"

Chart.TempDirectory = "temp"
Chart.Debug = False

Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom
Chart.LegendBox.ClearColors()
Chart.LegendBox.Background.Color = Color.White
Chart.LegendBox.Shadow.Visible = False

' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.ControlID = "myJSC"

'Enables the visual under the column.
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230, 230, 230)
Chart.XAxis.OrientationAngle = -90
Chart.XAxis.SweepAngle = 180
Chart.DonutHoleSize =.7

'Outer axis properties
Chart.YAxis.ClearValues = True
Chart.YAxis.Line.Width = 0

'Annotations
Dim an As Annotation = New Annotation()
an.ClearColors()
an.Label.Text = "0"
an.Label.Font = New Font("Arial", 26F)
Chart.Annotations.Add(an)
Chart.JS.Settings.Add("annotations.0.id", "anVal")
Chart.JS.Settings.Add("annotations.0.margin.top", "68")
Chart.JS.Settings.Add("annotations.0.position", "ca:center")

Dim an2 As Annotation = New Annotation()
an2.ClearColors()
an2.Label.Text = "KW"
an2.Label.Font = New Font("Arial", 15F)
an2.Label.Color = Color.DarkGray
Chart.Annotations.Add(an2)
Chart.JS.Settings.Add("annotations.1.position", "ca:center")

'Reset properties set by default
Chart.JS.Settings.Add("defaultPoint", "js:{}")
Chart.JS.Settings.Add("series.0.defaultPoint", "js:{}")
Chart.JS.Settings.Add("palette", "js:{}")
'Set new values that define a smartPalette
Chart.JS.Settings.Add("palette.pointValue", "'{%value/100}'")
Chart.JS.Settings.Add("palette.colors", "['green','yellow', 'red']")
Chart.JS.Settings.Add("palette.colorBar.axis.defaultTick.label.text", "'{%value*100}'")

'Toolbar button
Chart.JS.Settings.Add("toolbar.items.Stop.margin", "10")
Chart.JS.Settings.Add("toolbar.items.Stop.type", "option")
Chart.JS.Settings.Add("toolbar.items.Stop.events_change", "js:playPause")
Chart.JS.Settings.Add("toolbar.items.Stop.states.select.icon.name", "system/default/play")
Chart.JS.Settings.Add("toolbar.items.Stop.icon.name", "system/default/pause")
Chart.JS.Settings.Add("toolbar.items.Stop.label.text", "Pause")
Chart.JS.Settings.Add("toolbar.items.Stop.states.select.label.text", "Play")
Chart.JS.Settings.Add("toolbar.items.Stop.boxVisible", "true")

' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Use the getLiveData() method using the dataEngine to query a database.
' - Help File > Getting Started > Data Tutorials
' - DataEngine Class in the help file
' - Sample: features/DataEngine.aspx

Dim sc As SeriesCollection = New SeriesCollection()
Dim s1 As Series = New Series()
Dim e1 As Element = New Element()
e1.YValue = 5
e1.JsID = "1"
e1.Name = "speed"
s1.Elements.Add(e1)
sc.Add(s1)

' Add the random data.
Chart.SeriesCollection.Add(sc)
End Sub

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">
var INTERVAL_ID;

playPause();
function setGauge(max, y) {
myJSC.series(0).options({ points: [{ id: '1', x: 'speed', y: y}] });
myJSC.annotations('anVal').options({ label_text: JSC.formatNumber(y, 'n1') });
}
function playPause(val) {
if (val) { clearInterval(INTERVAL_ID); } else { update(); }
}
function update() {
INTERVAL_ID = setInterval(function () { setGauge(100, Math.random() * 100); }, 1000);
}
</script>
</head>
<body>
<div style="margin: 0px auto;">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsCircularLiveData.aspx
Version9.0
Uses DatabaseNo

JS Charting

Gallery

JS Circular Live Data