Gallery

Gallery > ChartArea Features

ChartArea DB

Demonstrates multiple chart area usage.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

void Page_Load(Object sender,EventArgs e)
{

//set global properties
Chart.Title="2022 Sales (mouseover for sales amount)";
Chart.Size = "600X300";
Chart.TempDirectory="temp";
Chart.Debug=true;
Chart.YAxis.FormatString = "c";
Chart.NoDataLabel.Text = "Click a sales persons yearly total to view a breakdown by months";
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend;
//force vertical chart area layout
Chart.ChartAreaLayout.Mode = ChartAreaLayoutMode.Vertical;

//create a DataEngine to obtain data for two different series
DataEngine de = new DataEngine();
de.ConnectionString = ConfigurationManager.AppSettings["DNCConnectionString"];
de.StartDate=new DateTime (2022,1,1,0,0,0);
de.EndDate = new DateTime (2022,12,31,23,59,59);

//get a series for the default chart area and set its url for drilldown
de.SqlStatement= @"SELECT Name, sum(Total) FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# GROUP BY Orders.Name ORDER BY Orders.Name";
SeriesCollection sc = de.GetSeries();
sc[0].DefaultElement.URL = "chartareadb.aspx?elementname=%ElementName";
sc[0].DefaultElement.ToolTip = "%Value";
Chart.SeriesCollection.Add(sc);

// Create the second chart area and add a series to its series collection.
ChartArea ca2 = new ChartArea();
ca2.TitleBox.Position = TitleBoxPosition.FullWithLegend;
//Add a series based on the person selected
string en = Request.QueryString["elementname"];
de.SqlStatement= @"SELECT Orders.OrderDate, Sum(Total) FROM Orders WHERE Orders.Name='"+en+"' AND OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# GROUP BY Orders.OrderDate ORDER BY Orders.OrderDate";
de.DateGrouping = TimeInterval.Year;
SeriesCollection sc2 = de.GetSeries();
Chart.DefaultSeries.DefaultElement.ToolTip = "%Value";
ca2.XAxis.Label.Text = @"<br>" + en + "'s 2022 monthly breakdown";
ca2.XAxis.Label.Alignment = StringAlignment.Center;
ca2.SeriesCollection.Add(sc2);

if (en != null && en.Length > 0)
{
for (int i=0;i<sc[0].Elements.Count;i++)
if (sc[0].Elements[i].Name == en)
sc[0].Elements[i].Color = Color.Yellow;
}

// Add the new area to the chart.
Chart.ExtraChartAreas.Add(ca2);

}

</script>

</head>
<body>
<div style="text-align:center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

'set global properties
Chart.Title="2022 Sales (mouseover for sales amount)"
Chart.Size = "600X300"
Chart.TempDirectory="temp"
Chart.Debug=True
Chart.YAxis.FormatString = "c"
Chart.NoDataLabel.Text = "Click a sales persons yearly total to view a breakdown by months"
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend
'force vertical chart area layout
Chart.ChartAreaLayout.Mode = ChartAreaLayoutMode.Vertical

'create a DataEngine to obtain data for two different series
Dim de As DataEngine = New DataEngine()
de.ConnectionString = ConfigurationManager.AppSettings("DNCConnectionString")
de.StartDate = New DateTime (2022,1,1,0,0,0)
de.EndDate = New DateTime (2022,12,31,23,59,59)

'get a series for the default chart area and set its url for drilldown
de.SqlStatement= "SELECT Name, sum(Total) FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# GROUP BY Orders.Name ORDER BY Orders.Name"
Dim sc As SeriesCollection = de.GetSeries()
sc(0).DefaultElement.URL = "chartareadb.aspx?elementname=%ElementName"
sc(0).DefaultElement.ToolTip = "%Value"
Chart.SeriesCollection.Add(sc)

' Create the second chart area and add a series to its series collection.
Dim ca2 As ChartArea = New ChartArea()
ca2.TitleBox.Position = TitleBoxPosition.FullWithLegend
'Add a series based on the person selected
Dim en As String = Request.QueryString("elementname")
de.SqlStatement= "SELECT Orders.OrderDate, Sum(Total) FROM Orders WHERE Orders.Name='" & en & "' AND OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# GROUP BY Orders.OrderDate ORDER BY Orders.OrderDate"
de.DateGrouping = TimeInterval.Year
Dim sc2 As SeriesCollection = de.GetSeries()
Chart.DefaultSeries.DefaultElement.ToolTip = "%Value"
ca2.XAxis.Label.Text = "<br>" & en & "'s 2022 monthly breakdown"
ca2.XAxis.Label.Alignment = StringAlignment.Center
ca2.SeriesCollection.Add(sc2)

If Not en Is Nothing AndAlso en.Length > 0 Then
For i As Integer = 0 To sc(0).Elements.Count - 1
If sc(0).Elements(i).Name = en Then
sc(0).Elements(i).Color = Color.Yellow
End If
Next i
End If

' Add the new area to the chart.
Chart.ExtraChartAreas.Add(ca2)

End Sub

</script>

</head>
<body>
<div style="text-align:center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

Sample FilenameChartAreaDB.aspx
VersionLegacy (Pre 3.0)
Uses DatabaseYes

JS Charting

Gallery

ChartArea DB