Gallery

Gallery > Circular Gauges Charts

JS Circular Activity

Demonstrates activity rings chart that updates in real-time.

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 activity rings chart that updates in real-time.

Chart.Type = ChartType.Gauges;
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars;
Chart.ChartArea.ClearColors();
Chart.PaletteName = Palette.None;

//ShadingEffectMode.Three enables rounded caps on circular column gauges
Chart.ShadingEffectMode = ShadingEffectMode.Three;
Chart.Size = "400X400";

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

Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
Chart.LegendBox.ClearColors();

// 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.SpacingPercentage = 10;
//Outer axis properties
Chart.YAxis.DefaultTick.Line.Width = 0;
Chart.YAxis.Line.Width = 0;
Chart.YAxis.ScaleRange = new ScaleRange(0, 100);
Chart.XAxis.SweepAngle = 360;
Chart.DonutHoleSize = .3;

Chart.JS.Settings.Add("toolbar.items.Stop.type", "option");
Chart.JS.Settings.Add("toolbar.items.Stop.value", "true");
Chart.JS.Settings.Add("toolbar.items.Stop.icon_name", "system/default/pause");
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.states.select.label.text", "Play");
Chart.JS.Settings.Add("toolbar.items.Stop.label.text", "Pause");
Chart.JS.Settings.Add("toolbar.items.Stop.boxVisible", "true");

Chart.JS.Settings.Add("series.0.points.0.marker_type", "linear/arrows/right");
Chart.JS.Settings.Add("series.0.points.1.marker_type", "linear/arrows/right-double");
Chart.JS.Settings.Add("series.0.points.2.marker_type", "linear/arrows/downright");

Chart.DefaultElement.Marker.Visible = true;
Chart.DefaultElement.Marker.Size = 15;

// *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 activities = new Series();
activities.Name = "Activities";
activities.Palette = new Color[] { Color.FromArgb(255, 7, 21), Color.FromArgb(63, 220, 0), Color.FromArgb(62, 186, 225) };

Element e1 = new Element();
e1.YValue = 30;
e1.Name = "Running";
e1.JsID = "r";
activities.Elements.Add(e1);

Element e2 = new Element();
e2.YValue = 25;
e2.Name = "Walking";
e2.JsID = "w";
activities.Elements.Add(e2);

Element e3 = new Element();
e3.YValue = 20;
e3.Name = "Standing";
e3.JsID = "s";
activities.Elements.Add(e3);

sc.Add(activities);

// Add the 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>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<script type="text/javascript">
var INTERVAL_ID;
function playPause(val) {
if (val === true) { clearInterval(INTERVAL_ID); } else { startUpdate(); }
}
function startUpdate() {
INTERVAL_ID = setInterval(function () {
myJSC.series(0).options({ points: getRandomPoints() })
}, 500);
}

function getRandomPoints() {
return [
{ id: 'r', y: getPointVal('r') },
{ id: 'w', y: getPointVal('w') },
{ id: 's', y: getPointVal('s') }
];
function getPointVal(id) {
return myJSC.series(0).points(id).options('y') + Math.round(Math.random() * 3)
}
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/right.js"></script>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/right-double.js"></script>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/downright.js"></script>
</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 activity rings chart that updates in real-time.

Chart.Type = ChartType.Gauges
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars
Chart.ChartArea.ClearColors()
Chart.PaletteName = Palette.None

'ShadingEffectMode.Three enables rounded caps on circular column gauges
Chart.ShadingEffectMode = ShadingEffectMode.Three
Chart.Size = "400X400"

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

Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom
Chart.LegendBox.ClearColors()

' 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.SpacingPercentage = 10
'Outer axis properties
Chart.YAxis.DefaultTick.Line.Width = 0
Chart.YAxis.Line.Width = 0
Chart.YAxis.ScaleRange = New ScaleRange(0, 100)
Chart.XAxis.SweepAngle = 360
Chart.DonutHoleSize =.3

Chart.JS.Settings.Add("toolbar.items.Stop.type", "option")
Chart.JS.Settings.Add("toolbar.items.Stop.value", "true")
Chart.JS.Settings.Add("toolbar.items.Stop.icon_name", "system/default/pause")
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.states.select.label.text", "Play")
Chart.JS.Settings.Add("toolbar.items.Stop.label.text", "Pause")
Chart.JS.Settings.Add("toolbar.items.Stop.boxVisible", "true")

Chart.JS.Settings.Add("series.0.points.0.marker_type", "linear/arrows/right")
Chart.JS.Settings.Add("series.0.points.1.marker_type", "linear/arrows/right-double")
Chart.JS.Settings.Add("series.0.points.2.marker_type", "linear/arrows/downright")

Chart.DefaultElement.Marker.Visible = True
Chart.DefaultElement.Marker.Size = 15

' *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 activities As Series = New Series()
activities.Name = "Activities"
activities.Palette = New Color() { Color.FromArgb(255, 7, 21), Color.FromArgb(63, 220, 0), Color.FromArgb(62, 186, 225) }

Dim e1 As Element = New Element()
e1.YValue = 30
e1.Name = "Running"
e1.JsID = "r"
activities.Elements.Add(e1)

Dim e2 As Element = New Element()
e2.YValue = 25
e2.Name = "Walking"
e2.JsID = "w"
activities.Elements.Add(e2)

Dim e3 As Element = New Element()
e3.YValue = 20
e3.Name = "Standing"
e3.JsID = "s"
activities.Elements.Add(e3)

sc.Add(activities)

' Add the 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>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<script type="text/javascript">
var INTERVAL_ID;
function playPause(val) {
if (val === true) { clearInterval(INTERVAL_ID); } else { startUpdate(); }
}
function startUpdate() {
INTERVAL_ID = setInterval(function () {
myJSC.series(0).options({ points: getRandomPoints() })
}, 500);
}

function getRandomPoints() {
return [
{ id: 'r', y: getPointVal('r') },
{ id: 'w', y: getPointVal('w') },
{ id: 's', y: getPointVal('s') }
];
function getPointVal(id) {
return myJSC.series(0).points(id).options('y') + Math.round(Math.random() * 3)
}
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/right.js"></script>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/right-double.js"></script>
<script type="text/javascript" src="temp/jsc/icons/linear/arrows/downright.js"></script>
</html>

Sample FilenameJsCircularActivity.aspx
Version9.0
Uses DatabaseNo

JS Charting

Gallery

JS Circular Activity