JS Circular Column Grid
Demonstrates using axis options with circular gauges.
<%@ 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 axis options with circular gauges.
Chart.Type = ChartType.Gauges;
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars;
Chart.Size = "450x450";
Chart.ChartArea.ClearColors();
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.LegendBox.Visible = false;
Chart.TitleBox.Label.Text = "Population ages 0-14";
Chart.TitleBox.Position = TitleBoxPosition.Center;
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
//Outer axis properties
Chart.YAxis.OrientationAngle = 135;
Chart.YAxis.SweepAngle = 270;
Chart.YAxis.InvertScale = true;
Chart.YAxis.Line.Width = 1;
Chart.YAxis.Line.Color = Color.Gray;
Chart.YAxis.DefaultTick.GridLine.Width = 2;
Chart.YAxis.DefaultTick.GridLine.Color = Color.FromArgb(50, Color.Gray);
Chart.YAxis.DefaultTick.GridLine.DashStyle = DashStyle.Dash;
//Add marker
AxisMarker am= new AxisMarker("",new Background(Color.FromArgb(80,46, 168, 255)),0, 100000000);
Chart.YAxis.Markers.Add(am);
//Making bars thin
Chart.XAxis.SpacingPercentage = 70;
//Add marker
AxisMarker am1 = new AxisMarker("",new Background(Color.FromArgb(70,216, 28, 54)),3.9, 4.0);
Chart.XAxis.Markers.Add(am1);
//Enable X Axis Visuals by setting their options.
Chart.XAxis.DefaultTick.Line.Length = 5;
Chart.XAxis.DefaultTick.GridLine.Width = 1;
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(50, Color.Gray);
Chart.XAxis.DefaultTick.Label.Text = "%name";
//Inner size of circular gauges reduces the bar widths
Chart.DonutHoleSize = .25;
// Render axis on opposite side.
Chart.JS.Settings.Add("xAxis.orientation", "opposite");
//Marker Circle Caps
Chart.DefaultElement.ForceMarker = 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.PaletteName = Palette.Default;
s1.Type = SeriesType.Column;
s1.DefaultElement.Color = Color.FromArgb(255, 225, 7, 21);
Element e5 = new Element();
e5.YValue = 67409321;
e5.Name = "Pakistan";
s1.Elements.Add(e5);
Element e3 = new Element();
e3.YValue = 61485451;
e3.Name = "Usa";
s1.Elements.Add(e3);
Element e4 = new Element();
e4.YValue = 72205147;
e4.Name = "Indonesia";
s1.Elements.Add(e4);
Element e1 = new Element();
e1.YValue = 244031214;
e1.Name = "China";
s1.Elements.Add(e1);
Element e2 = new Element();
e2.YValue = 373356040;
e2.Name = "India";
e2.SmartLabel.Color = Color.FromArgb(170,216, 28, 54);
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>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
</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 axis options with circular gauges.
Chart.Type = ChartType.Gauges
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars
Chart.Size = "450x450"
Chart.ChartArea.ClearColors()
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.LegendBox.Visible = False
Chart.TitleBox.Label.Text = "Population ages 0-14"
Chart.TitleBox.Position = TitleBoxPosition.Center
' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
'Outer axis properties
Chart.YAxis.OrientationAngle = 135
Chart.YAxis.SweepAngle = 270
Chart.YAxis.InvertScale = True
Chart.YAxis.Line.Width = 1
Chart.YAxis.Line.Color = Color.Gray
Chart.YAxis.DefaultTick.GridLine.Width = 2
Chart.YAxis.DefaultTick.GridLine.Color = Color.FromArgb(50, Color.Gray)
Chart.YAxis.DefaultTick.GridLine.DashStyle = DashStyle.Dash
'Add marker
Dim am As AxisMarker= New AxisMarker("",New Background(Color.FromArgb(80,46, 168, 255)),0, 100000000)
Chart.YAxis.Markers.Add(am)
'Making bars thin
Chart.XAxis.SpacingPercentage = 70
'Add marker
Dim am1 As AxisMarker = New AxisMarker("",New Background(Color.FromArgb(70,216, 28, 54)),3.9, 4.0)
Chart.XAxis.Markers.Add(am1)
'Enable X Axis Visuals by setting their options.
Chart.XAxis.DefaultTick.Line.Length = 5
Chart.XAxis.DefaultTick.GridLine.Width = 1
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(50, Color.Gray)
Chart.XAxis.DefaultTick.Label.Text = "%name"
'Inner size of circular gauges reduces the bar widths
Chart.DonutHoleSize =.25
' Render axis on opposite side.
Chart.JS.Settings.Add("xAxis.orientation", "opposite")
'Marker Circle Caps
Chart.DefaultElement.ForceMarker = 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.PaletteName = Palette.Default
s1.Type = SeriesType.Column
s1.DefaultElement.Color = Color.FromArgb(255, 225, 7, 21)
Dim e5 As Element = New Element()
e5.YValue = 67409321
e5.Name = "Pakistan"
s1.Elements.Add(e5)
Dim e3 As Element = New Element()
e3.YValue = 61485451
e3.Name = "Usa"
s1.Elements.Add(e3)
Dim e4 As Element = New Element()
e4.YValue = 72205147
e4.Name = "Indonesia"
s1.Elements.Add(e4)
Dim e1 As Element = New Element()
e1.YValue = 244031214
e1.Name = "China"
s1.Elements.Add(e1)
Dim e2 As Element = New Element()
e2.YValue = 373356040
e2.Name = "India"
e2.SmartLabel.Color = Color.FromArgb(170,216, 28, 54)
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>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous