Gallery

Gallery > Gauge Charts

JS Gauge Linear Days

Demonstrates a circular column gauge chart.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates a circular column gauge chart.

// Set the chart size.
Chart.Size = "340x300";

// Enable JSCharting
Chart.JS.Enabled = true;

// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";

// Specify chart type.
Chart.Type = ChartType.Gauges;
Chart.ShadingEffectMode = ShadingEffectMode.Three;
Chart.DefaultSeries.GaugeType = GaugeType.Vertical;
Chart.DefaultSeries.GaugeLinearStyle = GaugeLinearStyle.Normal;

Chart.Debug = false;
Chart.LegendBox.Visible = false;

//Padding around the visual
Chart.ChartArea.Padding = 40;

//Set title
Chart.TitleBox.Label.Text = "Daily Steps";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);

Chart.TitleBox.Position = TitleBoxPosition.Full;
Chart.TitleBox.Label.Alignment = StringAlignment.Center;

//Clear the boxes.
Chart.TitleBox.ClearColors();
Chart.ChartArea.ClearColors();

//Enable x grid lines
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230, 230, 230);
//Enable x axis tick labels.
Chart.XAxis.DefaultTick.Label.Text = "%value";

//Offset labels
Chart.XAxis.DefaultTick.Label.Offset = new Point(0, 20);

//Hide y axis
Chart.YAxis.ClearValues = true;
Chart.YAxis.Line.Width = 0;

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

}
SeriesCollection getData()
{
SeriesCollection SC = new SeriesCollection();
Series days = new Series();
days.Name = "Daily Steps";
days.DefaultElement.Color = Color.FromArgb(225, 7, 21);
Element e = new Element();
e.Name = "Mo";
e.YValue = 3516;
days.Elements.Add(e);

e = new Element();
e.Name = "Tu";
e.YValue = 6854;
days.Elements.Add(e);

e = new Element();
e.Name = "We";
e.YValue = 9461;
days.Elements.Add(e);
SC.Add(days);

e = new Element();
e.Name = "Th";
e.YValue = 7523;
days.Elements.Add(e);

e = new Element();
e.Name = "Fr";
e.YValue = 5256;
days.Elements.Add(e);

e = new Element();
e.Name = "Sa";
e.YValue = 2546;
days.Elements.Add(e);

e = new Element();
e.Name = "Su";
e.YValue = 3425;
days.Elements.Add(e);
return SC;
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
<script type="text/javascript" src="temp/jsc/icons/weather/moon.js"></script>
<script type="text/javascript" src="temp/jsc/icons/material/image/wb-sunny.js"></script>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates a circular column gauge chart.

' Set the chart size.
Chart.Size = "340x300"

' Enable JSCharting
Chart.JS.Enabled = True

' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"

' Specify chart type.
Chart.Type = ChartType.Gauges
Chart.ShadingEffectMode = ShadingEffectMode.Three
Chart.DefaultSeries.GaugeType = GaugeType.Vertical
Chart.DefaultSeries.GaugeLinearStyle = GaugeLinearStyle.Normal

Chart.Debug = False
Chart.LegendBox.Visible = False

'Padding around the visual
Chart.ChartArea.Padding = 40

'Set title
Chart.TitleBox.Label.Text = "Daily Steps"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)

Chart.TitleBox.Position = TitleBoxPosition.Full
Chart.TitleBox.Label.Alignment = StringAlignment.Center

'Clear the boxes.
Chart.TitleBox.ClearColors()
Chart.ChartArea.ClearColors()

'Enable x grid lines
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230, 230, 230)
'Enable x axis tick labels.
Chart.XAxis.DefaultTick.Label.Text = "%value"

'Offset labels
Chart.XAxis.DefaultTick.Label.Offset = New Point(0, 20)

'Hide y axis
Chart.YAxis.ClearValues = True
Chart.YAxis.Line.Width = 0

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

End Sub
Function getData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim days As Series = New Series()
days.Name = "Daily Steps"
days.DefaultElement.Color = Color.FromArgb(225, 7, 21)
Dim e As Element = New Element()
e.Name = "Mo"
e.YValue = 3516
days.Elements.Add(e)

e = New Element()
e.Name = "Tu"
e.YValue = 6854
days.Elements.Add(e)

e = New Element()
e.Name = "We"
e.YValue = 9461
days.Elements.Add(e)
SC.Add(days)

e = New Element()
e.Name = "Th"
e.YValue = 7523
days.Elements.Add(e)

e = New Element()
e.Name = "Fr"
e.YValue = 5256
days.Elements.Add(e)

e = New Element()
e.Name = "Sa"
e.YValue = 2546
days.Elements.Add(e)

e = New Element()
e.Name = "Su"
e.YValue = 3425
days.Elements.Add(e)
Return SC
End Function

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
<script type="text/javascript" src="temp/jsc/icons/weather/moon.js"></script>
<script type="text/javascript" src="temp/jsc/icons/material/image/wb-sunny.js"></script>
</html>

Sample FilenameJsGaugeLinearDays.aspx
Version9.0
Uses DatabaseNo

JS Charting

Gallery

JS Gauge Linear Days