Gallery

Gallery > Circular Gauges Charts

JS Circular Overflow

Demonstrates circular gauges with columns that exceed the y scale range.

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 circular gauges with columns that exceed the y scale range.

Chart.Size = "500x400";

Chart.TempDirectory = "temp";
Chart.Type = ChartType.Gauges;
Chart.ShadingEffectMode = ShadingEffectMode.Three;
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars;
Chart.DonutHoleSize = 70;
Chart.Debug = false;

Chart.JS.Enabled = true;
Chart.JS.ControlID = "chart";

Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Buttons.EnableExportButton = false;

Chart.DefaultSeries.LegendEntry.Visible = false;

Chart.YAxis.ScaleRange = new ScaleRange(0, 100);
Chart.YAxis.SweepAngle = 360;
Chart.YAxis.OrientationAngle = 0;
Chart.YAxis.Line.Width = 0;
Chart.YAxis.DefaultTick.Label.Text = "%value%";

Chart.JS.Settings.Add("toolbar.items.50%.events.click", "js:getValSetter(50)");
Chart.JS.Settings.Add("toolbar.items.100%.events.click", "js:getValSetter(100)");
Chart.JS.Settings.Add("toolbar.items.200%.events.click", "js:getValSetter(200)");
Chart.JS.Settings.Add("toolbar.items.300%.events.click", "js:getValSetter(300)");

Chart.DefaultElement.ShowValue = true;
Chart.DefaultElement.SmartLabel.Text = "%yValue%";
Chart.DefaultElement.Color = Color.FromArgb(225,7,21);

dotnetCHARTING.Label l = new dotnetCHARTING.Label("Notice exceeding activity<br/>goals at a glance");
l.LineAlignment = StringAlignment.Center;

Chart.Palette = new Color[] { };

// *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

Series series = new Series();
series.ShapeLabels.Add(l);

Element el = new Element();
el.Name = "am";
el.YValue = 15;
el.YValueStart = 0;
el.CustomAttributes.Add("activity", "Sleep");
series.Elements.Add(el);

// Add the random data.
Chart.SeriesCollection.Add(series);
}

SeriesCollection getLiveData()
{
DataEngine de = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"]);
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">
function getValSetter(val) {
return function () {
clearInterval(INTERVAL_ID);
chart.series().points(0).options({ y: val });
}
}

var animDir = true;
INTERVAL_ID = setInterval(function () {
var val = animDir ? 300 : 50;
animDir = !animDir;
chart.series().points(0).options({ y: val }, { animation: { duration: 3000, easing: 'none'} })
}, 3500);
</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 circular gauges with columns that exceed the y scale range.

Chart.Size = "500x400"

Chart.TempDirectory = "temp"
Chart.Type = ChartType.Gauges
Chart.ShadingEffectMode = ShadingEffectMode.Three
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars
Chart.DonutHoleSize = 70
Chart.Debug = False

Chart.JS.Enabled = True
Chart.JS.ControlID = "chart"

Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Buttons.EnableExportButton = False

Chart.DefaultSeries.LegendEntry.Visible = False

Chart.YAxis.ScaleRange = New ScaleRange(0, 100)
Chart.YAxis.SweepAngle = 360
Chart.YAxis.OrientationAngle = 0
Chart.YAxis.Line.Width = 0
Chart.YAxis.DefaultTick.Label.Text = "%value%"

Chart.JS.Settings.Add("toolbar.items.50%.events.click", "js:getValSetter(50)")
Chart.JS.Settings.Add("toolbar.items.100%.events.click", "js:getValSetter(100)")
Chart.JS.Settings.Add("toolbar.items.200%.events.click", "js:getValSetter(200)")
Chart.JS.Settings.Add("toolbar.items.300%.events.click", "js:getValSetter(300)")

Chart.DefaultElement.ShowValue = True
Chart.DefaultElement.SmartLabel.Text = "%yValue%"
Chart.DefaultElement.Color = Color.FromArgb(225,7,21)

Dim l As dotnetCHARTING.Label = New dotnetCHARTING.Label("Notice exceeding activity<br/>goals at a glance")
l.LineAlignment = StringAlignment.Center

Chart.Palette = New Color() { }

' *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 series As Series = New Series()
series.ShapeLabels.Add(l)

Dim el As Element = New Element()
el.Name = "am"
el.YValue = 15
el.YValueStart = 0
el.CustomAttributes.Add("activity", "Sleep")
series.Elements.Add(el)

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

Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"))
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">
function getValSetter(val) {
return function () {
clearInterval(INTERVAL_ID);
chart.series().points(0).options({ y: val });
}
}

var animDir = true;
INTERVAL_ID = setInterval(function () {
var val = animDir ? 300 : 50;
animDir = !animDir;
chart.series().points(0).options({ y: val }, { animation: { duration: 3000, easing: 'none'} })
}, 3500);
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsCircularOverflow.aspx
Version9.0
Uses DatabaseNo

JS Charting

Gallery

JS Circular Overflow