| | Help by Product Find help quickly and easily. How-to Resources 2007 Release Learning Resources Support and Feedback Technical Resources | Warning: You are viewing this page with an unsupported Web browser. This Web site works best with Microsoft Internet Explorer 6.0 or later, Firefox 1.5, or Netscape Navigator 8.0 or later. Learn more about supported browsers.
Creating an interactive chart on a Web page in Office
| Applies to |
Microsoft Office Access 2003 Microsoft Access 2002 |
By using the Microsoft Office Chart component, you can graphically illustrate your most important data on a Web page. Because the chart is dynamic, it will automatically update with the latest changes to the data when the page is refreshed. Additionally, your users can interact with the chart to see different views of the data right on the Web page!
Using the steps provided in this article, you will learn how to create a chart like the one shown here, which is based on data in an Access database. You can then apply what you learn to create and customize a solution that fits your needs.

Before you begin
To create this example, it is best to have a full installation of Microsoft Office XP Professional Special Edition or Microsoft Office Professional Edition 2003. This example uses Microsoft Office FrontPage® 2003, the Microsoft Office Web Components, and the Access Northwind Traders sample database for product and price data.
To interact with the chart, your users will need:
- A computer with a connection to your corporate intranet
- For Office Professional 2003:
Office 2003 Web Components, Microsoft Internet Explorer 5.01 or later, and a copy of Office Professional 2003 installed.
- For Office XP:
Office XP Web Components, Internet Explorer 4.01 or later, and a copy of Office XP installed.
First, create a chart on a Web page by using data from Access
You can create a chart in FrontPage or Access, or you can publish an interactive worksheet in Microsoft Office Excel 2003 or Excel 2002. This example uses FrontPage.
- In FrontPage, point to New on the File menu, and then click Page or Web. In the New Page or Web pane, under New, click Blank Page.
- On the Insert menu, click Web Component, click Spreadsheets and charts, click Office Chart, and then click Finish.
- On the Data Source tab of the Commands and Options dialog box, select Data from a database table or query, and then click Connection.
- Click the Edit button, and in the Select Data Source dialog box, locate and select the Northwind Traders sample database (Northwind.mdb) that comes with Access; then click Open.
Note In a default installation for Access 2003, Northwind.mdb is located in the C:\Program Files\Microsoft Office\Office11\Samples folder — for Access 2002, C:\Program Files\Microsoft Office\Office10\Samples. If you have not started Access yet, Northwind.mdb may not yet be installed on your computer. In that case, start Access, click Help, point to Sample Databases, and then click Northwind Sample Database. Then quit Access.
For the purposes of this example, it's acceptable to connect to a database on your local computer. However, when you create a real-life solution such as this, be sure that the database is located on a shared server that your intended audience can access before you connect to it.
- In the Select Table dialog box, select the Invoices table and click OK.
- In the Commands and Options dialog box, click the Type tab, click Column, and then click the first column subtype (Clustered Column) in the list on the right.
- Click Field List on the chart toolbar. You might need to move the Commands and Options dialog box to another area on the screen or widen the chart in order to see the Field List button.
- Click Country in the list, and in the text box next to the Add to button, click Series Area, and then click Add to.
- Click Salesperson in the list, and in the text box next to the Add to button, click Category Area, and then click Add to.
- Click UnitPrice in the list, and in the text box next to the Add to button, click Data Area, and then click Add to.
- Click OrderDate in the list, and in the text box next to the Add to button, click Filter Area, and then click Add to.
Next, filter and format the chart
- In the chart, click Order Date, and then click the Filter and Group tab in the Commands and Options dialog box. Under Grouping, next to Group items by, click Years.
- In the chart, click the arrow next to OrderDate, clear the (All) check box, select the 1998 check box, and then click OK. Data for only the year 1998 will be shown in the chart.
- Click the arrow next to Country, clear the (All) check box, select the USA check box, and then click OK.
- To show the salespeople with the highest sales, click Salesperson in the chart, and then click the Filter and Group tab in the Commands and Options dialog box. Under Filtering, in the Display the box, click Top, and then click 5 in the Items box.
- To sort the results, select a data marker in the series and then click Sort Ascending on the toolbar.
- Add a legend to the chart by clicking Show/Hide Legend on the toolbar.
After following these steps, your chart should look similar to the example above.
Finally, review and test the Web page
- On the File menu, click Preview in Browser.
- In the Preview in Browser dialog box, be sure that Internet Explorer (version 5.01 or later, if you are using Office Professional 2003 Web Components — version 4.01 or later, for Office XP Web Components) is selected, and then click Preview.
- Try interacting with the chart on the Web page as you users might — for instance, you can do more filtering, move fields to different areas of the chart to see different views of the data or sort the data differently.
|