JS Navigator
Demonstrates using the JS navigator to show a finance chart with volume.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script type="text/C#" runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates using the JS navigator to show a finance chart with volume.
chart.Size = "640x400";
chart.TempDirectory = "temp";
chart.Debug = false;
chart.Palette = new Color[] { Color.FromArgb(255, 47, 107, 220), Color.FromArgb(255, 30, 156, 255) };
chart.ChartAreaSpacing = 0;
chart.JS.Enabled = true;
chart.DefaultElement.ToolTip = "Price: %yValue";
// Setup main chart axis settings
chart.YAxis.FormatString = "C0";
chart.YAxis.Label.Text = "Price";
// Enable the navigator
chart.Navigator.Enabled = true;
// Database date period
DateTime startDate = new System.DateTime(2021, 7, 30, 0, 0, 0);
DateTime endDate = new System.DateTime(2021, 12, 31, 23, 59, 59);
SeriesCollection mySC = getPriceData(startDate,endDate);
// Add the data.
chart.SeriesCollection.Add(mySC);
// --- Setup the volume area.
SeriesCollection mySC2 = getVolumeData(startDate,endDate);
ChartArea ca = new ChartArea();
ca.HeightPercentage = 33;
ca.YAxis.DefaultTick.Label.Text = "js: function(v){ return ''+ JSC.formatString(v/100000,'c0')+'M'; }";
ca.YAxis.Label.Text = "Volume";
ca.SeriesCollection.Add(mySC2);
chart.ExtraChartAreas.Add(ca);
}
SeriesCollection getPriceData(DateTime startDate,DateTime endDate)
{
string connectionString = ConfigurationManager.AppSettings["DNCConnectionString"];
string SqlStatement = "SELECT TransDate,ClosePrice FROM FinancialCompany WHERE TransDate >= #STARTDATE# AND TransDate <= #ENDDATE# ORDER BY TransDate";
DataEngine de = new DataEngine(connectionString, SqlStatement);
de.ChartObject = chart;
de.DataFields = "XDateTime=TransDate,YValue=ClosePrice";
de.StartDate = startDate;
de.EndDate = endDate;
SeriesCollection mySC = de.GetSeries();
// Apply price line settings.
if (mySC.Count > 0)
{
mySC[0].Type = SeriesType.Line;
mySC[0].Line.Width = 2;
}
return mySC;
}
SeriesCollection getVolumeData(DateTime startDate, DateTime endDate)
{
string connectionString = ConfigurationManager.AppSettings["DNCConnectionString"];
string SqlStatement = "SELECT TransDate,Volume FROM FinancialCompany WHERE TransDate >= #STARTDATE# AND TransDate <= #ENDDATE# ORDER BY TransDate";
DataEngine de2 = new DataEngine(connectionString, SqlStatement);
de2.ChartObject = chart;
de2.StartDate = startDate;
de2.EndDate = endDate;
de2.DataFields = "XDateTime=TransDate,YValue=Volume";
SeriesCollection mySC = de2.GetSeries();
// Apply volume series settings.
if (mySC.Count > 0)
{
mySC[0].Name = "Volume";
}
return mySC;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div >
<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 type="text/C#" runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates using the JS navigator to show a finance chart with volume.
chart.Size = "640x400"
chart.TempDirectory = "temp"
chart.Debug = False
chart.Palette = New Color() { Color.FromArgb(255, 47, 107, 220), Color.FromArgb(255, 30, 156, 255) }
chart.ChartAreaSpacing = 0
chart.JS.Enabled = True
chart.DefaultElement.ToolTip = "Price: %yValue"
' Setup main chart axis settings
chart.YAxis.FormatString = "C0"
chart.YAxis.Label.Text = "Price"
' Enable the navigator
chart.Navigator.Enabled = True
' Database date period
Dim startDate As DateTime = New System.DateTime(2021, 7, 30, 0, 0, 0)
Dim endDate As DateTime = New System.DateTime(2021, 12, 31, 23, 59, 59)
Dim mySC As SeriesCollection = getPriceData(startDate,endDate)
' Add the data.
chart.SeriesCollection.Add(mySC)
' --- Setup the volume area.
Dim mySC2 As SeriesCollection = getVolumeData(startDate,endDate)
Dim ca As ChartArea = New ChartArea()
ca.HeightPercentage = 33
ca.YAxis.DefaultTick.Label.Text = "js: function(v){ return ''+ JSC.formatString(v/100000,'c0')+'M'; }"
ca.YAxis.Label.Text = "Volume"
ca.SeriesCollection.Add(mySC2)
chart.ExtraChartAreas.Add(ca)
End Sub
Function getPriceData(ByVal startDate As DateTime, ByVal endDate As DateTime) As SeriesCollection
Dim connectionString As String = ConfigurationManager.AppSettings("DNCConnectionString")
Dim SqlStatement As String = "SELECT TransDate,ClosePrice FROM FinancialCompany WHERE TransDate >= #STARTDATE# AND TransDate <= #ENDDATE# ORDER BY TransDate"
Dim de As DataEngine = New DataEngine(connectionString, SqlStatement)
de.ChartObject = chart
de.DataFields = "XDateTime=TransDate,YValue=ClosePrice"
de.StartDate = startDate
de.EndDate = endDate
Dim mySC As SeriesCollection = de.GetSeries()
' Apply price line settings.
If mySC.Count > 0 Then
mySC(0).Type = SeriesType.Line
mySC(0).Line.Width = 2
End If
Return mySC
End Function
Function getVolumeData(ByVal startDate As DateTime, ByVal endDate As DateTime) As SeriesCollection
Dim connectionString As String = ConfigurationManager.AppSettings("DNCConnectionString")
Dim SqlStatement As String = "SELECT TransDate,Volume FROM FinancialCompany WHERE TransDate >= #STARTDATE# AND TransDate <= #ENDDATE# ORDER BY TransDate"
Dim de2 As DataEngine = New DataEngine(connectionString, SqlStatement)
de2.ChartObject = chart
de2.StartDate = startDate
de2.EndDate = endDate
de2.DataFields = "XDateTime=TransDate,YValue=Volume"
Dim mySC As SeriesCollection = de2.GetSeries()
' Apply volume series settings.
If mySC.Count > 0 Then
mySC(0).Name = "Volume"
End If
Return mySC
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div >
<dotnet:Chart ID="chart" runat="server" />
</div>
</body>
</html>
Previous