Gallery

Gallery > Lines Charts

JS Slope Chart

This sample deomonstrates a slope chart with point axis ticks axis tick.

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)
{
// This sample deomonstrates a slope chart with point axis ticks axis tick.
Chart.Type = ChartType.Combo;
Chart.Title = "Electricity Production (GWh) in United States by Fuel Type";
Chart.Size = "440x370";
Chart.TempDirectory = "temp";
Chart.LegendBox.Visible = false;
Chart.Debug = false;
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#757575"), ColorTranslator.FromHtml("#F9A825"), ColorTranslator.FromHtml("#689F38"), ColorTranslator.FromHtml("#0277BD"), ColorTranslator.FromHtml("#73D2DE") };
Chart.JS.Enabled = true;
Chart.JS.InitialAnimationDuration = 600;
Chart.DefaultAxis.DefaultTick.Label.Font = new Font("Tahoma", 12);
Chart.DefaultSeries.FirstElement.YAxisTick.Label.Text = "js:'<span style=\"color:%color\">%seriesName</span>'";
Chart.DefaultSeries.LastElement.YAxisTick.Label.Text = "js:'<span style=\"color:%color\">%yValue</span>'";
Chart.DefaultSeries.LastElement.YAxisTick.AxisID = "y2";
Chart.DefaultElement.ToolTip = "%icon %seriesName {%xValue:date yyyy}<br><b>%yValue GWh</b>";

Chart.YAxis.Scale = Scale.Range;
Chart.YAxis.Minimum = -100000;
Chart.YAxis.Maximum = 2000000;
Chart.YAxis.DefaultTick.Line.Length = 0;
Chart.YAxis.DefaultTick.Value = "";
Chart.XAxis.Scale = Scale.Time;

Axis axisReplica = Chart.YAxis.Calculate("");
axisReplica.JsID = "y2";
axisReplica.Orientation = dotnetCHARTING.Orientation.Right;
axisReplica.DefaultTick.Value = "";
Chart.AxisCollection.Add(axisReplica);
Chart.DefaultElement.ShowValue = false;
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.DefaultSeries.DefaultElement.Marker.Type = ElementMarkerType.Circle;
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.ChartArea.ClearColors();
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.XAxis.TimeIntervalAdvanced = new TimeIntervalAdvanced(TimeInterval.Year, 18);

// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx
SeriesCollection mySC = getRandomData();
// Add the random data.
Chart.SeriesCollection.Add(mySC);

}
SeriesCollection getRandomData()
{
SeriesCollection SC = new SeriesCollection();
Series s = new Series();
s.Name = "Coal";
Element el = new Element();
el.XDateTime = new DateTime(2001, 1, 1);
el.YValue = 1882826;
el.SmartLabel.LineAlignment = StringAlignment.Center;
el.SmartLabel.Offset = new Point(10, 10);
s.Elements.Add(el);
el = new Element();
el.XDateTime = new DateTime(2019, 1, 1);
el.YValue = 999507;
s.Elements.Add(el);
SC.Add(s);

s = new Series();
s.Name = "Natural gas";
el = new Element();
el.XDateTime = new DateTime(2001, 1, 1);
el.YValue = 554940;
s.Elements.Add(el);
el = new Element();
el.XDateTime = new DateTime(2019, 1, 1);
el.YValue = 1474734;
s.Elements.Add(el);
SC.Add(s);

s = new Series();
s.Name = "Nuclear";
el = new Element();
el.XDateTime = new DateTime(2001, 1, 1);
el.YValue = 768826;
s.Elements.Add(el);
el = new Element();
el.XDateTime = new DateTime(2019, 1, 1);
el.YValue = 809409;
s.Elements.Add(el);
SC.Add(s);

s = new Series();
s.Name = "Hydroelectric";
el = new Element();
el.XDateTime = new DateTime(2001, 1, 1);
el.YValue = 213749;
s.Elements.Add(el);
el = new Element();
el.XDateTime = new DateTime(2019, 1, 1);
el.YValue = 222377;
s.Elements.Add(el);
SC.Add(s);

s = new Series();
s.Name = "Wind";
el = new Element();
el.XDateTime = new DateTime(2001, 1, 1);
el.YValue = 6737;
s.Elements.Add(el);
el = new Element();
el.XDateTime = new DateTime(2019, 1, 1);
el.YValue = 389785;
s.Elements.Add(el);
SC.Add(s);

return SC;
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="440px" Height="350px" />
</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)
' This sample deomonstrates a slope chart with point axis ticks axis tick.
Chart.Type = ChartType.Combo
Chart.Title = "Electricity Production (GWh) in United States by Fuel Type"
Chart.Size = "440x370"
Chart.TempDirectory = "temp"
Chart.LegendBox.Visible = False
Chart.Debug = False
Chart.Palette = New Color() { ColorTranslator.FromHtml("#757575"), ColorTranslator.FromHtml("#F9A825"), ColorTranslator.FromHtml("#689F38"), ColorTranslator.FromHtml("#0277BD"), ColorTranslator.FromHtml("#73D2DE") }
Chart.JS.Enabled = True
Chart.JS.InitialAnimationDuration = 600
Chart.DefaultAxis.DefaultTick.Label.Font = New Font("Tahoma", 12)
Chart.DefaultSeries.FirstElement.YAxisTick.Label.Text = "js:'<span style=""color:%color"">%seriesName</span>'"
Chart.DefaultSeries.LastElement.YAxisTick.Label.Text = "js:'<span style=""color:%color"">%yValue</span>'"
Chart.DefaultSeries.LastElement.YAxisTick.AxisID = "y2"
Chart.DefaultElement.ToolTip = "%icon %seriesName {%xValue:date yyyy}<br><b>%yValue GWh</b>"

Chart.YAxis.Scale = Scale.Range
Chart.YAxis.Minimum = -100000
Chart.YAxis.Maximum = 2000000
Chart.YAxis.DefaultTick.Line.Length = 0
Chart.YAxis.DefaultTick.Value = ""
Chart.XAxis.Scale = Scale.Time

Dim axisReplica As Axis = Chart.YAxis.Calculate("")
axisReplica.JsID = "y2"
axisReplica.Orientation = dotnetCHARTING.Orientation.Right
axisReplica.DefaultTick.Value = ""
Chart.AxisCollection.Add(axisReplica)
Chart.DefaultElement.ShowValue = False
Chart.DefaultSeries.Type = SeriesType.Line
Chart.DefaultSeries.DefaultElement.Marker.Type = ElementMarkerType.Circle
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.ChartArea.ClearColors()
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.XAxis.TimeIntervalAdvanced = New TimeIntervalAdvanced(TimeInterval.Year, 18)

' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Classic samples folder
' - Help File > Data Tutorials
' - Sample: features/DataEngine.aspx
Dim mySC As SeriesCollection = getRandomData()
' Add the random data.
Chart.SeriesCollection.Add(mySC)

End Sub
Function getRandomData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim s As Series = New Series()
s.Name = "Coal"
Dim el As Element = New Element()
el.XDateTime = New DateTime(2001, 1, 1)
el.YValue = 1882826
el.SmartLabel.LineAlignment = StringAlignment.Center
el.SmartLabel.Offset = New Point(10, 10)
s.Elements.Add(el)
el = New Element()
el.XDateTime = New DateTime(2019, 1, 1)
el.YValue = 999507
s.Elements.Add(el)
SC.Add(s)

s = New Series()
s.Name = "Natural gas"
el = New Element()
el.XDateTime = New DateTime(2001, 1, 1)
el.YValue = 554940
s.Elements.Add(el)
el = New Element()
el.XDateTime = New DateTime(2019, 1, 1)
el.YValue = 1474734
s.Elements.Add(el)
SC.Add(s)

s = New Series()
s.Name = "Nuclear"
el = New Element()
el.XDateTime = New DateTime(2001, 1, 1)
el.YValue = 768826
s.Elements.Add(el)
el = New Element()
el.XDateTime = New DateTime(2019, 1, 1)
el.YValue = 809409
s.Elements.Add(el)
SC.Add(s)

s = New Series()
s.Name = "Hydroelectric"
el = New Element()
el.XDateTime = New DateTime(2001, 1, 1)
el.YValue = 213749
s.Elements.Add(el)
el = New Element()
el.XDateTime = New DateTime(2019, 1, 1)
el.YValue = 222377
s.Elements.Add(el)
SC.Add(s)

s = New Series()
s.Name = "Wind"
el = New Element()
el.XDateTime = New DateTime(2001, 1, 1)
el.YValue = 6737
s.Elements.Add(el)
el = New Element()
el.XDateTime = New DateTime(2019, 1, 1)
el.YValue = 389785
s.Elements.Add(el)
SC.Add(s)

Return SC
End Function
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="440px" Height="350px" />
</div>
</body>
</html>

Sample FilenameJsSlopeChart.aspx
Version10.1
Uses DatabaseNo

JS Charting

Gallery

JS Slope Chart