Gallery
JS Post Data Processing
<%@ Page Language="C#" trace="false" Description="dotnetCHARTING Component"%>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Data" %>
<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
// Demonstrates how to post processes database data in JS chart
//set global properties
Chart.DefaultSeries.ConnectionString = ConfigurationManager.AppSettings["DNCConnectionString"];
Chart.Title="Sales";
Chart.Size = "900x500";
Chart.XAxis.Label.Text="Months";
Chart.TempDirectory="temp";
Chart.Debug=true;
Chart.Mentor=false;
Chart.JS.Enabled = true;
Chart.DateGrouping = TimeInterval.Months;
//Add a series
Chart.Series.StartDate=new System.DateTime(2022,1,1,0,0,0);
Chart.Series.EndDate = new System.DateTime(2022,6,30,23,59,59);
Chart.Series.SqlStatement= @"SELECT OrderDate,Total, Name FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# ORDER BY OrderDate";
Chart.SeriesCollection.Add();
Chart.PostDataProcessing +=new PostDataProcessingEventHandler(OnPostDataProcessing);
}
void OnPostDataProcessing(Object sender)
{
chartdatagrid.DataSource = new DataView(Chart.SeriesCollection.GetProcessedDataTable("%YValue",true,true,"Sales"));
chartdatagrid.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sales Report</title>
<style type="text/css">
.dnc{
margin: 0px auto;
max-width:840px;
}
.myGrid{
display:inline-block;
margin-left:10px;
width:900px;
}
</style>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" Width="900px" Height="500px" runat="server" CssClass="dnc"/>
<div class="myGrid">
<asp:DataGrid id="chartdatagrid" Width="700" HorizontalAlign="Center" Font-Name="Arial" HeaderStyle-BackColor="skyblue"
BackColor="lightblue" ShowHeader="true" runat="server"/>
</div>
</div>
</body>
</html>
<%@ Page Language="vb" trace="false" Description="dotnetCHARTING Component"%>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Data" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates how to post processes database data in JS chart
'set global properties
Chart.DefaultSeries.ConnectionString = ConfigurationManager.AppSettings("DNCConnectionString")
Chart.Title="Sales"
Chart.Size = "900x500"
Chart.XAxis.Label.Text="Months"
Chart.TempDirectory="temp"
Chart.Debug=True
Chart.Mentor=False
Chart.JS.Enabled = True
Chart.DateGrouping = TimeInterval.Months
'Add a series
Chart.Series.StartDate = New System.DateTime(2022,1,1,0,0,0)
Chart.Series.EndDate = New System.DateTime(2022,6,30,23,59,59)
Chart.Series.SqlStatement= "SELECT OrderDate,Total, Name FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# ORDER BY OrderDate"
Chart.SeriesCollection.Add()
AddHandler Chart.PostDataProcessing, AddressOf OnPostDataProcessing
End Sub
Sub OnPostDataProcessing(ByVal sender As Object)
chartdatagrid.DataSource = New DataView(Chart.SeriesCollection.GetProcessedDataTable("%YValue",True,True,"Sales"))
chartdatagrid.DataBind()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sales Report</title>
<style type="text/css">
.dnc{
margin: 0px auto;
max-width:840px;
}
.myGrid{
display:inline-block;
margin-left:10px;
width:900px;
}
</style>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" Width="900px" Height="500px" runat="server" CssClass="dnc"/>
<div class="myGrid">
<asp:DataGrid id="chartdatagrid" Width="700" HorizontalAlign="Center" Font-Name="Arial" HeaderStyle-BackColor="skyblue"
BackColor="lightblue" ShowHeader="true" runat="server"/>
</div>
</div>
</body>
</html>
- Sample FilenameJsPostDataProcessing.aspx
- Version10.0
- Uses DatabaseNo