Gallery

Gallery > Gauge Charts

JS Gauge Linear

Demonstrates a linear 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 linear column gauge chart.

// Set the chart size.
Chart.Size = "740x240";

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

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

Chart.DefaultElement.ToolTip = "js:tooltipFormatter";

Chart.ChartArea.Padding = 20;

//set title
Chart.TitleBox.Label.Text = "Jan 1st 2020 Activity";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);

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

Chart.TitleBox.ClearColors();
Chart.ChartArea.ClearColors();

Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230, 230, 230);
Chart.XAxis.SpacingPercentage = 60F;
Chart.XAxis.StaticColumnWidth = 30;
Chart.XAxis.TickLabelPadding = 20;
Chart.YAxis.Orientation = dotnetCHARTING.Orientation.Top;
Chart.YAxis.Scale = Scale.Range;
Chart.YAxis.Minimum = 0;
Chart.YAxis.Maximum = 24;
Chart.YAxis.Interval = 6;

//Add custom ticks
Chart.YAxis.ExtraTicks.Add(new AxisTick(0,"<icon name=weather/moon size=18 fill=#888987>"));
Chart.YAxis.ExtraTicks.Add(new AxisTick(12,"<icon name=material/image/wb-sunny size=22 fill=#888987>"));
Chart.YAxis.ExtraTicks.Add(new AxisTick(6,"6AM"));
Chart.YAxis.ExtraTicks.Add(new AxisTick(18,"6PM"));
Chart.YAxis.ExtraTicks.Add(new AxisTick(12,"12PM"));

// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;

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

}
SeriesCollection getData()
{
SeriesCollection SC = new SeriesCollection();
Series sleeping = new Series();
sleeping.Name = "Sleep";
sleeping.DefaultElement.Color = Color.FromArgb(225, 7, 21);
Element e = new Element();
e.Name = "Sleep";
e.YValueStart = 0;
e.YValue = 6.2;
sleeping.Elements.Add(e);

e = new Element();
e.Name = "Sleep";
e.YValueStart = 23;
e.YValue = 24;
sleeping.Elements.Add(e);
SC.Add(sleeping);

Series walking = new Series();
walking.Name = "Walking";
walking.DefaultElement.Color = Color.FromArgb(63, 220, 0);
e = new Element();
e.Name = "Walking";
e.YValueStart = 6.75;
e.YValue = 7.2;
walking.Elements.Add(e);

e = new Element();
e.Name = "Walking";
e.YValueStart = 9.12;
e.YValue = 9.82;
walking.Elements.Add(e);

e = new Element();
e.Name = "Walking";
e.YValueStart = 14.12;
e.YValue = 14.58;
walking.Elements.Add(e);

SC.Add(walking);

Series standing = new Series();
standing.Name = "Standing";
standing.DefaultElement.Color = Color.FromArgb(62, 186, 225);

e = new Element();
e.Name = "Standing";
e.YValueStart = 8.2;
e.YValue = 8.22;
standing.Elements.Add(e);

e = new Element();
e.Name = "Standing";
e.YValueStart = 12.7;
e.YValue = 12.92;
standing.Elements.Add(e);

e = new Element();
e.Name = "Standing";
e.YValueStart = 15.5;
e.YValue = 15.57;
standing.Elements.Add(e);

SC.Add(standing);

return SC;
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<script type="text/javascript">
function tooltipFormatter(point) {
var twoDigit = function (v) { return ("0" + v).slice(-2); };
var formatHour = function (v) {
var ampm = v <= 12 ? 'PM' : 'AM',
hour = Math.floor(v) % 12,
min = Math.floor(v % 1 * 60);
return (hour || 12) + ':' + twoDigit(min) + ampm;
};
return '<b>%name ' + '<br/>' + formatHour(point.y[0]) + ' - ' + formatHour(point.y[1]);
}
</script>
</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 linear column gauge chart.

' Set the chart size.
Chart.Size = "740x240"

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

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

Chart.DefaultElement.ToolTip = "js:tooltipFormatter"

Chart.ChartArea.Padding = 20

'set title
Chart.TitleBox.Label.Text = "Jan 1st 2020 Activity"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)

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

Chart.TitleBox.ClearColors()
Chart.ChartArea.ClearColors()

Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(230, 230, 230)
Chart.XAxis.SpacingPercentage = 60F
Chart.XAxis.StaticColumnWidth = 30
Chart.XAxis.TickLabelPadding = 20
Chart.YAxis.Orientation = dotnetCHARTING.Orientation.Top
Chart.YAxis.Scale = Scale.Range
Chart.YAxis.Minimum = 0
Chart.YAxis.Maximum = 24
Chart.YAxis.Interval = 6

'Add custom ticks
Chart.YAxis.ExtraTicks.Add(New AxisTick(0,"<icon name=weather/moon size=18 fill=#888987>"))
Chart.YAxis.ExtraTicks.Add(New AxisTick(12,"<icon name=material/image/wb-sunny size=22 fill=#888987>"))
Chart.YAxis.ExtraTicks.Add(New AxisTick(6,"6AM"))
Chart.YAxis.ExtraTicks.Add(New AxisTick(18,"6PM"))
Chart.YAxis.ExtraTicks.Add(New AxisTick(12,"12PM"))

' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False

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

End Sub
Function getData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim sleeping As Series = New Series()
sleeping.Name = "Sleep"
sleeping.DefaultElement.Color = Color.FromArgb(225, 7, 21)
Dim e As Element = New Element()
e.Name = "Sleep"
e.YValueStart = 0
e.YValue = 6.2
sleeping.Elements.Add(e)

e = New Element()
e.Name = "Sleep"
e.YValueStart = 23
e.YValue = 24
sleeping.Elements.Add(e)
SC.Add(sleeping)

Dim walking As Series = New Series()
walking.Name = "Walking"
walking.DefaultElement.Color = Color.FromArgb(63, 220, 0)
e = New Element()
e.Name = "Walking"
e.YValueStart = 6.75
e.YValue = 7.2
walking.Elements.Add(e)

e = New Element()
e.Name = "Walking"
e.YValueStart = 9.12
e.YValue = 9.82
walking.Elements.Add(e)

e = New Element()
e.Name = "Walking"
e.YValueStart = 14.12
e.YValue = 14.58
walking.Elements.Add(e)

SC.Add(walking)

Dim standing As Series = New Series()
standing.Name = "Standing"
standing.DefaultElement.Color = Color.FromArgb(62, 186, 225)

e = New Element()
e.Name = "Standing"
e.YValueStart = 8.2
e.YValue = 8.22
standing.Elements.Add(e)

e = New Element()
e.Name = "Standing"
e.YValueStart = 12.7
e.YValue = 12.92
standing.Elements.Add(e)

e = New Element()
e.Name = "Standing"
e.YValueStart = 15.5
e.YValue = 15.57
standing.Elements.Add(e)

SC.Add(standing)

Return SC
End Function

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<script type="text/javascript">
function tooltipFormatter(point) {
var twoDigit = function (v) { return ("0" + v).slice(-2); };
var formatHour = function (v) {
var ampm = v <= 12 ? 'PM' : 'AM',
hour = Math.floor(v) % 12,
min = Math.floor(v % 1 * 60);
return (hour || 12) + ':' + twoDigit(min) + ampm;
};
return '<b>%name ' + '<br/>' + formatHour(point.y[0]) + ' - ' + formatHour(point.y[1]);
}
</script>
</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 FilenameJsGaugeLinear.aspx
Version9.0
Uses DatabaseNo

JS Charting

Gallery

JS Gauge Linear