Gallery

Gallery > Financial Charts

JS FinanceCSV

Demonstrates a rounded candlestick chart with volume, zooming, and y axis crosshair.

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 a rounded candlestick chart with volume, zooming, and y axis crosshair.
// Set he chart size.
chart.Width = 840;
chart.Height = 450;
chart.Debug = false;
chart.PaletteName = Palette.Default7;
// Set the directory where the images will be stored.
chart.TempDirectory = "temp";

chart.JS.Enabled = true;
chart.JS.AxisToZoom = "x";

// Set the legend template
chart.LegendBox.Template = "IconName";
chart.LegendBox.Position = LegendBoxPosition.ChartArea;
chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopLeft;

chart.YAxis.Scale = Scale.Range;
chart.YAxis.JsID = "yMain";
chart.YAxis.Crosshair = new AxisTick();

Axis yVolume = chart.YAxis.Calculate("");
yVolume.JsID = "yVol";
yVolume.Orientation = dotnetCHARTING.Orientation.Left;
yVolume.ClearValues = true;
yVolume.Line.Width = 0;
yVolume.ScaleRange.ValueLow = 500000;
yVolume.ScaleRange.ValueHigh= 8000000;
chart.AxisCollection.Add( yVolume);

DataEngine priceDataEngine = new DataEngine();
priceDataEngine.ChartObject = chart;
priceDataEngine.ChartType = ChartType.Financial;
priceDataEngine.Data = "~/data/resources/googl-8-20-8-21.csv";
priceDataEngine.DataFields = "Xvalue=Date,Open=Open,Close=Adj Close,High=High,Low=Low";
SeriesCollection sc = priceDataEngine.GetSeries();
Series prices = null;
if (sc.Count > 0)
prices = sc[0];
else
return;

prices.Type = SeriesTypeFinancial.CandleStick;
prices.YAxis = chart.YAxis;
prices.Name = "GOOGLE Weekly";
chart.SeriesCollection.Add(prices);

// Add a volume series
DataEngine volumeDataEngine = new DataEngine();
volumeDataEngine.Data = "~/data/resources/googl-8-20-8-21.csv";
volumeDataEngine.DataFields = "xAxis=Date,yAxis=Volume";
Series volumes = volumeDataEngine.GetSeries()[0];
volumes.YAxis = yVolume;
volumes.YAxis.ClearValues = true;
volumes.Type = SeriesType.Column;
volumes.DefaultElement.Transparency = 60;
volumes.Name = "Volume";
volumes.Type = SeriesType.Bar;
chart.SeriesCollection.Add(volumes);

chart.JS.Settings.Add("series.1.yAxis", "yVol");
chart.JS.Settings.Add("yAxis.0.orientation", "opposite");
chart.JS.Settings.Add("yAxis.1.visible", "false");
chart.JS.Settings.Add("yAxis.1.scale.syncWith", "none");
chart.JS.Settings.Add("defaultPoint_radius", "100");
}
</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 rounded candlestick chart with volume, zooming, and y axis crosshair.
' Set he chart size.
chart.Width = 840
chart.Height = 450
chart.Debug = False
chart.PaletteName = Palette.Default7
' Set the directory where the images will be stored.
chart.TempDirectory = "temp"

chart.JS.Enabled = True
chart.JS.AxisToZoom = "x"

' Set the legend template
chart.LegendBox.Template = "IconName"
chart.LegendBox.Position = LegendBoxPosition.ChartArea
chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopLeft

chart.YAxis.Scale = Scale.Range
chart.YAxis.JsID = "yMain"
chart.YAxis.Crosshair = New AxisTick()

Dim yVolume As Axis = chart.YAxis.Calculate("")
yVolume.JsID = "yVol"
yVolume.Orientation = dotnetCHARTING.Orientation.Left
yVolume.ClearValues = True
yVolume.Line.Width = 0
yVolume.ScaleRange.ValueLow = 500000
yVolume.ScaleRange.ValueHigh= 8000000
chart.AxisCollection.Add(yVolume)

Dim priceDataEngine As DataEngine = New DataEngine()
priceDataEngine.ChartObject = chart
priceDataEngine.ChartType = ChartType.Financial
priceDataEngine.Data = "~/data/resources/googl-8-20-8-21.csv"
priceDataEngine.DataFields = "Xvalue=Date,Open=Open,Close=Adj Close,High=High,Low=Low"
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
prices.YAxis = chart.YAxis
prices.Name = "GOOGLE Weekly"
chart.SeriesCollection.Add(prices)

' Add a volume series
Dim volumeDataEngine As DataEngine = New DataEngine()
volumeDataEngine.Data = "~/data/resources/googl-8-20-8-21.csv"
volumeDataEngine.DataFields = "xAxis=Date,yAxis=Volume"
Dim volumes As Series = volumeDataEngine.GetSeries()(0)
volumes.YAxis = yVolume
volumes.YAxis.ClearValues = True
volumes.Type = SeriesType.Column
volumes.DefaultElement.Transparency = 60
volumes.Name = "Volume"
volumes.Type = SeriesType.Bar
chart.SeriesCollection.Add(volumes)

chart.JS.Settings.Add("series.1.yAxis", "yVol")
chart.JS.Settings.Add("yAxis.0.orientation", "opposite")
chart.JS.Settings.Add("yAxis.1.visible", "false")
chart.JS.Settings.Add("yAxis.1.scale.syncWith", "none")
chart.JS.Settings.Add("defaultPoint_radius", "100")
End Sub
</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 FilenameJsFinanceCSV.aspx
Version10.3
Uses DatabaseNo

JS Charting

Gallery

JS FinanceCSV