Gallery
JS Circular Activity
<%@ 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