# Create a chart page

Abstract

How to create a page with the charting controls.

This procedure assumes that you already know how to create a basic SPEAK page. It uses the standard ChartDataProvider component from SPEAK.

To add a bar chart to a SPEAK page:

1. Create a SPEAK page. Use a branch template to get a useful starting point.

2. Add a ChartDataProvider component to the page, and specify, for example, these properties:

• Resolution: set to Year.

• ResolutionRange: set to 4.

This means that the ChartDataProvider component groups data for a year, and that it shows a time range of 4 years.

3. Provide server data for the data provider component in one of these ways:

• Use page code to specify how the component gets data programmatically, using JavaScript.

• Use the DataURL property to set the URL of the server-side MVC controller that returns data.

4. Create two chart field configuration items:

• One you call Category. Set the Header Text property to Date and the DataField property to date.

• One you call Visits. Set the Header Text property to Visits and the DataField property to visits.

5. Add a BarChart control to the page, and bind the Data property of the BarChart control to the ChartDataProvider component: {Binding ChartDataProvider.Data}.

6. Configure the BarChart control:

• Bind the CategoryChartField property to the Category configuration item.

• Bind the ValueChartField property to the Visits configuration item.

• Set the value of the ShowAxis property to True.

This creates a bar chart that - depending on your data - looks like this: