Create a chart page

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.

   The description of the ChartDataProvider component has more information.

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: