Gallery

Gallery > Financial Charts

JS NavigatorFinancialMA

Demonstrates the use of the SimpleMovingAverages and GeometricalMovingAverage

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 Financial Moving Average Sample</title>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates the use of the SimpleMovingAverages and GeometricalMovingAverage

// First we declare a chart of type FinancialChart
// The Financial Chart
chart.TempDirectory = "temp";
chart.Debug = false;
chart.Size = "800X600";
chart.PaletteName = Palette.Three;
chart.YAxis.Label.Text = "Price (USD)";
chart.YAxis.FormatString = "currency";

chart.DefaultSeries.Type = SeriesType.Spline;

chart.JS.Enabled = true;
chart.Navigator.Enabled = true;

// Modify the x axis labels.
chart.XAxis.Scale = Scale.Time;

// Here we load data samples from the FinancialCompany table from within chartsample.mdb
DataEngine priceDataEngine = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"]);
priceDataEngine.ChartObject = chart;
priceDataEngine.ChartType = ChartType.Financial;
priceDataEngine.DateGrouping = TimeInterval.Day;
priceDataEngine.StartDate = new DateTime(2021, 4, 1);
priceDataEngine.EndDate = new DateTime(2021, 6, 30);
priceDataEngine.SqlStatement = @"SELECT TransDate, HighPrice, LowPrice, OpenPrice, ClosePrice FROM FinancialCompany WHERE TransDate >= #STARTDATE# AND TransDate <= #ENDDATE# ORDER BY TransDate";
priceDataEngine.DataFields = "xAxis=TransDate,High=HighPrice,Low=LowPrice,Open=OpenPrice,Close=ClosePrice";

SeriesCollection sc = priceDataEngine.GetSeries();
Series prices = null;
if (sc.Count > 0)
prices = sc[0];
else
return;

prices.Type = SeriesTypeFinancial.CandleStick;

CalendarPattern cp = new CalendarPattern(TimeInterval.Day, TimeInterval.Week, "0000001");
prices.Trim(cp, ElementValue.XDateTime);
prices.Name = "Prices";
chart.SeriesCollection.Add(prices);

// Create the second chart area
ChartArea volumeChartArea = new ChartArea();
volumeChartArea.YAxis.Label.Text = "Volume";
volumeChartArea.Series.Name = "Stock Volume";
volumeChartArea.HeightPercentage = 20;
chart.ExtraChartAreas.Add(volumeChartArea);

// Add a volume series to the chart area
DataEngine volumeDataEngine = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"]);
volumeDataEngine.DateGrouping = TimeInterval.Days;
volumeDataEngine.StartDate = new DateTime(2021, 4, 1);
volumeDataEngine.EndDate = new DateTime(2021, 6, 30);
volumeDataEngine.SqlStatement = @"SELECT TransDate,volume FROM FinancialCompany WHERE TransDate >= #STARTDATE# AND TransDate <= #ENDDATE# ORDER BY TransDate";
volumeDataEngine.DataFields = "xAxis=TransDate,yAxis=Volume";

Series volumes = volumeDataEngine.GetSeries()[0];
volumes.Trim(cp, ElementValue.XDateTime);
volumes.Name = "Volume";
volumes.Type = SeriesType.Bar;
volumeChartArea.SeriesCollection.Add(volumes);

/*
* Financial Series Moving Average Indicators
*/

// Here we display the financial simple moving average over a period of three days for the Prices Series
chart.SeriesCollection.Add(FinancialEngine.SimpleMovingAverage(prices, ElementValue.High, 3));

// Here we display the statistical simple moving average for the Volumes Series
volumeChartArea.SeriesCollection.Add(StatisticalEngine.SimpleMovingAverage(volumes, 3));

// Here we display the financial geometrical moving avereage over a period of three days for the Prices Series
chart.SeriesCollection.Add(FinancialEngine.GeometricMovingAverage(prices, ElementValue.Low, 3));

// NOTE: The other moving average indicators can be displayed in a similar way

// Kairi indicator - measures as a percentage of the price the divergence between the a moving
// average (generally the simple moving average) of the price and the price itself.
ChartArea kairiChartArea = new ChartArea();
kairiChartArea.YAxis.Label.Text = "Kairi";
kairiChartArea.HeightPercentage = 20;
kairiChartArea.YAxis.FormatString = "n2";
chart.ExtraChartAreas.Add(kairiChartArea);

Series kairi = FinancialEngine.Kairi(prices, ElementValue.High,
FinancialEngine.SimpleMovingAverage(prices, ElementValue.High, 3));
kairi.Type = SeriesType.Cylinder;
kairiChartArea.SeriesCollection.Add(kairi);

}

</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="chart" runat="server" />
</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 Financial Moving Average Sample</title>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates the use of the SimpleMovingAverages and GeometricalMovingAverage

' First we declare a chart of type FinancialChart
' The Financial Chart
chart.TempDirectory = "temp"
chart.Debug = False
chart.Size = "800X600"
chart.PaletteName = Palette.Three
chart.YAxis.Label.Text = "Price (USD)"
chart.YAxis.FormatString = "currency"

chart.DefaultSeries.Type = SeriesType.Spline

chart.JS.Enabled = True
chart.Navigator.Enabled = True

' Modify the x axis labels.
chart.XAxis.Scale = Scale.Time

' Here we load data samples from the FinancialCompany table from within chartsample.mdb
Dim priceDataEngine As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"))
priceDataEngine.ChartObject = chart
priceDataEngine.ChartType = ChartType.Financial
priceDataEngine.DateGrouping = TimeInterval.Day
priceDataEngine.StartDate = New DateTime(2021, 4, 1)
priceDataEngine.EndDate = New DateTime(2021, 6, 30)
priceDataEngine.SqlStatement = "SELECT TransDate, HighPrice, LowPrice, OpenPrice, ClosePrice FROM FinancialCompany WHERE TransDate >= #STARTDATE# AND TransDate <= #ENDDATE# ORDER BY TransDate"
priceDataEngine.DataFields = "xAxis=TransDate,High=HighPrice,Low=LowPrice,Open=OpenPrice,Close=ClosePrice"

Dim sc As SeriesCollection = priceDataEngine.GetSeries()
Dim prices As Series = Nothing
If sc.Count > 0 Then
prices = sc(0)
Else
Return
End If

prices.Type = SeriesTypeFinancial.CandleStick

Dim cp As CalendarPattern = New CalendarPattern(TimeInterval.Day, TimeInterval.Week, "0000001")
prices.Trim(cp, ElementValue.XDateTime)
prices.Name = "Prices"
chart.SeriesCollection.Add(prices)

' Create the second chart area
Dim volumeChartArea As ChartArea = New ChartArea()
volumeChartArea.YAxis.Label.Text = "Volume"
volumeChartArea.Series.Name = "Stock Volume"
volumeChartArea.HeightPercentage = 20
chart.ExtraChartAreas.Add(volumeChartArea)

' Add a volume series to the chart area
Dim volumeDataEngine As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"))
volumeDataEngine.DateGrouping = TimeInterval.Days
volumeDataEngine.StartDate = New DateTime(2021, 4, 1)
volumeDataEngine.EndDate = New DateTime(2021, 6, 30)
volumeDataEngine.SqlStatement = "SELECT TransDate,volume FROM FinancialCompany WHERE TransDate >= #STARTDATE# AND TransDate <= #ENDDATE# ORDER BY TransDate"
volumeDataEngine.DataFields = "xAxis=TransDate,yAxis=Volume"

Dim volumes As Series = volumeDataEngine.GetSeries()(0)
volumes.Trim(cp, ElementValue.XDateTime)
volumes.Name = "Volume"
volumes.Type = SeriesType.Bar
volumeChartArea.SeriesCollection.Add(volumes)

'
'* Financial Series Moving Average Indicators
'

' Here we display the financial simple moving average over a period of three days for the Prices Series
chart.SeriesCollection.Add(FinancialEngine.SimpleMovingAverage(prices, ElementValue.High, 3))

' Here we display the statistical simple moving average for the Volumes Series
volumeChartArea.SeriesCollection.Add(StatisticalEngine.SimpleMovingAverage(volumes, 3))

' Here we display the financial geometrical moving avereage over a period of three days for the Prices Series
chart.SeriesCollection.Add(FinancialEngine.GeometricMovingAverage(prices, ElementValue.Low, 3))

' NOTE: The other moving average indicators can be displayed in a similar way

' Kairi indicator - measures as a percentage of the price the divergence between the a moving
' average (generally the simple moving average) of the price and the price itself.
Dim kairiChartArea As ChartArea = New ChartArea()
kairiChartArea.YAxis.Label.Text = "Kairi"
kairiChartArea.HeightPercentage = 20
kairiChartArea.YAxis.FormatString = "n2"
chart.ExtraChartAreas.Add(kairiChartArea)

Dim kairi As Series = FinancialEngine.Kairi(prices, ElementValue.High, FinancialEngine.SimpleMovingAverage(prices, ElementValue.High, 3))
kairi.Type = SeriesType.Cylinder
kairiChartArea.SeriesCollection.Add(kairi)

End Sub

</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsNavigatorFinancialMA.aspx
Version8.0
Uses DatabaseYes

JS Charting

Gallery

JS NavigatorFinancialMA