JS NavigatorMultiY
Demonstrates using the JS navigator with multiple axes.chart.
<%@ 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 with multiple axes.
chart.Size = "640x500";
chart.TempDirectory = "temp";
chart.Debug = false;
chart.JS.Enabled = true;
chart.DefaultElement.Marker.Visible = false;
// Setup main chart axis settings
chart.YAxis.FormatString = "C0";
chart.YAxis.Label.Text = "Price";
chart.YAxis.Minimum = 18;
// 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);
SeriesCollection mySC2 = getVolumeData(startDate,endDate);
Axis vAxis = new Axis();
mySC2[0].YAxis = vAxis;
vAxis.Orientation = dotnetCHARTING.Orientation.Right;
vAxis.CultureName = "en-US";
vAxis.DefaultTick.Label.Text = "js: function(v){ return ''+ JSC.formatString(v/100000,'n0')+'M'; }";
vAxis.Maximum = 2000000000;
vAxis.Label.Text = "Volume";
mySC.Add(mySC2);
// Add the data.
chart.SeriesCollection.Add(mySC);
}
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;
mySC[0].Name = "FinancialCompany";
mySC[0].LegendEntry.Value = "%PercentageChange";
}
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 with multiple axes.
chart.Size = "640x500"
chart.TempDirectory = "temp"
chart.Debug = False
chart.JS.Enabled = True
chart.DefaultElement.Marker.Visible = False
' Setup main chart axis settings
chart.YAxis.FormatString = "C0"
chart.YAxis.Label.Text = "Price"
chart.YAxis.Minimum = 18
' 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)
Dim mySC2 As SeriesCollection = getVolumeData(startDate,endDate)
Dim vAxis As Axis = New Axis()
mySC2(0).YAxis = vAxis
vAxis.Orientation = dotnetCHARTING.Orientation.Right
vAxis.CultureName = "en-US"
vAxis.DefaultTick.Label.Text = "js: function(v){ return ''+ JSC.formatString(v/100000,'n0')+'M'; }"
vAxis.Maximum = 2000000000
vAxis.Label.Text = "Volume"
mySC.Add(mySC2)
' Add the data.
chart.SeriesCollection.Add(mySC)
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
mySC(0).Name = "FinancialCompany"
mySC(0).LegendEntry.Value = "%PercentageChange"
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