Gallery

Gallery > Lines Charts

JS Running Average

Calculate running averages over columns.

Download Show C# Code Show VB Code

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

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// This sample demonstrates how to calculate running averages over columns.
Chart.Type = ChartType.Combo;
Chart.Width = 740;
Chart.Height = 350;
Chart.TempDirectory = "temp";
Chart.Debug = false;

Chart.TitleBox.Label.Text = "<b>Apple Revenue and Moving Average</b><br>(by fiscal quarter)";
Chart.TitleBox.ClearColors();
Chart.ShowDateInTitle = false;

//LegendBox
Chart.LegendBox.Template = "%icon %name";
Chart.LegendBox.LabelStyle.Font = new Font("Tahoma", 11, FontStyle.Bold);
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.XAxis.Scale = Scale.Time;

//JS settings
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "callbackFunc";

Chart.DefaultSeries.DefaultElement.ShowValue = false;
Chart.DefaultSeries.DefaultElement.Outline.Width = 0;

Chart.DefaultElement.ToolTip = "%name<br><b>{%yValue:c0}M</b>";

DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/apple-revenue.csv";
de.DataFields = "name=date,yvalue=revenue";//cvs must have header: date,total
SeriesCollection sc = de.GetSeries();
Series ser1 = new Series("Revenue");
for (int i = 0; i < sc[0].Elements.Count; i++)
{
Element el = new Element();
el.YValue = sc[0].Elements[i].YValue;
el.Name = sc[0].Elements[i].Name;
el.XDateTime = new DateTime(int.Parse(el.Name.Substring(3, 4)), (int.Parse(el.Name.Substring(1, 1))) * 3 - 2, 1);
ser1.Elements.Add(el);
}
Chart.SeriesCollection.Add(ser1);
Series quarter4MA = new Series("4 Quarter MA");
quarter4MA.Type = SeriesType.Line;
quarter4MA.DefaultElement.Color = Color.Red;
quarter4MA.DefaultElement.Marker.Size = 0;
quarter4MA.Elements.Add(runningAverage(ser1.Elements, 4));
Chart.SeriesCollection.Add(quarter4MA);
Series quarter8MA = new Series("8 Quarter MA");
quarter8MA.Type = SeriesType.Line;
quarter8MA.DefaultElement.Color = Color.Yellow;
quarter8MA.DefaultElement.Marker.Size = 0;
quarter8MA.Elements.Add(runningAverage(ser1.Elements, 8));
Chart.SeriesCollection.Add(quarter8MA);
}
ElementCollection runningAverage(ElementCollection data, int period)
{
List<double> sum = new List<double>();
ElementCollection result = new ElementCollection();
for (int i = 0; i < data.Count; i++)
{
sum.Add(data[i].YValue);
if (i > period - 1)
{
sum.RemoveAt(0);
Element el = new Element(data[i].Name);
el.XDateTime = data[i].XDateTime;
el.YValue = Sum(sum) / period;
result.Add(el);
}
}
return result;
}
double Sum(List<double> list)
{
double total = 0;
foreach (double d in list)
total += d;
return total;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script>
function callbackFunc(chart) {
var series = chart.series('8 Quarter MA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
series.visible(false);
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 900px; margin: 0px auto;" />
</body>
</html>

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

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample demonstrates how to calculate running averages over columns.
Chart.Type = ChartType.Combo
Chart.Width = 740
Chart.Height = 350
Chart.TempDirectory = "temp"
Chart.Debug = False

Chart.TitleBox.Label.Text = "<b>Apple Revenue and Moving Average</b><br>(by fiscal quarter)"
Chart.TitleBox.ClearColors()
Chart.ShowDateInTitle = False

'LegendBox
Chart.LegendBox.Template = "%icon %name"
Chart.LegendBox.LabelStyle.Font = New Font("Tahoma", 11, FontStyle.Bold)
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.XAxis.Scale = Scale.Time

'JS settings
Chart.JS.Enabled = True
Chart.JS.RenderCallback = "callbackFunc"

Chart.DefaultSeries.DefaultElement.ShowValue = False
Chart.DefaultSeries.DefaultElement.Outline.Width = 0

Chart.DefaultElement.ToolTip = "%name<br><b>{%yValue:c0}M</b>"

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/apple-revenue.csv"
de.DataFields = "name=date,yvalue=revenue" 'cvs must have header: date,total
Dim sc As SeriesCollection = de.GetSeries()
Dim ser1 As Series = New Series("Revenue")
For i As Integer = 0 To sc(0).Elements.Count - 1
Dim el As Element = New Element()
el.YValue = sc(0).Elements(i).YValue
el.Name = sc(0).Elements(i).Name
el.XDateTime = New DateTime(Integer.Parse(el.Name.Substring(3, 4)), (Integer.Parse(el.Name.Substring(1, 1))) * 3 - 2, 1)
ser1.Elements.Add(el)
Next i
Chart.SeriesCollection.Add(ser1)
Dim quarter4MA As Series = New Series("4 Quarter MA")
quarter4MA.Type = SeriesType.Line
quarter4MA.DefaultElement.Color = Color.Red
quarter4MA.DefaultElement.Marker.Size = 0
quarter4MA.Elements.Add(runningAverage(ser1.Elements, 4))
Chart.SeriesCollection.Add(quarter4MA)
Dim quarter8MA As Series = New Series("8 Quarter MA")
quarter8MA.Type = SeriesType.Line
quarter8MA.DefaultElement.Color = Color.Yellow
quarter8MA.DefaultElement.Marker.Size = 0
quarter8MA.Elements.Add(runningAverage(ser1.Elements, 8))
Chart.SeriesCollection.Add(quarter8MA)
End Sub
Function runningAverage(ByVal data As ElementCollection, ByVal period As Integer) As ElementCollection
Dim sum As List(Of Double) = New List(Of Double)()
Dim result As ElementCollection = New ElementCollection()
For i As Integer = 0 To data.Count - 1
sum.Add(data(i).YValue)
If i > period - 1 Then
sum.RemoveAt(0)
Dim el As Element = New Element(data(i).Name)
el.XDateTime = data(i).XDateTime
el.YValue = Me.Sum(sum) / period
result.Add(el)
End If
Next i
Return result
End Function
Function Sum(ByVal list As List(Of Double)) As Double
Dim total As Double = 0
For Each d As Double In list
total += d
Next d
Return total
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script>
function callbackFunc(chart) {
var series = chart.series('8 Quarter MA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
series.visible(false);
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 900px; margin: 0px auto;" />
</body>
</html>

Sample FilenameJsRunningAverage.aspx
Version10.1
Uses DatabaseNo

JS Charting

Gallery

JS Running Average