Gallery

Gallery > Circular Gauges Charts

JS Circular Marker Styles

Demonstrates Gauge with styled axis line breaks and a data point on top of the axis line.

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 Gauge with styled axis line breaks and a data point on top of the axis line.
setDefaults(chart1);
chart1.JS.Settings.Add("defaultPoint_marker_type", "triangle");
chart1.JS.Settings.Add("defaultPoint_marker_rotate", "auto");
chart1.JS.Settings.Add("defaultPoint_marker_size", "30");
chart1.JS.Settings.Add("defaultPoint_marker_outline_width", "10");
chart1.JS.Settings.Add("palette_ranges", "js:ranges");
chart1.YAxis.Interval = 10;
chart1.YAxis.DefaultTick.Label.Text = "";
chart1.YAxis.LineBreaks.Gap = 0.033;
chart1.YAxis.TickLabelPadding = 13;
// Add the random data.
chart1.SeriesCollection.Add(getData(0.45,23));

setDefaults(chart2);
chart2.JS.Settings.Add("defaultPoint_marker_type_path", "js:'M24 0c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12s12-5.4 12-12V12c0-6.6-5.4-12-12-12z'");
chart2.JS.Settings.Add("defaultPoint_marker_rotate", "auto");
chart2.JS.Settings.Add("defaultPoint_marker_size", "35");
chart2.JS.Settings.Add("defaultPoint_marker_outline_width", "10");
chart2.JS.Settings.Add("palette_ranges", "js:ranges");
chart2.YAxis.Interval = 10;
chart2.YAxis.DefaultTick.Label.Text = "";
chart2.YAxis.LineBreaks.Gap = 0.033;
chart2.YAxis.TickLabelPadding = 13;
// Add the random data.
chart2.SeriesCollection.Add(getData(0,48));

setDefaults(chart3);
chart3.JS.Settings.Add("defaultPoint_marker_type", "arrow-up");
chart3.JS.Settings.Add("defaultPoint_marker_rotate", "auto");
chart3.JS.Settings.Add("defaultPoint_marker_size", "35");
chart3.JS.Settings.Add("defaultPoint_marker_outline_width", "5");
chart3.JS.Settings.Add("palette_ranges", "js:ranges2");
chart3.YAxis.Interval = 20;
chart3.YAxis.LineBreaks.Gap = 0.06;
chart3.YAxis.TickLabelPadding = -5;
// Add the random data.
chart3.SeriesCollection.Add(getData(0.5,84));

}
void setDefaults(Chart ch)
{
ch.TempDirectory = "temp";
ch.Type = ChartType.Gauges;
ch.DefaultSeries.GaugeType = GaugeType.CircularBars;
ch.Debug = true;
ch.Palette = new Color[] { };
ch.LegendBox.Visible = false;

ch.JS.Enabled = true;

ch.JS.ControlID = "chart";
//Specifies animation duration for all animatios.
ch.JS.InitialAnimationDuration = 0;
ch.DefaultSeries.LegendEntry.Visible = false;
ch.DefaultElement.Marker.Size = 30;
ch.DefaultElement.Marker.Color = ColorTranslator.FromHtml("#77E6B4");

//Used to position marker on top of axis line.
ch.JS.Settings.Add("xAxis_scale_range", "[0,1]");
ch.JS.Settings.Add("defaultPoint_marker_fill", "white");

ch.JS.Settings.Add("defaultPoint_marker_outline_color", "currentColor");
ch.YAxis.ScaleRange = new ScaleRange(0, 100);
ch.YAxis.LineBreaks.Enabled = true;
ch.YAxis.Line.Width = 15;

ch.JS.Settings.Add("yAxis.line.color", "smartPalette");
ch.JS.Settings.Add("palette_pointValue", "%yValue");

ch.JS.Settings.Add("defaultSeries_opacity", "1");
ch.JS.Settings.Add("defaultSeries_mouseTracking_enabled", "false");
}
Series getData(double x,double y)
{
SeriesCollection sc = new SeriesCollection();
Series series = new Series();
series.Type = SeriesType.Marker;
series.Name = "score";
dotnetCHARTING.Label label1 = new dotnetCHARTING.Label();
label1.Text = "<span style='fontSize:60px'>" + 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;
}
SeriesCollection getLiveData()
{
DataEngine de = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"]);
de.ChartObject = chart1; // 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>
<script type="text/javascript">
var chart;
var ranges = [
{ value: [0, 30], color: '#FF5353' },
{ value: [30, 70], color: '#FFD221' },
{ value: [70, 100], color: '#77E6B4' }
];
var ranges2 = [
{ value: [0, 20], color: '#ffdb00' },
{ value: [20, 80], color: '#ffb600' },
{ value: [80, 100], color: '#ff0000' },
];

</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="chart1" runat="server" Width="300" Height="280"/>
<dnc:Chart ID="chart2" runat="server" Width="300" Height="280"/>
<dnc:Chart ID="chart3" runat="server" Width="300" Height="280"/>
</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 Gauge with styled axis line breaks and a data point on top of the axis line.
setDefaults(chart1)
chart1.JS.Settings.Add("defaultPoint_marker_type", "triangle")
chart1.JS.Settings.Add("defaultPoint_marker_rotate", "auto")
chart1.JS.Settings.Add("defaultPoint_marker_size", "30")
chart1.JS.Settings.Add("defaultPoint_marker_outline_width", "10")
chart1.JS.Settings.Add("palette_ranges", "js:ranges")
chart1.YAxis.Interval = 10
chart1.YAxis.DefaultTick.Label.Text = ""
chart1.YAxis.LineBreaks.Gap = 0.033
chart1.YAxis.TickLabelPadding = 13
' Add the random data.
chart1.SeriesCollection.Add(getData(0.45,23))

setDefaults(chart2)
chart2.JS.Settings.Add("defaultPoint_marker_type_path", "js:'M24 0c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12s12-5.4 12-12V12c0-6.6-5.4-12-12-12z'")
chart2.JS.Settings.Add("defaultPoint_marker_rotate", "auto")
chart2.JS.Settings.Add("defaultPoint_marker_size", "35")
chart2.JS.Settings.Add("defaultPoint_marker_outline_width", "10")
chart2.JS.Settings.Add("palette_ranges", "js:ranges")
chart2.YAxis.Interval = 10
chart2.YAxis.DefaultTick.Label.Text = ""
chart2.YAxis.LineBreaks.Gap = 0.033
chart2.YAxis.TickLabelPadding = 13
' Add the random data.
chart2.SeriesCollection.Add(getData(0,48))

setDefaults(chart3)
chart3.JS.Settings.Add("defaultPoint_marker_type", "arrow-up")
chart3.JS.Settings.Add("defaultPoint_marker_rotate", "auto")
chart3.JS.Settings.Add("defaultPoint_marker_size", "35")
chart3.JS.Settings.Add("defaultPoint_marker_outline_width", "5")
chart3.JS.Settings.Add("palette_ranges", "js:ranges2")
chart3.YAxis.Interval = 20
chart3.YAxis.LineBreaks.Gap = 0.06
chart3.YAxis.TickLabelPadding = -5
' Add the random data.
chart3.SeriesCollection.Add(getData(0.5,84))

End Sub
Sub setDefaults(ByVal ch As Chart)
ch.TempDirectory = "temp"
ch.Type = ChartType.Gauges
ch.DefaultSeries.GaugeType = GaugeType.CircularBars
ch.Debug = True
ch.Palette = New Color() { }
ch.LegendBox.Visible = False

ch.JS.Enabled = True

ch.JS.ControlID = "chart"
'Specifies animation duration for all animatios.
ch.JS.InitialAnimationDuration = 0
ch.DefaultSeries.LegendEntry.Visible = False
ch.DefaultElement.Marker.Size = 30
ch.DefaultElement.Marker.Color = ColorTranslator.FromHtml("#77E6B4")

'Used to position marker on top of axis line.
ch.JS.Settings.Add("xAxis_scale_range", "[0,1]")
ch.JS.Settings.Add("defaultPoint_marker_fill", "white")

ch.JS.Settings.Add("defaultPoint_marker_outline_color", "currentColor")
ch.YAxis.ScaleRange = New ScaleRange(0, 100)
ch.YAxis.LineBreaks.Enabled = True
ch.YAxis.Line.Width = 15

ch.JS.Settings.Add("yAxis.line.color", "smartPalette")
ch.JS.Settings.Add("palette_pointValue", "%yValue")

ch.JS.Settings.Add("defaultSeries_opacity", "1")
ch.JS.Settings.Add("defaultSeries_mouseTracking_enabled", "false")
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
series.Name = "score"
Dim label1 As dotnetCHARTING.Label = New dotnetCHARTING.Label()
label1.Text = "<span style='fontSize:60px'>" & 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
Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"))
de.ChartObject = chart1 ' 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>
<script type="text/javascript">
var chart;
var ranges = [
{ value: [0, 30], color: '#FF5353' },
{ value: [30, 70], color: '#FFD221' },
{ value: [70, 100], color: '#77E6B4' }
];
var ranges2 = [
{ value: [0, 20], color: '#ffdb00' },
{ value: [20, 80], color: '#ffb600' },
{ value: [80, 100], color: '#ff0000' },
];

</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="chart1" runat="server" Width="300" Height="280"/>
<dnc:Chart ID="chart2" runat="server" Width="300" Height="280"/>
<dnc:Chart ID="chart3" runat="server" Width="300" Height="280"/>
</div>
</body>
</html>

Sample FilenameJsCircularMarkerStyles.aspx
Version10.3
Uses DatabaseNo

JS Charting

Gallery

JS Circular Marker Styles