Gallery
PreviousJS Circular Countdown
<%@ 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 circular column chart to simulate a countdown.
Chart.Type = ChartType.Gauges;
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars;
Chart.ChartArea.ClearColors();
Chart.Size = "750X400";
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.LegendBox.Visible = false;
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
//Outer axis properties
Chart.YAxis.DefaultTick.GridLine.Color = Color.FromArgb(192,192,195);
Chart.YAxis.DefaultTick.GridLine.Width =1;
Chart.YAxis.DefaultTick.GridLine.DashStyle = DashStyle.Dash;
Chart.YAxis.DefaultTick.Label.Text = "";
Chart.YAxis.Line.Width=0;
Chart.YAxis.Scale = Scale.Range;
Chart.YAxis.ScaleRange.ValueLow = 0;
Chart.YAxis.ScaleRange.ValueHigh = 10;
Chart.YAxis.Interval = 2.5;
Chart.XAxis.OrientationAngle = 0;
Chart.XAxis.SweepAngle = 360;
Chart.DonutHoleSize = .5;
//Setup toolbar button
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", "Start");
Chart.JS.Settings.Add("toolbar.items.Stop.label.text", "Pause");
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();
s1.Type = "column";
s1.DefaultElement.Color = Color.FromArgb(220,233,255);
dotnetCHARTING.Label label1 = new dotnetCHARTING.Label();
label1.Text = "js:countStart.toString()";
label1.LineAlignment = StringAlignment.Center;
label1.Font = new Font("Arial", 65);
s1.ShapeLabels.Add(label1);
Element e1 = new Element();
e1.YValue = 10;
e1.JsID = "full";
s1.Elements.Add(e1);
Element e2 = new Element();
e2.YValue = 10;
e2.JsID = "sec";
s1.Elements.Add(e2);
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 counter, countStart = 15,
colors = ['#dce9ff', '#ff596b'];
function playPause(val) {
if (val === true) { clearInterval(INTERVAL_ID); } else { startCountdown(); }
}
function startCountdown() {
var startTime;
counter = countStart;
var noAnim = { animation: false };
//Reset timer
myJSC.series(0).options({ shape_label_0: { text: counter.toString(), color: 'black' }, points: [{ id: 'full', y: 10 }, { id: 'sec', y: 10}] }, noAnim);
INTERVAL_ID = setInterval(function () {
if (counter < 0) {
//Stop
myJSC.uiItems('Stop').options({ value: true });
myJSC.series(0).options({ shape_label: { text: 'Done' } }, noAnim);
playPause(true);
} else {
//Next tick reset
myJSC.series(0).options({ shape_label: { text: (counter + 1).toString(), color: counter < 5 ? colors[1] : 'black'} }, noAnim);
var color = counter < 5 ? colors[1] : colors[0];
myJSC.series(0).points('sec').options({ y: 10, color: color }, noAnim);
//Next tick animation
myJSC.series(0).options({ points: getToPoints() }, { animation: { duration: 980, easing: 'none' } });
counter--;
}
}, 1000);
//Start countdown
myJSC.series(0).options({ shape_label_text: counter.toString(), points: getToPoints() }, {
animation: { duration: 970, easing: 'none' }
});
counter -= 2;
}
function getToPoints() {
return [
{ id: 'full', y: counter * 10 / countStart },
{ id: 'sec', y: 0, color: undefined },
];
}
</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)
' Demonstrates using circular column chart to simulate a countdown.
Chart.Type = ChartType.Gauges
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars
Chart.ChartArea.ClearColors()
Chart.Size = "750X400"
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.LegendBox.Visible = False
' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
'Outer axis properties
Chart.YAxis.DefaultTick.GridLine.Color = Color.FromArgb(192,192,195)
Chart.YAxis.DefaultTick.GridLine.Width =1
Chart.YAxis.DefaultTick.GridLine.DashStyle = DashStyle.Dash
Chart.YAxis.DefaultTick.Label.Text = ""
Chart.YAxis.Line.Width=0
Chart.YAxis.Scale = Scale.Range
Chart.YAxis.ScaleRange.ValueLow = 0
Chart.YAxis.ScaleRange.ValueHigh = 10
Chart.YAxis.Interval = 2.5
Chart.XAxis.OrientationAngle = 0
Chart.XAxis.SweepAngle = 360
Chart.DonutHoleSize =.5
'Setup toolbar button
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", "Start")
Chart.JS.Settings.Add("toolbar.items.Stop.label.text", "Pause")
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()
s1.Type = "column"
s1.DefaultElement.Color = Color.FromArgb(220,233,255)
Dim label1 As dotnetCHARTING.Label = New dotnetCHARTING.Label()
label1.Text = "js:countStart.toString()"
label1.LineAlignment = StringAlignment.Center
label1.Font = New Font("Arial", 65)
s1.ShapeLabels.Add(label1)
Dim e1 As Element = New Element()
e1.YValue = 10
e1.JsID = "full"
s1.Elements.Add(e1)
Dim e2 As Element = New Element()
e2.YValue = 10
e2.JsID = "sec"
s1.Elements.Add(e2)
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 counter, countStart = 15,
colors = ['#dce9ff', '#ff596b'];
function playPause(val) {
if (val === true) { clearInterval(INTERVAL_ID); } else { startCountdown(); }
}
function startCountdown() {
var startTime;
counter = countStart;
var noAnim = { animation: false };
//Reset timer
myJSC.series(0).options({ shape_label_0: { text: counter.toString(), color: 'black' }, points: [{ id: 'full', y: 10 }, { id: 'sec', y: 10}] }, noAnim);
INTERVAL_ID = setInterval(function () {
if (counter < 0) {
//Stop
myJSC.uiItems('Stop').options({ value: true });
myJSC.series(0).options({ shape_label: { text: 'Done' } }, noAnim);
playPause(true);
} else {
//Next tick reset
myJSC.series(0).options({ shape_label: { text: (counter + 1).toString(), color: counter < 5 ? colors[1] : 'black'} }, noAnim);
var color = counter < 5 ? colors[1] : colors[0];
myJSC.series(0).points('sec').options({ y: 10, color: color }, noAnim);
//Next tick animation
myJSC.series(0).options({ points: getToPoints() }, { animation: { duration: 980, easing: 'none' } });
counter--;
}
}, 1000);
//Start countdown
myJSC.series(0).options({ shape_label_text: counter.toString(), points: getToPoints() }, {
animation: { duration: 970, easing: 'none' }
});
counter -= 2;
}
function getToPoints() {
return [
{ id: 'full', y: counter * 10 / countStart },
{ id: 'sec', y: 0, color: undefined },
];
}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
- Sample FilenameJsCircularCountdown.aspx
- Version9.0
- Uses DatabaseNo