JS Circular Icons
Demonstrates using shape labels with icons on circular column charts.
<%@ 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 gauge bars with icons in shape labels that use an outer shape.
Chart.Type = ChartType.Gauges;
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars;
//ShadingEffectMode.Three enables rounded caps on circular column gauges
Chart.ShadingEffectMode = ShadingEffectMode.Three;
Chart.Size = "640x280";
Chart.ChartArea.ClearColors();
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 = 180;
Chart.YAxis.RangeAngle = 360;
Chart.YAxis.ClearValues = true;
Chart.YAxis.Line.Width = 0;
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230,230,230);
//Inner size of circular gauges reduces the bar widths
Chart.DonutHoleSize = .7;
// *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.DefaultElement.Color = Color.FromArgb(255, 225, 7, 21);
Element e1 = new Element();
e1.YValue = 97;
e1.Name = "Walking";
s1.Elements.Add(e1);
Series s2 = new Series();
s2.DefaultElement.Color = Color.FromArgb(255, 63, 220, 0);
Element e2 = new Element();
e2.YValue = 57;
e2.Name = "Running";
s2.Elements.Add(e2);
Series s3 = new Series();
s3.DefaultElement.Color = Color.FromArgb(255, 62, 186, 225);
Element e3 = new Element();
e3.YValue =37;
e3.Name = "Cycling";
s3.Elements.Add(e3);
//Javascript shape labels with icons
s1.ShapeLabels.Add(getShapeLabel("material/maps/directions-walk", "#E10715"));
s2.ShapeLabels.Add(getShapeLabel("material/maps/directions-run", "#3FDC00"));
s3.ShapeLabels.Add(getShapeLabel("material/maps/directions-bike", "#3EBAE1"));
sc.Add(s1);
sc.Add(s2);
sc.Add(s3);
Chart.SeriesCollection.Add(sc);
}
dotnetCHARTING.Label getShapeLabel(string icon, string hexColor)
{
dotnetCHARTING.Label label = new dotnetCHARTING.Label();
label.Text = "<icon name=" + icon + " outerShape=circle size=120 padding=35 fill=" + hexColor + ">";
label.LineAlignment = StringAlignment.Center;
return label;
}
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>
</head>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<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 gauge bars with icons in shape labels that use an outer shape.
Chart.Type = ChartType.Gauges
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars
'ShadingEffectMode.Three enables rounded caps on circular column gauges
Chart.ShadingEffectMode = ShadingEffectMode.Three
Chart.Size = "640x280"
Chart.ChartArea.ClearColors()
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 = 180
Chart.YAxis.RangeAngle = 360
Chart.YAxis.ClearValues = True
Chart.YAxis.Line.Width = 0
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230,230,230)
'Inner size of circular gauges reduces the bar widths
Chart.DonutHoleSize =.7
' *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.DefaultElement.Color = Color.FromArgb(255, 225, 7, 21)
Dim e1 As Element = New Element()
e1.YValue = 97
e1.Name = "Walking"
s1.Elements.Add(e1)
Dim s2 As Series = New Series()
s2.DefaultElement.Color = Color.FromArgb(255, 63, 220, 0)
Dim e2 As Element = New Element()
e2.YValue = 57
e2.Name = "Running"
s2.Elements.Add(e2)
Dim s3 As Series = New Series()
s3.DefaultElement.Color = Color.FromArgb(255, 62, 186, 225)
Dim e3 As Element = New Element()
e3.YValue =37
e3.Name = "Cycling"
s3.Elements.Add(e3)
'Javascript shape labels with icons
s1.ShapeLabels.Add(getShapeLabel("material/maps/directions-walk", "#E10715"))
s2.ShapeLabels.Add(getShapeLabel("material/maps/directions-run", "#3FDC00"))
s3.ShapeLabels.Add(getShapeLabel("material/maps/directions-bike", "#3EBAE1"))
sc.Add(s1)
sc.Add(s2)
sc.Add(s3)
Chart.SeriesCollection.Add(sc)
End Sub
Function getShapeLabel(ByVal icon As String, ByVal hexColor As String) As dotnetCHARTING.Label
Dim label As dotnetCHARTING.Label = New dotnetCHARTING.Label()
label.Text = "<icon name=" & icon & " outerShape=circle size=120 padding=35 fill=" & hexColor & ">"
label.LineAlignment = StringAlignment.Center
Return label
End Function
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>
</head>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous