Gallery

Gallery > Gauge Charts

JS Linear Labels

Demonstrates using multiple labels with linear bar gauges.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{

// Demonstrates using multiple labels with linear bar gauges.

Chart.Type = ChartType.Gauges;
Chart.DefaultSeries.GaugeType = GaugeType.Horizontal;
Chart.DefaultSeries.Type = GaugeType.Horizontal;

Chart.JS.Enabled = true;

// Set the size
Chart.Width = 360;
Chart.Height = 340;
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;

Chart.LegendBox.Visible = false;

Chart.ChartArea.ClearColors();
Chart.XAxis.StaticColumnWidth = 10;
Chart.YAxis.ScaleRange = new ScaleRange(0, 100);
Chart.YAxis.Line.Width = 0;
Chart.YAxis.ClearValues = true;

Chart.XAxis.DefaultTick.Label.Text = "";
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(220, 220, 220);

Chart.DefaultSeries.DefaultElement.Color = Color.FromArgb(247, 93, 90);

Chart.DefaultElement.ToolTip = "<b>%name:</b> %yValue";

Series s = new Series();
s.Type = SeriesType.Column;
s.Name = "Brightness";
Element el = new Element();
el.Name = "Brightness";
el.YValue = 80;
s.Elements.Add(el);
SetLabels(s, "material/image/brightness-4");
Chart.SeriesCollection.Add(s);

s = new Series();
s.Type = SeriesType.Column;
s.Name = "Saturation";
el = new Element();
el.Name = "Saturation";
el.YValue = 50;
s.Elements.Add(el);
SetLabels(s, "material/image/color-lens");
Chart.SeriesCollection.Add(s);

s = new Series();
s.Type = SeriesType.Column;
s.Name = "Blur";
el = new Element();
el.Name = "Blur";
el.YValue = 2;
SetLabels(s, "material/image/blur-on");
s.Elements.Add(el);

// Add the random data.
Chart.SeriesCollection.Add(s);

}

void SetLabels(Series s, string iconName)
{
dotnetCHARTING.Label l = new dotnetCHARTING.Label("<icon verticalAlign=bottom name=" + iconName + " size=55 outerShape=square padding=10 fill=#b32d25 margin_bottom=0>");
l.Alignment = StringAlignment.Near;
l.Offset = new Point(-10, -10);
s.ShapeLabels.Add(l);

l = new dotnetCHARTING.Label("<span style=\"color:#838281;\">%name</span><br/> <span style=\"fontSize: 42\">%sum</span>");
l.Alignment = StringAlignment.Near;
s.ShapeLabels.Add(l);
}

</script>
</head>
<body>
<div align="center">
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

' Demonstrates using multiple labels with linear bar gauges.

Chart.Type = ChartType.Gauges
Chart.DefaultSeries.GaugeType = GaugeType.Horizontal
Chart.DefaultSeries.Type = GaugeType.Horizontal

Chart.JS.Enabled = True

' Set the size
Chart.Width = 360
Chart.Height = 340
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False

Chart.LegendBox.Visible = False

Chart.ChartArea.ClearColors()
Chart.XAxis.StaticColumnWidth = 10
Chart.YAxis.ScaleRange = New ScaleRange(0, 100)
Chart.YAxis.Line.Width = 0
Chart.YAxis.ClearValues = True

Chart.XAxis.DefaultTick.Label.Text = ""
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(220, 220, 220)

Chart.DefaultSeries.DefaultElement.Color = Color.FromArgb(247, 93, 90)

Chart.DefaultElement.ToolTip = "<b>%name:</b> %yValue"

Dim s As Series = New Series()
s.Type = SeriesType.Column
s.Name = "Brightness"
Dim el As Element = New Element()
el.Name = "Brightness"
el.YValue = 80
s.Elements.Add(el)
SetLabels(s, "material/image/brightness-4")
Chart.SeriesCollection.Add(s)

s = New Series()
s.Type = SeriesType.Column
s.Name = "Saturation"
el = New Element()
el.Name = "Saturation"
el.YValue = 50
s.Elements.Add(el)
SetLabels(s, "material/image/color-lens")
Chart.SeriesCollection.Add(s)

s = New Series()
s.Type = SeriesType.Column
s.Name = "Blur"
el = New Element()
el.Name = "Blur"
el.YValue = 2
SetLabels(s, "material/image/blur-on")
s.Elements.Add(el)

' Add the random data.
Chart.SeriesCollection.Add(s)

End Sub

Sub SetLabels(ByVal s As Series, ByVal iconName As String)
Dim l As dotnetCHARTING.Label = New dotnetCHARTING.Label("<icon verticalAlign=bottom name=" & iconName & " size=55 outerShape=square padding=10 fill=#b32d25 margin_bottom=0>")
l.Alignment = StringAlignment.Near
l.Offset = New Point(-10, -10)
s.ShapeLabels.Add(l)

l = New dotnetCHARTING.Label("<span style=""color:#838281;"">%name</span><br/> <span style=""fontSize: 42"">%sum</span>")
l.Alignment = StringAlignment.Near
s.ShapeLabels.Add(l)
End Sub

</script>
</head>
<body>
<div align="center">
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsLinearLabels.aspx
Version9.0
Uses DatabaseNo

JS Charting

Gallery

JS Linear Labels