Gallery

Gallery > Data Engine

Datagrid Custom

Displays a tabular chart data in a custom datagrid along with the chart image.

Download Show C# Code Show VB Code

<%@ Page Language="C#" 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)
{
//set global properties
Chart.DefaultSeries.ConnectionString = ConfigurationManager.AppSettings["DNCConnectionString"];
Chart.Title="Sales for 2022";
Chart.XAxis.Label.Text="Months";
Chart.YAxis.Label.Text="Sales (USD)";
Chart.TempDirectory="temp";
Chart.Debug=true;
Chart.Mentor=false;
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend;

Chart.DateGrouping = TimeInterval.Year;
Chart.Use3D=true;

Axis b=Chart.YAxis.Calculate("Sales (CAD)", new ChangeValueDelegate(MyFunction));
b.Orientation = dotnetCHARTING.Orientation.Right;
Chart.AxisCollection.Add(b);

//Add a 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);
de.DateGrouping = TimeInterval.Year;
de.SqlStatement= @"SELECT OrderDate, Total FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# ORDER BY OrderDate";
SeriesCollection sc = de.GetSeries();

SetDataToDataGrid(sc);

Chart.SeriesCollection.Add(sc);
}
public void SetDataToDataGrid(SeriesCollection sc)
{
DataTable dt = new DataTable();
DataColumn dataCol = new DataColumn();
dataCol.ColumnName ="Months";
dt.Columns.Add(dataCol);
for (int j = 0; j < sc.Count; j++)
{
dotnetCHARTING.Series sr = sc[j];
sr.Name = "Sales";
dataCol = new DataColumn();
dataCol.ColumnName ="Sales (USD)";
dt.Columns.Add(dataCol);

dataCol = new DataColumn();
dataCol.ColumnName ="Sales (CAD)";
dt.Columns.Add(dataCol);

DataRow dr=null;
for (int k = 0; k < sr.Elements.Count; k++)
{
if(j==0)
{
dr = dt.NewRow();
dr[j] = sr.Elements[k].Name;
dt.Rows.Add(dr);
}

if(sr.Elements[k].YValue.Equals(double.NaN))
{
dt.Rows[k][j+1]=Chart.EmptyElementText;
dt.Rows[k][j+2]=Chart.EmptyElementText;
}
else
{
dt.Rows[k][j+1] = string.Format("{0:C}",sr.Elements[k].YValue);
dt.Rows[k][j+2] = (sr.Elements[k].YValue * 1.36).ToString("c");

}
}
}

DataView dv = new DataView(dt);
chartdatagrid.DataSource = dv;
chartdatagrid.DataBind();

}
public static string MyFunction(string value)
{
double dValue = Convert.ToDouble(value);
dValue = dValue*1.36;
return Convert.ToString(dValue);
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div style="text-align:center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
<div style="max-width: 500px; height: auto; margin: 0px auto;">
<asp:DataGrid id="chartdatagrid" Width="500" Font-Names="tahoma,geneva,sans-serif" HeaderStyle-BackColor="skyblue"
BackColor="lightblue" runat="server"/>
</div>
</body>
</html>

<%@ Page Language="vb" 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)
'set global properties
Chart.DefaultSeries.ConnectionString = ConfigurationManager.AppSettings("DNCConnectionString")
Chart.Title="Sales for 2022"
Chart.XAxis.Label.Text="Months"
Chart.YAxis.Label.Text="Sales (USD)"
Chart.TempDirectory="temp"
Chart.Debug=True
Chart.Mentor=False
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend

Chart.DateGrouping = TimeInterval.Year
Chart.Use3D=True

Dim b As Axis=Chart.YAxis.Calculate("Sales (CAD)", New ChangeValueDelegate(AddressOf MyFunction))
b.Orientation = dotnetCHARTING.Orientation.Right
Chart.AxisCollection.Add(b)

'Add a 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)
de.DateGrouping = TimeInterval.Year
de.SqlStatement= "SELECT OrderDate, Total FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# ORDER BY OrderDate"
Dim sc As SeriesCollection = de.GetSeries()

SetDataToDataGrid(sc)

Chart.SeriesCollection.Add(sc)
End Sub
Public Sub SetDataToDataGrid(ByVal sc As SeriesCollection)
Dim dt As DataTable = New DataTable()
Dim dataCol As DataColumn = New DataColumn()
dataCol.ColumnName ="Months"
dt.Columns.Add(dataCol)
For j As Integer = 0 To sc.Count - 1
Dim sr As dotnetCHARTING.Series = sc(j)
sr.Name = "Sales"
dataCol = New DataColumn()
dataCol.ColumnName ="Sales (USD)"
dt.Columns.Add(dataCol)

dataCol = New DataColumn()
dataCol.ColumnName ="Sales (CAD)"
dt.Columns.Add(dataCol)

Dim dr As DataRow=Nothing
For k As Integer = 0 To sr.Elements.Count - 1
If j=0 Then
dr = dt.NewRow()
dr(j) = sr.Elements(k).Name
dt.Rows.Add(dr)
End If

If sr.Elements(k).YValue.Equals(Double.NaN) Then
dt.Rows(k)(j+1)=Chart.EmptyElementText
dt.Rows(k)(j+2)=Chart.EmptyElementText
Else
dt.Rows(k)(j+1) = String.Format("{0:C}",sr.Elements(k).YValue)
dt.Rows(k)(j+2) = (sr.Elements(k).YValue * 1.36).ToString("c")

End If
Next k
Next j

Dim dv As DataView = New DataView(dt)
chartdatagrid.DataSource = dv
chartdatagrid.DataBind()

End Sub
Public Shared Function MyFunction(ByVal value As String) As String
Dim dValue As Double = Convert.ToDouble(value)
dValue = dValue*1.36
Return Convert.ToString(dValue)
End Function

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div style="text-align:center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
<div style="max-width: 500px; height: auto; margin: 0px auto;">
<asp:DataGrid id="chartdatagrid" Width="500" Font-Names="tahoma,geneva,sans-serif" HeaderStyle-BackColor="skyblue"
BackColor="lightblue" runat="server"/>
</div>
</body>
</html>

Sample FilenameDatagridCustom.aspx
VersionLegacy (Pre 3.0)
Uses DatabaseYes

JS Charting

Gallery

Datagrid Custom