JS Finance Candle
Demonstrates a finance candlestick chart.
<%@ 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 finance candlestick chart.
chart.JS.Enabled = true;
// Set the title.
chart.Title="Financial Chart";
// Set 3D
chart.Use3D = true;
// Set the financial chart type
chart.DefaultSeries.Type = SeriesTypeFinancial.CandleStick;
// Set the legend template
chart.LegendBox.Template = "IconName";
chart.LegendBox.Position = LegendBoxPosition.ChartArea;
chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopLeft;
// Set the directory where the images will be stored.
chart.TempDirectory="temp";
// Set the format
chart.XAxis.FormatString = "d";
// Set the time padding for the x axis.
chart.XAxis.TimePadding = new TimeSpan(5,0,0,0);
// Set he chart size.
chart.Width = 700;
chart.Height = 350;
chart.Palette = new Color[] { };//prevent setting Palette, use default JS Palette
// Add the random data.
chart.SeriesCollection.Add(getData());
}
private SeriesCollection getData()
{
SeriesCollection SC = new SeriesCollection();
Random myR = new Random();
for(int i = 0; i < 1; i++)
{
Series s = new Series();
s.Name = "FinancialCompany";
double startPrice = 50;
DateTime startDT = new DateTime(2020,1,1);
for(int b = 0; b <75; b++)
{
Element e = new Element();
e.XDateTime = startDT;
startDT = startDT.AddDays(1);
if(myR.Next(10) > 5)
startPrice += myR.Next(5);
else
startPrice -= myR.Next(3);
e.Close = startPrice;
//e.Volume = myR.Next(100);
if(myR.Next(10) > 5)
e.Open = startPrice + myR.Next(6);
else
e.Open = startPrice - myR.Next(6);
if(e.Open > e.Close)
{
e.High = e.Open + myR.Next(6);
e.Low = e.Close - myR.Next(6);
}
else
{
e.High = e.Close + myR.Next(6);
e.Low = e.Open - myR.Next(6);
}
s.Elements.Add(e);
}
SC.Add(s);
}
return(SC);
}
SeriesCollection getLiveData()
{
string sqlStatement = "SELECT TransDate,OpenPrice,ClosePrice,HighPrice,LowPrice FROM FinancialCompany WHERE TransDate >= #STARTDATE# AND TransDate <= #ENDDATE# ORDER BY TransDate";
DataEngine de = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"], sqlStatement);
de.StartDate = new DateTime(2021, 1, 1);
de.EndDate = new DateTime(2021, 4, 1);
de.ChartObject = chart; // Necessary to view any errors the dataEngine may throw.
de.DataFields = "Xvalue=TransDate,Open=OpenPrice,Close=ClosePrice,High=HighPrice,Low=LowPrice";
SeriesCollection sc = de.GetFinancialSeries();
sc[0].Name = "FinancialCompany";
return sc;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Gallery Sample</title></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" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates a finance candlestick chart.
chart.JS.Enabled = True
' Set the title.
chart.Title="Financial Chart"
' Set 3D
chart.Use3D = True
' Set the financial chart type
chart.DefaultSeries.Type = SeriesTypeFinancial.CandleStick
' Set the legend template
chart.LegendBox.Template = "IconName"
chart.LegendBox.Position = LegendBoxPosition.ChartArea
chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopLeft
' Set the directory where the images will be stored.
chart.TempDirectory="temp"
' Set the format
chart.XAxis.FormatString = "d"
' Set the time padding for the x axis.
chart.XAxis.TimePadding = New TimeSpan(5,0,0,0)
' Set he chart size.
chart.Width = 700
chart.Height = 350
chart.Palette = New Color() { } 'prevent setting Palette, use default JS Palette
' Add the random data.
chart.SeriesCollection.Add(getData())
End Sub
Private Function getData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim myR As Random = New Random()
For i As Integer = 0 To 0
Dim s As Series = New Series()
s.Name = "FinancialCompany"
Dim startPrice As Double = 50
Dim startDT As DateTime = New DateTime(2020,1,1)
For b As Integer = 0 To 74
Dim e As Element = New Element()
e.XDateTime = startDT
startDT = startDT.AddDays(1)
If myR.Next(10) > 5 Then
startPrice += myR.Next(5)
Else
startPrice -= myR.Next(3)
End If
e.Close = startPrice
'e.Volume = myR.Next(100);
If myR.Next(10) > 5 Then
e.Open = startPrice + myR.Next(6)
Else
e.Open = startPrice - myR.Next(6)
End If
If e.Open > e.Close Then
e.High = e.Open + myR.Next(6)
e.Low = e.Close - myR.Next(6)
Else
e.High = e.Close + myR.Next(6)
e.Low = e.Open - myR.Next(6)
End If
s.Elements.Add(e)
Next b
SC.Add(s)
Next i
Return(SC)
End Function
Function getLiveData() As SeriesCollection
Dim sqlStatement As String = "SELECT TransDate,OpenPrice,ClosePrice,HighPrice,LowPrice FROM FinancialCompany WHERE TransDate >= #STARTDATE# AND TransDate <= #ENDDATE# ORDER BY TransDate"
Dim de As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"), sqlStatement)
de.StartDate = New DateTime(2021, 1, 1)
de.EndDate = New DateTime(2021, 4, 1)
de.ChartObject = chart ' Necessary to view any errors the dataEngine may throw.
de.DataFields = "Xvalue=TransDate,Open=OpenPrice,Close=ClosePrice,High=HighPrice,Low=LowPrice"
Dim sc As SeriesCollection = de.GetFinancialSeries()
sc(0).Name = "FinancialCompany"
Return sc
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Gallery Sample</title></head>
<body>
<div align="center">
<dotnet:chart id="chart" runat="server"/>
</div>
</body>
</html>
Previous