How do I add the HTML Chart web part with the Chart Wizard?

This article explains how to add and configure the HTML Chart Web Part. This chart web part uses HTML5, so Silverlight is not required.

Note: The instructions in this article are applicable to Administrators in the Top Level Site as well as to Power Users who have Owner permissions on a workspace.

1. Navigate to the Page

Navigate to the Page within EPM Live where you will add the HTML Chart Web Part. If navigating to a Dashboard, select the Dashboard name from the view drop down within that List App.

2. Open the Page in Edit Mode

Select the Settings Gear icon on the Icon Bar. Select Edit Page.

3. Add a Web Part

Click Add a Web Part in the section/column of the page where you want to add the HTML Chart Web Part.

4. Select the Charting Web Part

  1. Select the EPM Live category.
  2. Select the HTML Chart Web Part.
  3. Change the section/column to add the Web Part, if needed.
  4. Click the Add button.

5. Start the Chart Wizard

Click on the Start Wizard button to launch the Chart Wizard.

6. Select a Data Source

Click the ... button to select the List App and view that will be the Data Source for this chart.

7. Select the Data Source View

  1. Expand the desired List App.
  2. Select a view. This will act as a source of data for the items to show in the Chart Web Part. The filters settings for the selected view will be applied to the chart web part as well.
  3. Click the OK button.

8. Continue with the Wizard

  1. The selected List App and View will show in the Data Source Field.
  2. Click the Next button to continue with the Wizard.

9. Configure Chart

  1. Select a Chart Type.
  2. A preview of the selected Chart Type will show.
  3. Select the fields that are to show in the Chart. Based on the chart type, the options may be different. Options include Aggregation Type, X Value (Categor), Y Value, Z Value.
  4. Click the Next button to continue with the Wizard. If needed, click the Back button to return to the previous screen.

10. Configure Chart Additional Properties

  1. Enter Chart Title. Note: This is different than the Web Part Title. You may have either, both, or neither.
  2. Select a Color Palette.
  3. Select the Legend Position. Show Legend has to be checked in conjunction with this option.
  4. Select whether to show the Grid Lines, X Axis Labels, and Legend.
  5. When finished, click Save.

11. New Chart Added

The New Chart will show the settings as configured in the Chart Wizard.

To edit the web part, such as updating the Web Part Title, etc. click the web part drop down menu, and select Edit Web Part.

12. Configure HTML Chart Web Part Settings

The settings selected in the Wizard will show in the Web Part Settings. These can be modified as needed.

13. Configure HTML Chart Web Part Appearance

  1. Title: Enter the Web Part Title, if desired.
  2. Chrome Type: Select the desired chrome type, such as Title Only.
  3. When finished, click OK.

14. Completed HTML Chart Web Part

15. Stop Editing Page

When you are finished modifying the HTML Chart Web Part or any others on this page, select Stop Editing from the Page Ribbon Tab.



Please sign in to leave a comment.