Gallery

Gallery > Showcase Charts

JS Datagrid DB

Demonstrates how to generate chart with data grid connected to database.

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)
{
// Demonstrates how to generate chart with data grid connected to database.
Chart.JS.Enabled = true;
Chart.DataGrid = "gridDiv";

Chart.Type = ChartType.Combo;
Chart.Width = 640;
Chart.Height = 300;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "Sales for 2022 %value";
Chart.ShowDateInTitle = false;
Chart.LegendBox.Visible = false;

Chart.DateGrouping = TimeInterval.Year;
Chart.Series.Name="Sales";
Chart.Series.ConnectionString = ConfigurationManager.AppSettings["DNCConnectionString"];
Chart.Series.StartDate=new DateTime (2022,1,1,0,0,0);
Chart.Series.EndDate = new DateTime (2022,12,31,23,59,59);

Chart.Series.SqlStatement= @"SELECT OrderDate, Total FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# ORDER BY OrderDate";
//Chart.Series.DefaultElement.SmartLabel.Text = "{%percentOfGroup:n0}%";
Chart.SeriesCollection.Add();
// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx

Chart.XAxis.Label.Text = "Months";
Chart.YAxis.Label.Text = "Sales (USD)";
Chart.YAxis.FormatString = "c";

}

</script>
<style type="text/css">
.dnc{
margin: 0px auto;
max-width:840px;
}
.myGrid{
display:inline-block;
margin-left:10px;
width:600px;
}
.summaryCell {
font-weight: bold;
color: black !important;
}
</style>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="840px" Height="600px" CssClass="dnc" />
<div class="myGrid">
<div id="gridDiv"></div>
</div>
</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)
' Demonstrates how to generate chart with data grid connected to database.
Chart.JS.Enabled = True
Chart.DataGrid = "gridDiv"

Chart.Type = ChartType.Combo
Chart.Width = 640
Chart.Height = 300
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "Sales for 2022 %value"
Chart.ShowDateInTitle = False
Chart.LegendBox.Visible = False

Chart.DateGrouping = TimeInterval.Year
Chart.Series.Name="Sales"
Chart.Series.ConnectionString = ConfigurationManager.AppSettings("DNCConnectionString")
Chart.Series.StartDate = New DateTime (2022,1,1,0,0,0)
Chart.Series.EndDate = New DateTime (2022,12,31,23,59,59)

Chart.Series.SqlStatement= "SELECT OrderDate, Total FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# ORDER BY OrderDate"
'Chart.Series.DefaultElement.SmartLabel.Text = "{%percentOfGroup:n0}%";
Chart.SeriesCollection.Add()
' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Classic samples folder
' - Help File > Data Tutorials
' - Sample: features/DataEngine.aspx

Chart.XAxis.Label.Text = "Months"
Chart.YAxis.Label.Text = "Sales (USD)"
Chart.YAxis.FormatString = "c"

End Sub

</script>
<style type="text/css">
.dnc{
margin: 0px auto;
max-width:840px;
}
.myGrid{
display:inline-block;
margin-left:10px;
width:600px;
}
.summaryCell {
font-weight: bold;
color: black !important;
}
</style>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="840px" Height="600px" CssClass="dnc" />
<div class="myGrid">
<div id="gridDiv"></div>
</div>
</div>
</body>
</html>

Sample FilenameJsDatagridDB.aspx
Version10.0
Uses DatabaseYes

JS Charting

Gallery

JS Datagrid DB