ActiveReports 13
Unbound Chart
ActiveReports 13 > ActiveReports User Guide > Samples and Walkthroughs > Walkthroughs > Section Report Walkthroughs > Chart > Unbound Chart

The Chart control allows you to bind charts to any type of data source, including arrays. You can create a chart without setting its data source and load the data into the control at run time. This walkthrough illustrates how to create a simple unbound chart.

The walkthrough is split up into the following activities:

Note: This walkthrough uses the Northwind database. By default, in ActiveReports, the Northwind.mdb file is located at [User Documents folder]\GrapeCity Samples\ActiveReports 13\Data\NWIND.mdb.

When you complete this walkthrough you get a layout that looks similar to the following at run time.

To add an ActiveReport to the Visual Studio project

  1. Create a new Visual Studio project.
  2. From the Project menu, select Add New Item.
  3. In the Add New Item dialog that appears, select ActiveReports 13 Section Report (code-based) and in the Name field, rename the file as UnboundChart.
  4. Click the Add button to open a new section report in the designer.

See Adding an ActiveReport to a Project for information on adding different report layouts.

To add the Chart control to the report

  1. From the toolbox, drag the Chart data region to the body of the report.
  2. If the chart wizard appears, click Cancel.
    Tip: If you do not want the chart wizard to appear each time you add a chart, clear the Auto Run Wizard checkbox. You can still access the wizard via the command verbs (see below).
  3. In the Properties window, set the following properties.
    Property Name Property Value
    Location 0, 0in
    Size 6.5, 3.5in
  4. In the Report Explorer, select Detail and go to the properties window to set the Height property to 3.5
  5. On the design surface, select the grey area outside the report and in the Properties window, set the PrintWidth property to 6.5.

To configure the appearance of the Chart

  1. Select the Chart control and at the bottom of the Properties window, select the Customize command. See Properties Window for further details on accessing commands. 
    Tip: If the verb is not visible, right-click an empty space in the Properties Window and select Commands to display verbs. 
  2. In the ChartAreas view which displays by default, click the Axes bar to expand it.
  3. Click Axis X, and on the Common tab in the pane to the right, type Company Name in the Title textbox and set the font size to 12
  4. Click Axis Y on the left, and on the Common tab in the pane to the right, type Freight in US$ in the Title textbox and increase the Font size to 12.
  5. Click the Titles bar on the left. In the list of titles, header is selected by default.
  6. On the Title properties page, type Unbound Chart in the Caption textbox and set the Font size to 14.
  7. Under Titles, select the footer and delete it by clicking the Delete icon on top of the list.
  8. Click the Series bar on the left. 
  9. Under Series, select Series1, Series2 and Series3 and delete them by clicking the Delete icon on top of the list.
  10. Click the Legends bar on the left. The defaultLegend is selected by default.
  11. On the Common page, clear the Visible checkbox to hide the legend.
  12. Click the Finish button to exit the Chart Designer.

Back on the design surface of the report, the chart appears empty except for the title.

To add the code to create a chart at run time chart in Visual Basic or C#

Double-click the gray area below the report. This creates an event-handling method for rptUnboundChart's ReportStart event. Add code to the handler to:

The following examples show what the code for the methods look like in Visual Basic.NET and C#.

To write the code in Visual Basic.NET

Visual Basic.NET code. Paste INSIDE the ReportStart event.
Copy Code
'create the series
Dim series As New GrapeCity.ActiveReports.Chart.Series
series.Type = Chart.ChartType.Bar3D
'connection string and data adapter
Dim dbPath As String = "C:\Users\YourUserName\Documents\GrapeCity Samples\ActiveReports 13\Data\NWIND.MDB"
Dim connString As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source= " + dbPath"
Dim da As New System.Data.OleDb.OleDbDataAdapter("SELECT * from Orders WHERE OrderDate < #08/17/1994#", connString)

'create the dataset
Dim ds As New DataSet
da.Fill(ds, "Orders")

'set chart properties
Me.ChartControl1.DataSource = ds
Me.ChartControl1.Series(0).ValueMembersY = ds.Tables("Orders").Columns(7).ColumnName
Me.ChartControl1.Series(0).ValueMemberX = ds.Tables("Orders").Columns(8).ColumnName

'angle the labels to avoid overlapping
Me.ChartControl1.ChartAreas(0).Axes(0).LabelFont.Angle = 45

To write the code in C#

C# code. Paste INSIDE the ReportStart event.
Copy Code
//create the series
GrapeCity.ActiveReports.Chart.Series series = new GrapeCity.ActiveReports.Chart.Series();
series.Type = GrapeCity.ActiveReports.Chart.ChartType.Bar3D;
//connection string and data adapter
string dbPath = "C:\Users\YourUserName\Documents\GrapeCity Samples\ActiveReports 13\Data\NWIND.MDB";
string connString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source= " + dbPath;
System.Data.OleDb.OleDbDataAdapter da = new System.Data.OleDb.OleDbDataAdapter
("SELECT * from Orders WHERE OrderDate < #08/17/1994#", connString);
// create the dataset
System.Data.DataSet ds = new System.Data.DataSet();
da.Fill(ds, "Orders");
// set chart properties
this.chartControl1.DataSource = ds;
this.chartControl1.Series[0].ValueMembersY = ds.Tables["Orders"].Columns[7].ColumnName;
this.chartControl1.Series[0].ValueMemberX = ds.Tables["Orders"].Columns[8].ColumnName;
// angle the labels to avoid overlapping
this.chartControl1.ChartAreas[0].Axes[0].LabelFont.Angle = 45;

To view the report