Simple 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 then 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:

Creating a new Visual Studio project
Adding an ActiveReport to the project
Adding the chart control to the report
Adding code to connect the chart to a data source
Viewing the report

To complete the walkthrough, you must have access to the NorthWind database (Nwind.mdb).

When you have finished this walkthrough, you will have a report that looks similar to the following.

Creating a new Visual Studio project

To create a new Visual Studio project

Open Visual Studio.
Click on File > New > Project.
Select the project type and click on Windows Application.
Change the name of your project and click OK.

Adding an ActiveReport to a Visual Studio project

To add an ActiveReport to your project

Open a new project in Visual Studio.
Click on Project > Add New Item.
Select ActiveReports file and rename the file rptUnboundChart.
Click Open.

Adding the chart control to the report

To add a chart control to the report

Click the Charting control in the ActiveReports toolbox, draw it onto the report surface, and set the size property to 6, 4 in.
Rename the chart control chtUnbound.
With chtUnbound highlighted, click the Customize... hyperlink below the Properties Window. This brings up the Chart Designer dialog box.
Click the Series button on the left side, and delete Series1, Series2, and Series3.
Click the Titles button on the left side of the Chart Designer.
Type Unbound Chart in the Header Title and increase the font size to 14.
Delete the Footer Title.
Click the ChartAreas button on the left side of the wizard, and expand the Axes button.
Click AxisX to select it, and type Company Name in the AxisX Title and increase the font size to 12.
Click AxisY to select it, and type Freight in US$ in the AxisY Title and increase the font size to 12.
Click the Legends button on the left side of the Chart Designer.
Uncheck the Visible check box at the top.
Click Finish.

Adding code to connect the chart to a data source

To write the code in Visual Basic

Right-click in any section of the design window of rptUnboundChart, and click View Code to display the code view for the report. At the top left of the code view for rptUnboundChart, click the drop-down arrow and select (rptUnboundChart Events). At the top right of the code window, click the drop-down arrow and select ReportStart. This creates an event-handling method for rptUnboundChart's ReportStart event. Add code to the handler to:
- Create the series
- Create the data set
- Set the DataSource, ValueMembersX and ValueMembersY properties
- Angle the labels to avoid overlap
- Randomize the colors of the data point backdrops

To write the code in C#

Click in the gray area below rptUnbound to select the report. Click on the events icon in the Properties window to display available events for the report. Double-click ReportStart. This creates an event-handling method for rptUnboundChart's ReportStart event. Add code to the handler to:

Create the series
Create the data set
Set the DataSource, ValueMembersX and ValueMembersY properties
Angle the labels to avoid overlap

The following example shows what the code for the method looks like.

' Visual Basic
Private Sub rptUnboundChart_ReportStart(ByVal sender As Object, ByVal e As System _
	.EventArgs) Handles MyBase.ReportStart
    ' create the series
    Dim s As New DataDynamics.ActiveReports.Chart.Series
    s.Type = Chart.ChartType.Bar3D
    Dim m_cnnString As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source= _
    	C:/NWIND.MDB;Persist Security Info=False"
    Dim m_cnn As New System.Data.OleDb.OleDbConnection(m_cnnString)
    Dim oDBAdapter As System.Data.OleDb.OleDbDataAdapter

    ' create the data set
    Dim oDS As DataSet
    oDBAdapter = New System.Data.OleDb.OleDbDataAdapter("SELECT * from Orders WHERE _
    	OrderDate < #08/17/1994#", m_cnnString)
    oDS = New DataSet
    oDBAdapter.Fill(oDS, "Orders")

    ' set the DataSource, ValueMembersY, and ValueMembersX properties
    Me.chtUnbound.DataSource = oDS
    Me.chtUnbound.Series.Add(s)
    Me.chtUnbound.Series(0).ValueMembersY = oDS.Tables("Orders").Columns(7).ColumnName
    Me.chtUnbound.Series(0).ValueMemberX = oDS.Tables("Orders").Columns(8).ColumnName

    ' angle the labels to avoid overlapping
    Me.chtUnbound.ChartAreas(0).Axes(0).LabelFont.Angle = 90
End Sub

//C#
private void rptUnboundChart_ReportStart(object sender, System.EventArgs eArgs)
{
	// create the series
	DataDynamics.ActiveReports.Chart.Series s = new DataDynamics.ActiveReports.Chart
		.Series();
	s.Type = DataDynamics.ActiveReports.Chart.ChartType.Bar3D;
	string m_cnnString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:/NWIND.MDB;
		Persist Security Info=False";   
	System.Data.OleDb.OleDbConnection m_cnn = new System.Data.OleDb.OleDbConnection
		(m_cnnString);       
	System.Data.OleDb.OleDbDataAdapter oDBAdapter;
 
	// create the data set
	System.Data.DataSet oDS;
	oDBAdapter = new System.Data.OleDb.OleDbDataAdapter("SELECT * from Orders WHERE 
		OrderDate < #08/17/1994#", m_cnnString);
	oDS = new System.Data.DataSet();
	oDBAdapter.Fill(oDS, "Orders");
 
	// set the DataSource, ValueMembersY, and ValueMembersX properties
	this.chtUnbound.DataSource = oDS;
	this.chtUnbound.Series.Add(s);
	this.chtUnbound.Series[0].ValueMembersY = oDS.Tables["Orders"].Columns[7]
		.ColumnName;
	this.chtUnbound.Series[0].ValueMemberX = oDS.Tables["Orders"].Columns[8]
		.ColumnName;
			
	// angle the labels to avoid overlapping
	this.chtUnbound.ChartAreas[0].Axes[0].LabelFont.Angle = 90;
}

Viewing the report

To view the report

Add the ActiveReports viewer control to a Windows Form.
Add the code needed to set the viewer document equal to the report document. See Using the ActiveReports WinForm Viewer for help.