Create a chart page

Version: 9.0

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:

Do you have some feedback for us?

If you have suggestions for improving this article,