Gallery

Gallery > Financial Charts

Candlestick

Financial candlestick.

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 CandleStick chart.
// Set the chart Type
Chart.Type = ChartType.Combo;
// Set the financial chart type
Chart.DefaultSeries.Type = SeriesTypeFinancial.CandleStick;

// Label the chart areas
Chart.ChartArea.Label.Text = "Stock Price for X Company";

// Set the legend template
Chart.LegendBox.Template = "IconName";

// 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;

// Add the random data.
SeriesCollection sc = getData();
Chart.SeriesCollection.Add(sc);
// Add a volume series to the chart area
Series volumes = new Series("Volumes");
foreach(Element el in sc[0].Elements)
{
Element newEl = new Element();
newEl.YValue = el.Volume;
newEl.XDateTime = el.XDateTime;
if (el.Close < el.Open)
newEl.Color = Color.FromArgb(254, 76, 20);
else
newEl.Color = Color.FromArgb(66, 133, 244);
volumes.Elements.Add(newEl);
}
// Create the second chart area
ChartArea volumeChartArea = new ChartArea();
volumeChartArea.Label.Text = "Stock Volume";
volumeChartArea.YAxis.Label.Text = "Volumes";
volumeChartArea.HeightPercentage = 40;
volumeChartArea.DefaultElement.ToolTip="%YValue";
volumeChartArea.YAxis.DefaultTick.GridLine.Color = Color.Empty;
Chart.ExtraChartAreas.Add(volumeChartArea);
volumes.Type = SeriesType.Bar;
volumeChartArea.SeriesCollection.Add (volumes);
}
private SeriesCollection getData()
{
SeriesCollection SC = new SeriesCollection();
Random myR = new Random();
for(int i = 1; i < 2; i++)
{
Series s = new Series();
s.Name = "X Company";
double startPrice = 50;

DateTime startDT = new DateTime(2020,4,26);
for(int b = 1; b < 74; 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(26);
else
e.Open = startPrice - myR.Next(26);

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);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Gallery Sample</title></head>
<body>
<div style="text-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 CandleStick chart.
' Set the chart Type
Chart.Type = ChartType.Combo
' Set the financial chart type
Chart.DefaultSeries.Type = SeriesTypeFinancial.CandleStick

' Label the chart areas
Chart.ChartArea.Label.Text = "Stock Price for X Company"

' Set the legend template
Chart.LegendBox.Template = "IconName"

' 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

' Add the random data.
Dim sc As SeriesCollection = getData()
Chart.SeriesCollection.Add(sc)
' Add a volume series to the chart area
Dim volumes As Series = New Series("Volumes")
For Each el As Element In sc(0).Elements
Dim newEl As Element = New Element()
newEl.YValue = el.Volume
newEl.XDateTime = el.XDateTime
If el.Close < el.Open Then
newEl.Color = Color.FromArgb(254, 76, 20)
Else
newEl.Color = Color.FromArgb(66, 133, 244)
End If
volumes.Elements.Add(newEl)
Next el
' Create the second chart area
Dim volumeChartArea As ChartArea = New ChartArea()
volumeChartArea.Label.Text = "Stock Volume"
volumeChartArea.YAxis.Label.Text = "Volumes"
volumeChartArea.HeightPercentage = 40
volumeChartArea.DefaultElement.ToolTip="%YValue"
volumeChartArea.YAxis.DefaultTick.GridLine.Color = Color.Empty
Chart.ExtraChartAreas.Add(volumeChartArea)
volumes.Type = SeriesType.Bar
volumeChartArea.SeriesCollection.Add (volumes)
End Sub
Private Function getData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim myR As Random = New Random()
For i As Integer = 1 To 1
Dim s As Series = New Series()
s.Name = "X Company"
Dim startPrice As Double = 50

Dim startDT As DateTime = New DateTime(2020,4,26)
For b As Integer = 1 To 73
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(26)
Else
e.Open = startPrice - myR.Next(26)
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
</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Gallery Sample</title></head>
<body>
<div style="text-align:center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>

Sample FilenameGallery/g01.aspx
VersionLegacy (Pre 3.0)
Uses DatabaseNo

JS Charting

Gallery

Candlestick