Gallery

Gallery > Lines Charts

JS Linear Trendline

Demonstrates how to create a Linear trendline calculation with prediction.

Download Show C# Code Show VB Code

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

<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Trend Line</title>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates how to create a Linear trendline calculation with prediction.

Chart.Type = ChartType.Combo;
Chart.Title = "Real Gross Domestic Product in US, Not Seasonally Adjusted";
Chart.Width = 750;
Chart.Height = 300;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.XAxis.Scale = Scale.Time;
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.DefaultSeries.Line.Width = 2;
Chart.DefaultSeries.DefaultElement.Transparency = 45;
Chart.LegendBox.Visible = false;
Chart.DefaultSeries.DefaultElement.Marker.Type = ElementMarkerType.None;
Chart.YAxis.DefaultTick.Label.Text = "$%valueB";
//Js settings
Chart.JS.Enabled = true;
Chart.XAxis.Crosshair = new AxisTick();

string str = "y =" + "3,393.1914" + " + " + "0.1966" + "x<br>R<sup>2</sup> = " + "0.9613";
Annotation an = new Annotation(str);
an.Position = new Point(60, 40);
an.DynamicSize = false;
an.Label.Font = new Font("Tahoma", 12);
an.Background.Color = Color.Transparent;
an.Line.Color = Color.Transparent;
Chart.Annotations.Add(an);

// First we get our data, if you would like to get the data from a database you need to use
// the data engine. See sample: features/dataEngine.aspx. Or the dataEngine tutorial in the help file.
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/real-gdp-us.csv";
de.DataFields = "xdatetime=date,yAxis=value";//cvs must have header: date,total
SeriesCollection sc = de.GetSeries();

// Get a trend line from series 1. Because only the SeriesCollection Calculate method returns a series a
// SeriesCollection is instantiated and the method is used.
Series trend = sc.Calculate("Series 1 Trend", Calculation.TrendLineLinear, 20);
//splite the trend series to 2 series: trendActual and trendPredict
Series trendActual = new Series();
trendActual.Type = SeriesType.Line;
Series trendPredict = new Series();
// Set the type to line
trendPredict.Type = SeriesType.Line;
trendPredict.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;
trendPredict.DefaultElement.Color = Color.Red;
for (int i = 0; i < sc[0].Elements.Count; i++)
{
trend.Elements[i].XDateTime = sc[0].Elements[i].XDateTime;
trendActual.Elements.Add(trend.Elements[i]);
}
DateTime dt = sc[0].Elements[sc[0].Elements.Count - 1].XDateTime;
Element first = trend.Elements[sc[0].Elements.Count - 1].Clone();
Element last = trend.Elements[trend.Elements.Count - 1].Clone();
last.XDateTime = new DateTime(2024, 7, 1);
trendPredict.Elements.Add(first);
trendPredict.Elements.Add(last);

// Add the trend lines to the collection.
sc.Add(trendActual);
sc.Add(trendPredict);

// Add the collection.
Chart.SeriesCollection.Add(sc);

}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

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

<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Trend Line</title>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates how to create a Linear trendline calculation with prediction.

Chart.Type = ChartType.Combo
Chart.Title = "Real Gross Domestic Product in US, Not Seasonally Adjusted"
Chart.Width = 750
Chart.Height = 300
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.XAxis.Scale = Scale.Time
Chart.DefaultSeries.Type = SeriesType.Line
Chart.DefaultSeries.Line.Width = 2
Chart.DefaultSeries.DefaultElement.Transparency = 45
Chart.LegendBox.Visible = False
Chart.DefaultSeries.DefaultElement.Marker.Type = ElementMarkerType.None
Chart.YAxis.DefaultTick.Label.Text = "$%valueB"
'Js settings
Chart.JS.Enabled = True
Chart.XAxis.Crosshair = New AxisTick()

Dim str As String = "y =" & "3,393.1914" & " + " & "0.1966" & "x<br>R<sup>2</sup> = " & "0.9613"
Dim an As Annotation = New Annotation(str)
an.Position = New Point(60, 40)
an.DynamicSize = False
an.Label.Font = New Font("Tahoma", 12)
an.Background.Color = Color.Transparent
an.Line.Color = Color.Transparent
Chart.Annotations.Add(an)

' First we get our data, if you would like to get the data from a database you need to use
' the data engine. See sample: features/dataEngine.aspx. Or the dataEngine tutorial in the help file.
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/real-gdp-us.csv"
de.DataFields = "xdatetime=date,yAxis=value" 'cvs must have header: date,total
Dim sc As SeriesCollection = de.GetSeries()

' Get a trend line from series 1. Because only the SeriesCollection Calculate method returns a series a
' SeriesCollection is instantiated and the method is used.
Dim trend As Series = sc.Calculate("Series 1 Trend", Calculation.TrendLineLinear, 20)
'splite the trend series to 2 series: trendActual and trendPredict
Dim trendActual As Series = New Series()
trendActual.Type = SeriesType.Line
Dim trendPredict As Series = New Series()
' Set the type to line
trendPredict.Type = SeriesType.Line
trendPredict.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash
trendPredict.DefaultElement.Color = Color.Red
For i As Integer = 0 To sc(0).Elements.Count - 1
trend.Elements(i).XDateTime = sc(0).Elements(i).XDateTime
trendActual.Elements.Add(trend.Elements(i))
Next i
Dim dt As DateTime = sc(0).Elements(sc(0).Elements.Count - 1).XDateTime
Dim first As Element = trend.Elements(sc(0).Elements.Count - 1).Clone()
Dim last As Element = trend.Elements(trend.Elements.Count - 1).Clone()
last.XDateTime = New DateTime(2024, 7, 1)
trendPredict.Elements.Add(first)
trendPredict.Elements.Add(last)

' Add the trend lines to the collection.
sc.Add(trendActual)
sc.Add(trendPredict)

' Add the collection.
Chart.SeriesCollection.Add(sc)

End Sub
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

Sample FilenameJsLinearTrendline.aspx
Version10.1
Uses DatabaseNo

JS Charting

Gallery

JS Linear Trendline