Gallery

Gallery > Circular Gauges Charts

JS Circular Mixed Gauges

Demonstrates circular gauges with differing styles combined into a single 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 Circular gauges with differing styles combined into a single chart.
chart1.TempDirectory = "temp";
chart1.Type = ChartType.Gauges;
chart1.DefaultSeries.GaugeType = GaugeType.CircularBars;
chart1.Debug = true;
chart1.Palette = new Color[] { };
chart1.LegendBox.Visible = false;

chart1.JS.Enabled = true;
//Specifies animation duration for all animatios.
chart1.JS.InitialAnimationDuration = 0;
chart1.DefaultElement.Marker.Size = 30;
chart1.YAxis.ScaleRange = new ScaleRange(0, 100);
chart1.YAxis.LineBreaks.Enabled = true;
chart1.YAxis.Line.Width = 15;

chart1.JS.Settings.Add("xAxis", "[]");
chart1.JS.Settings.Add("xAxis.0.id", "xAx1");
chart1.JS.Settings.Add("xAxis.0.scale.range", "[0,1]");

chart1.JS.Settings.Add("xAxis.1.id", "xAx2");
chart1.JS.Settings.Add("xAxis.1.spacingPercentage", "0.4");

chart1.JS.Settings.Add("xAxis.1.defaultTick.gridLine.color", "#ECEFF1");
chart1.JS.Settings.Add("yAxis", "[]");

chart1.JS.Settings.Add("yAxis.0.id", "yAx1");
chart1.JS.Settings.Add("yAxis.1.id", "yAx2");
chart1.JS.Settings.Add("yAxis.2.id", "yAx3");

chart1.JS.Settings.Add("yAxis.0.defaultTick.padding", "13");
chart1.JS.Settings.Add("yAxis.1.defaultTick.padding", "13");

chart1.JS.Settings.Add("yAxis.0.defaultTick.label.visible", "false");
chart1.JS.Settings.Add("yAxis.1.defaultTick.label.visible", "false");
chart1.JS.Settings.Add("yAxis.2.defaultTick.label.visible", "false");

chart1.JS.Settings.Add("yAxis.0.line.color", "smartPalette");
chart1.JS.Settings.Add("yAxis.1.line.color", "smartPalette");
chart1.JS.Settings.Add("yAxis.2.line.color", "smartPalette");

chart1.JS.Settings.Add("yAxis.0.line.width", "10");
chart1.JS.Settings.Add("yAxis.1.line.width", "20");
chart1.JS.Settings.Add("yAxis.2.line.width", "10");

chart1.JS.Settings.Add("yAxis.2.customTicks", "[0, 30, 70, 100]");
chart1.JS.Settings.Add("yAxis.2.line.breaks", "{}");

chart1.JS.Settings.Add("yAxis.0.line.breaks_gap", "0.03");
chart1.JS.Settings.Add("yAxis.0.scale.range", "[0,100]");
chart1.JS.Settings.Add("yAxis.0.scale.interval", "10");

chart1.JS.Settings.Add("yAxis.1.scale.range", "[0,100]");
chart1.JS.Settings.Add("yAxis.2.scale.range", "[0,100]");
chart1.JS.Settings.Add("defaultPoint.marker.fill", "white");
chart1.JS.Settings.Add("defaultPoint_marker_outline_color", "currentColor");

chart1.JS.Settings.Add("yAxis.line.color", "smartPalette");
chart1.JS.Settings.Add("palette_pointValue", "%yValue");
chart1.JS.Settings.Add("defaultSeries_opacity", "1");
chart1.JS.Settings.Add("defaultSeries_mouseTracking_enabled", "false");

//default point settings
chart1.JS.Settings.Add("defaultPoint_marker_type", "circle");
chart1.JS.Settings.Add("defaultPoint_marker_rotate", "auto");
chart1.JS.Settings.Add("defaultPoint_marker_size", "30");
chart1.JS.Settings.Add("defaultPoint_marker_outline_width", "8");
chart1.JS.Settings.Add("palette_ranges", "js:ranges");

//series 1
chart1.JS.Settings.Add("series.0.defaultPoint_marker_outline_color", "white");
chart1.JS.Settings.Add("series.0.defaultPoint_marker_fill", "none");
chart1.JS.Settings.Add("series.0.defaultPoint_marker_size", "28");
chart1.JS.Settings.Add("series.0.yAxis", "yAx2");

//series 2
chart1.JS.Settings.Add("series.1.type", "gauge column roundcaps");
chart1.JS.Settings.Add("series.1.yAxis", "yAx3");
chart1.JS.Settings.Add("series.1.xAxis", "xAx2");
chart1.JS.Settings.Add("series.1.defaultPoint_outline_width", "0");
chart1.JS.Settings.Add("series.2.yAxis", "yAx1");

chart1.SeriesCollection.Add(getData(0,23));
chart1.SeriesCollection.Add(getData(0, 52));
chart1.SeriesCollection.Add(getData(0,86));
}
Series getData(double x,double y)
{
SeriesCollection sc = new SeriesCollection();
Series series = new Series();
series.Type = SeriesType.Marker;
dotnetCHARTING.Label label1 = new dotnetCHARTING.Label();
label1.Text = "<span style='fontSize:40px'>" + y.ToString() + "%</span>";
label1.LineAlignment = StringAlignment.Center;
series.ShapeLabels.Add(label1);

Element el = new Element();
el.YValue = y;
el.XValue = x;
series.Elements.Add(el);
return series;
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
var ranges = [
{ value: [0, 30], color: '#77E6B4' },
{ value: [30, 70], color: '#FFD221' },
{ value: [70, 100], color: '#FF5353' }
];
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="chart1" runat="server" Width="300" Height="700"/>

</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 differing styles combined into a single chart.
chart1.TempDirectory = "temp"
chart1.Type = ChartType.Gauges
chart1.DefaultSeries.GaugeType = GaugeType.CircularBars
chart1.Debug = True
chart1.Palette = New Color() { }
chart1.LegendBox.Visible = False

chart1.JS.Enabled = True
'Specifies animation duration for all animatios.
chart1.JS.InitialAnimationDuration = 0
chart1.DefaultElement.Marker.Size = 30
chart1.YAxis.ScaleRange = New ScaleRange(0, 100)
chart1.YAxis.LineBreaks.Enabled = True
chart1.YAxis.Line.Width = 15

chart1.JS.Settings.Add("xAxis", "[]")
chart1.JS.Settings.Add("xAxis.0.id", "xAx1")
chart1.JS.Settings.Add("xAxis.0.scale.range", "[0,1]")

chart1.JS.Settings.Add("xAxis.1.id", "xAx2")
chart1.JS.Settings.Add("xAxis.1.spacingPercentage", "0.4")

chart1.JS.Settings.Add("xAxis.1.defaultTick.gridLine.color", "#ECEFF1")
chart1.JS.Settings.Add("yAxis", "[]")

chart1.JS.Settings.Add("yAxis.0.id", "yAx1")
chart1.JS.Settings.Add("yAxis.1.id", "yAx2")
chart1.JS.Settings.Add("yAxis.2.id", "yAx3")

chart1.JS.Settings.Add("yAxis.0.defaultTick.padding", "13")
chart1.JS.Settings.Add("yAxis.1.defaultTick.padding", "13")

chart1.JS.Settings.Add("yAxis.0.defaultTick.label.visible", "false")
chart1.JS.Settings.Add("yAxis.1.defaultTick.label.visible", "false")
chart1.JS.Settings.Add("yAxis.2.defaultTick.label.visible", "false")

chart1.JS.Settings.Add("yAxis.0.line.color", "smartPalette")
chart1.JS.Settings.Add("yAxis.1.line.color", "smartPalette")
chart1.JS.Settings.Add("yAxis.2.line.color", "smartPalette")

chart1.JS.Settings.Add("yAxis.0.line.width", "10")
chart1.JS.Settings.Add("yAxis.1.line.width", "20")
chart1.JS.Settings.Add("yAxis.2.line.width", "10")

chart1.JS.Settings.Add("yAxis.2.customTicks", "[0, 30, 70, 100]")
chart1.JS.Settings.Add("yAxis.2.line.breaks", "{}")

chart1.JS.Settings.Add("yAxis.0.line.breaks_gap", "0.03")
chart1.JS.Settings.Add("yAxis.0.scale.range", "[0,100]")
chart1.JS.Settings.Add("yAxis.0.scale.interval", "10")

chart1.JS.Settings.Add("yAxis.1.scale.range", "[0,100]")
chart1.JS.Settings.Add("yAxis.2.scale.range", "[0,100]")
chart1.JS.Settings.Add("defaultPoint.marker.fill", "white")
chart1.JS.Settings.Add("defaultPoint_marker_outline_color", "currentColor")

chart1.JS.Settings.Add("yAxis.line.color", "smartPalette")
chart1.JS.Settings.Add("palette_pointValue", "%yValue")
chart1.JS.Settings.Add("defaultSeries_opacity", "1")
chart1.JS.Settings.Add("defaultSeries_mouseTracking_enabled", "false")

'default point settings
chart1.JS.Settings.Add("defaultPoint_marker_type", "circle")
chart1.JS.Settings.Add("defaultPoint_marker_rotate", "auto")
chart1.JS.Settings.Add("defaultPoint_marker_size", "30")
chart1.JS.Settings.Add("defaultPoint_marker_outline_width", "8")
chart1.JS.Settings.Add("palette_ranges", "js:ranges")

'series 1
chart1.JS.Settings.Add("series.0.defaultPoint_marker_outline_color", "white")
chart1.JS.Settings.Add("series.0.defaultPoint_marker_fill", "none")
chart1.JS.Settings.Add("series.0.defaultPoint_marker_size", "28")
chart1.JS.Settings.Add("series.0.yAxis", "yAx2")

'series 2
chart1.JS.Settings.Add("series.1.type", "gauge column roundcaps")
chart1.JS.Settings.Add("series.1.yAxis", "yAx3")
chart1.JS.Settings.Add("series.1.xAxis", "xAx2")
chart1.JS.Settings.Add("series.1.defaultPoint_outline_width", "0")
chart1.JS.Settings.Add("series.2.yAxis", "yAx1")

chart1.SeriesCollection.Add(getData(0,23))
chart1.SeriesCollection.Add(getData(0, 52))
chart1.SeriesCollection.Add(getData(0,86))
End Sub
Function getData(ByVal x As Double, ByVal y As Double) As Series
Dim sc As SeriesCollection = New SeriesCollection()
Dim series As Series = New Series()
series.Type = SeriesType.Marker
Dim label1 As dotnetCHARTING.Label = New dotnetCHARTING.Label()
label1.Text = "<span style='fontSize:40px'>" & y.ToString() & "%</span>"
label1.LineAlignment = StringAlignment.Center
series.ShapeLabels.Add(label1)

Dim el As Element = New Element()
el.YValue = y
el.XValue = x
series.Elements.Add(el)
Return series
End Function

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
var ranges = [
{ value: [0, 30], color: '#77E6B4' },
{ value: [30, 70], color: '#FFD221' },
{ value: [70, 100], color: '#FF5353' }
];
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="chart1" runat="server" Width="300" Height="700"/>

</div>
</body>
</html>

Sample FilenameJsCircularMixedGauges.aspx
Version10.3
Uses DatabaseNo

JS Charting

Gallery

JS Circular Mixed Gauges