Gallery

Gallery > Financial Charts

JS Candlestick Vol

Demonstrates candlestick and volume chart area with JSC Navigator.

Download Show C# Code Show VB Code

<%@ 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 Financial bars and volume chart area with JSC Navigator.

// Set the directory temp directory
Chart.TempDirectory = "temp";
Chart.Debug = true;

//Enable JSC
Chart.JS.Enabled = true;
// Enable Navigator
Chart.Navigator.Enabled = true;

//Hide the navigator UI elements.
Chart.Navigator.PreviewAreaHeight = 0;
Chart.Navigator.EnableXScrollbar = false;
Chart.Navigator.NavigationBar.Visible = false;

Chart.YAxis.FormatString = "C0";
Chart.YAxis.Label.Text = "Price";

// Set the financial chart type
Chart.DefaultSeries.Type = SeriesTypeFinancial.CandleStick;

// Set he chart size.
Chart.Width = 600;
Chart.Height = 350;

SeriesCollection sc = getData();
// Add the random data.
Chart.SeriesCollection.Add(sc[0]);

ChartArea ca = new ChartArea(sc[1]);
Chart.ExtraChartAreas.Add(ca);
ca.YAxis.Label.Text = "Volume";
ca.HeightPercentage = 35;

}

private SeriesCollection getData()
{
SeriesCollection SC = new SeriesCollection();
Random myR = new Random();
for (int i = 0; i < 2; i++)
{
Series s = new Series();
if (i == 0)
{
s.Name = "X Company Price";
}
else
{
s.Name = "Volume";
s.Type = SeriesType.Bar;
}
double startPrice = 50;

DateTime startDT = new DateTime(2021, 1, 1);
for (int b = 1; b < 76; b++)
{
Element e = new Element();
e.XDateTime = startDT;
startDT = startDT.AddDays(1);
if (i == 0)
{
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);
}
}
else
{
e.YValue = 1000000 + myR.Next(1000000);
}
s.Elements.Add(e);
}
SC.Add(s);
}
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 Financial bars and volume chart area with JSC Navigator.

' Set the directory temp directory
Chart.TempDirectory = "temp"
Chart.Debug = True

'Enable JSC
Chart.JS.Enabled = True
' Enable Navigator
Chart.Navigator.Enabled = True

'Hide the navigator UI elements.
Chart.Navigator.PreviewAreaHeight = 0
Chart.Navigator.EnableXScrollbar = False
Chart.Navigator.NavigationBar.Visible = False

Chart.YAxis.FormatString = "C0"
Chart.YAxis.Label.Text = "Price"

' Set the financial chart type
Chart.DefaultSeries.Type = SeriesTypeFinancial.CandleStick

' Set he chart size.
Chart.Width = 600
Chart.Height = 350

Dim sc As SeriesCollection = getData()
' Add the random data.
Chart.SeriesCollection.Add(sc(0))

Dim ca As ChartArea = New ChartArea(sc(1))
Chart.ExtraChartAreas.Add(ca)
ca.YAxis.Label.Text = "Volume"
ca.HeightPercentage = 35

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 1
Dim s As Series = New Series()
If i = 0 Then
s.Name = "X Company Price"
Else
s.Name = "Volume"
s.Type = SeriesType.Bar
End If
Dim startPrice As Double = 50

Dim startDT As DateTime = New DateTime(2021, 1, 1)
For b As Integer = 1 To 75
Dim e As Element = New Element()
e.XDateTime = startDT
startDT = startDT.AddDays(1)
If i = 0 Then
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
Else
e.YValue = 1000000 + myR.Next(1000000)
End If
s.Elements.Add(e)
Next b
SC.Add(s)
Next i
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>

Sample FilenameGallery/qf4.aspx
Version8.0
Uses DatabaseNo

JS Charting

Gallery

JS Candlestick Vol