JS Navigator Toolbar
Demonstrates styling the navigation bar with the JS navigator.
<%@ 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 styling the navigation bar with the JS navigator.
chart.Size = "640x400";
chart.TempDirectory = "temp";
chart.Debug = false;
chart.DefaultElement.ToolTip = "Price: %yValue";
chart.JS.Enabled = true;
chart.ChartArea.Label.Text = "Customized toolbar above.";
chart.ChartArea.Label.Offset = new Point(20, 0);
chart.ChartAreaSpacing = 0;
// Setup main chart axis settings
chart.YAxis.FormatString = "C0";
chart.YAxis.Label.Text = "Price";
// Enable the navigator
chart.Navigator.Enabled = true;
chart.Navigator.NavigationBar.Background.Color = Color.Red;
chart.Navigator.NavigationBar.QuickZoomIntervals = "1d,5d=Five Days,1m,3m";
// Database start date.
DateTime startDate = new System.DateTime(2021, 11, 27, 0, 0, 0);
DateTime endDate = new System.DateTime(2022, 5, 27, 0, 0, 0);
SeriesCollection mySC = getPriceData(startDate,endDate);
// Add the data.
chart.SeriesCollection.Add(mySC);
// --- Setup the volume area.
ChartArea ca = new ChartArea(getVolumeData(startDate,endDate));
ca.YAxis.DefaultTick.Label.Text = "js: function(v){ return ''+ JSC.formatString(v/100000,'c0')+'M'; }";
ca.YAxis.Label.Text = "Volume";
ca.HeightPercentage = 33;
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;
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 styling the navigation bar with the JS navigator.
chart.Size = "640x400"
chart.TempDirectory = "temp"
chart.Debug = False
chart.DefaultElement.ToolTip = "Price: %yValue"
chart.JS.Enabled = True
chart.ChartArea.Label.Text = "Customized toolbar above."
chart.ChartArea.Label.Offset = New Point(20, 0)
chart.ChartAreaSpacing = 0
' Setup main chart axis settings
chart.YAxis.FormatString = "C0"
chart.YAxis.Label.Text = "Price"
' Enable the navigator
chart.Navigator.Enabled = True
chart.Navigator.NavigationBar.Background.Color = Color.Red
chart.Navigator.NavigationBar.QuickZoomIntervals = "1d,5d=Five Days,1m,3m"
' Database start date.
Dim startDate As DateTime = New System.DateTime(2021, 11, 27, 0, 0, 0)
Dim endDate As DateTime = New System.DateTime(2022, 5, 27, 0, 0, 0)
Dim mySC As SeriesCollection = getPriceData(startDate,endDate)
' Add the data.
chart.SeriesCollection.Add(mySC)
' --- Setup the volume area.
Dim ca As ChartArea = New ChartArea(getVolumeData(startDate,endDate))
ca.YAxis.DefaultTick.Label.Text = "js: function(v){ return ''+ JSC.formatString(v/100000,'c0')+'M'; }"
ca.YAxis.Label.Text = "Volume"
ca.HeightPercentage = 33
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
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