The Chart control

Along with the instructor, try creating a Chart in a Report:

  1. You will need data for this chart, so if not already created, define a connection string named conn that connects to the database Northwind. If you have not already created this database, refer to instructions on page 6.
  2. Create a new blank UX Component.
  3. Add a Chart control (located in the Data Controls group) with the Name CustsByState and the Label Customers by State.
  4. To begin selecting the data that will display in CustsByState in a pie chart, double-click on the control.
  5. The Graph Data window appears.
  6. Locate the setting Data, and click the smart button opposite it.
  7. The Pick Series to Display window appears. Click the button.
  8. The Select Data Series window appears. Click the button.
  9. Name the series StateCount, and confirm the name.
  10. Returning to the Select Data Series window, click the button.
  11. The Data Series Builder window appears.
    1. For Data Source Type, choose SQL.
    2. For Connection string, choose conn.
    3. For Method for defining SQL query:
      1. Click the smart button.
      2. Choose the radio button for Custom.
      3. Click OK.
  12. Returning to the Data Series Builder window, click the smart button for SQL Statement.
  13. The SQL Genie appears.
    1. In its SQL pane, enter the following statement:

select state_province, count(customerid)
from customers
group by state_province

    1. Click .

Alpha Anywhere will execute the statement, and reformat it a bit, and display the statement’s output, as shown here:

Click OK.

  1. Returning to the Data Series Builder window, examine the settings, and then click OK.
  2. Returning to the Select Data Series window appears, examine what it displays, and then click OK.

  1. Choose CountofCustomerid for the Sub-series.

  1. Returning to the Pick Series to Display window, click OK.
  2. Returning to the Graph Data window, click the button.
  3. Enter the following for the Chart Category: “StateCount.state_province”.
  4. Press the preview button again to see that the legend now shows the abbreviations for each slice.
  5. The Graph Data window should look like this:

  1. Play with the other settings, especially the Chart Style to get the desired look.
  2. Click OK to exit the Graph Data window.
  3. Save the Component with the name DemoChart.
  4. Display the Component in Working Preview.

Displaying a Chart in a Report

  1. Edit the SampleReport report in the Report Editor.
  2. Add a row to hold the chart
  3. Enlarge the row.
  4. Add enough cells and merge them to make room for the desired chart size.
  5. Right-click in the large cell.
  6. In the menu that appears, choose Edit cell content.
  7. The Cell Contents window appears. Select the Chart radio button, and then click the Edit... link.
  8. The Graph Data window appears.

Some closing thoughts on Charts

You can see that when you are developing a chart, developing the correct SQL statement is really the more challenging part of the task.

Many developers are turning to other tools like Google Charts and its API to develop charts that can also be displayed in Alpha Anywhere applications.