Gallery

Gallery > Circular Gauges Charts

JS Circular Shape Labels

Demonstrates using multiple shape labels on a single circular gauge column chart.

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 using multiple shape labels on a single circular gauge column chart.
Chart.Type = ChartType.Gauges;
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars;
//ShadingEffectMode.Three enables rounded caps on circular column gauges
Chart.ShadingEffectMode = ShadingEffectMode.Three;
Chart.Size = "500x450";
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.LegendBox.Visible = false;

// 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.RangeAngle = 270;
Chart.YAxis.DefaultTick.GridLine.Visible = false;
Chart.YAxis.Line.Width = 5;
Chart.YAxis.Line.Color = Color.FromArgb(17, 75, 139);
Chart.YAxis.ScaleRange = new ScaleRange(0, 15);
Chart.YAxis.Interval = 2.5;
Chart.YAxis.TickLabelPadding = 8;
Chart.YAxis.LineBreaks.Gap = 0.4;
Chart.YAxis.LineBreaks.Enabled = true;

//Inner size of circular gauges reduces the bar widths
Chart.DonutHoleSize = .6;
//Enables the visual under the column.
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230, 230, 230);

// *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();

dotnetCHARTING.Label label1 = new dotnetCHARTING.Label();
label1.Text = "Walking";
label1.Alignment = StringAlignment.Near;
label1.Font = new Font("Arial", 24);
s1.ShapeLabels.Add(label1);

//Javascript shape labels with icons
dotnetCHARTING.Label label2 = new dotnetCHARTING.Label();
label2.Text = "<icon name=material/maps/directions-walk outerShape=circle size=120 padding=35 fill=#3EBBE1>";
label2.LineAlignment = StringAlignment.Center;
s1.ShapeLabels.Add(label2);

dotnetCHARTING.Label label3 = new dotnetCHARTING.Label();
label3.Text = "Distance Traveled:";
label3.LineAlignment = StringAlignment.Far;
label3.Alignment = StringAlignment.Near;
label3.Font = new Font("Arial", 16);
s1.ShapeLabels.Add(label3);

dotnetCHARTING.Label label4 = new dotnetCHARTING.Label();
label4.Text = "7.15<span style='fontSize: 16'> miles</span>";
label4.LineAlignment = StringAlignment.Far;
label4.Font = new Font("Arial", 32);
s1.ShapeLabels.Add(label4);

Element e1 = new Element();
e1.YValue = 7.15;
e1.Name = "Walking";
s1.Elements.Add(e1);
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 multiple shape labels on a single circular gauge column chart.
Chart.Type = ChartType.Gauges
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars
'ShadingEffectMode.Three enables rounded caps on circular column gauges
Chart.ShadingEffectMode = ShadingEffectMode.Three
Chart.Size = "500x450"
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.LegendBox.Visible = False

' 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.RangeAngle = 270
Chart.YAxis.DefaultTick.GridLine.Visible = False
Chart.YAxis.Line.Width = 5
Chart.YAxis.Line.Color = Color.FromArgb(17, 75, 139)
Chart.YAxis.ScaleRange = New ScaleRange(0, 15)
Chart.YAxis.Interval = 2.5
Chart.YAxis.TickLabelPadding = 8
Chart.YAxis.LineBreaks.Gap = 0.4
Chart.YAxis.LineBreaks.Enabled = True

'Inner size of circular gauges reduces the bar widths
Chart.DonutHoleSize =.6
'Enables the visual under the column.
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230, 230, 230)

' *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()

Dim label1 As dotnetCHARTING.Label = New dotnetCHARTING.Label()
label1.Text = "Walking"
label1.Alignment = StringAlignment.Near
label1.Font = New Font("Arial", 24)
s1.ShapeLabels.Add(label1)

'Javascript shape labels with icons
Dim label2 As dotnetCHARTING.Label = New dotnetCHARTING.Label()
label2.Text = "<icon name=material/maps/directions-walk outerShape=circle size=120 padding=35 fill=#3EBBE1>"
label2.LineAlignment = StringAlignment.Center
s1.ShapeLabels.Add(label2)

Dim label3 As dotnetCHARTING.Label = New dotnetCHARTING.Label()
label3.Text = "Distance Traveled:"
label3.LineAlignment = StringAlignment.Far
label3.Alignment = StringAlignment.Near
label3.Font = New Font("Arial", 16)
s1.ShapeLabels.Add(label3)

Dim label4 As dotnetCHARTING.Label = New dotnetCHARTING.Label()
label4.Text = "7.15<span style='fontSize: 16'> miles</span>"
label4.LineAlignment = StringAlignment.Far
label4.Font = New Font("Arial", 32)
s1.ShapeLabels.Add(label4)

Dim e1 As Element = New Element()
e1.YValue = 7.15
e1.Name = "Walking"
s1.Elements.Add(e1)
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>

Sample FilenameJsCircularShapeLabels.aspx
Version9.0
Uses DatabaseNo

JS Charting

Gallery

JS Circular Shape Labels