Gallery
JS Linear Labels
<%@ 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