다음을 통해 공유

SharePoint 2010: How to Create a Stacked Bar Chart with Column Totals

  • 아티클

Introduction

This article shows you how to create a stacked bar chart in page in SharePoint Server 2010, step-by-step. It uses both SharePoint Designer 2010 and the web front end tools to build and configure the chart. This article assumes that you already have a list to which you want to connect the chart.

It starts by walking you through how to connect a chart to a SharePoint list. It then walks you through how to add multiple series (list columns) to the chart and then configure these series as a stacked bar chart. You'll learn how to enhance the chart in a few key ways, such as hiding the chart toolbar, and then you'll learn how to add sums that appear at the top of each stacked bars using a little trick.

Add a new Web Part Page

  1. Launch SharePoint Designer 2010.
  2. Connect to the target site.
  3. Navigate to the Site Pages folder.
  4. Add a new Web Part Page.
  5. Save and close the page.
  6. Exit Designer.

Add the Chart Web Part

  1. In any browser, navigate to the target page you created.
  2. On the Page ribbon, click Edit Page.
  3. On the page body, click Add a Web Part.
  4. On the Categories panel, select Business Data, and then select Chart Web Part.
  5. Click Add.
  6. On the Page ribbon, click Stop Editing.

Connect the Chart Web Part to Data

  1. On the Chart Web Part, click Data & Appearance.
  2. Click Connect Chart to Data.
  3. Select Connect to a list, and then click Next.
  4. From the List dropdown, select the target list.
  5. Click Next.
  6. Leave all defaults, and then click Next.
  7. Click Finish.  You'll come back to this in the next section.

Connect and Configure Data Series

  1. On the Chart Web Part, click Data & Appearance.
  2. Click Connect Chart to Data.
  3. Click Series Properties.
  4. In the Series Name field, change the name from Default to Change1 (or your first series name).
  5. From the Series Type dropdown, select Stacked Column.
  6. Click the + button next to the Series dropdown.  This adds a new data series (the second).
  7. In the Series Name field, change the name from Series 2 to Change2 (or your second series name).
  8. From the Series Type dropdown, select Stacked Column.
  9. From the Y Field dropdown, select Change2 (or the column name of your second series).
  10. Click the + button next to the Series dropdown.  This adds a new data series (the third).
  11. In the Series Name field, change the name from Series 3 to Change3 (or your third series name).
  12. From the Series Type dropdown, select Stacked Column.
  13. From the Y Field dropdown, select Change3 (or the column name of your third series).
  14. Repeat as necessary for each series.  Series correspond to columns in the source list.
  15. Click Finish.

Configure Appearance

  1. Hover the cursor over the Chart Web Part title to expose the title bar dropdown.
  2. Select Edit Web Part.
  3. Scroll to the bottom to the Appearance section, and then from the Chrome Type dropdown, select None.
  4. Click OK.
  5. On the Chart Web Part, click Advanced Properties.
  6. On the Chart Properties panel, scroll down to the Layout section, change the Width property to 500px, and then press Enter.
  7. On the Select an Element panel, click Legends.
  8. Click the  + button to the right of the Legend Menu dropdown.
  9. On the Chart Properties panel, scroll down to the Docking section, and then from the DockedToChartArea dropdown, select Default.
  10. On the Select an Element panel, click Titles.
  11. Click the  + button to the right of the Titles Menu dropdown.
  12. On the Chart Properties panel, scroll down to the Text property, and then enter a title.
  13. Scroll up a bit to the Size property, enter a larger font size, and then press ENTER.
  14. From the Bold property dropdown, select True.
  15. Click Finish.

Hide Chart Web Part Toolbar

  1. Launch SharePoint Designer 2010.
  2. Checkout the target page.
  3. Open the page in Code view (no need to go into Advanced Mode).
  4. Search for ShowToolbar.
  5. Save and close the page.
  6. Check the file back in.
  7. Exit Designer.

Add Data Enhancements

  1. Open a browser and navigate to the target page.
  2. On the Page ribbon, click Edit Page.
  3. From the Chart Web Part title bar dropdown, point to Advanced Properties.
  4. Click Advanced Properties.
  5. On the Select an Element panel, click Series.
  6. On the Chart Properties panel, scroll down to the MapArea section, and then in the ToolTip field, enter #VAL, and then press ENTER.
  7. Hover the cursor over the Change1 bars (bottom in this figure) to verify that popup numbers appear.
  8. From the Series Menu, select Change2 and repeat for each series.
  9. Click Finish.
  10. Hover the cursor over any stacked bar to verify value.

Add Column Totals

  1. Add a calculated column to the source list.  For this procedure, we'll call it StackedTotal.  Set the column value to the sum of the other columns.
  2. Open a browser and navigate to the target page.
  3. On the Page ribbon, click Edit Page.
  4. From the Chart Web Part title bar dropdown, click Data & Appearance.
  5. Click Connect Chart to Data.
  6. Click Series Properties.
  7. Click the + button next to the Series dropdown.  This adds a new data series (the fifth).
  8. In the Series Name field, change the name from Series 5 to StackedTotal  (or your calculated column name).
  9. From the Series Type dropdown, select Column (not Stacked Column!).
  10. From the Y Field dropdown, select the name of the calculated column, in this case StackedTotal.
  11. Click Finish.  The original stacked columns are now hidden behind the single new columns.
  12. On the Page ribbon, click Edit Page.
  13. From the Chart Web Part title bar dropdown, click Advanced Properties
  14. On the Select an Element panel, click Series
  15. From the Series Menu, select StackedTotal.
  16. On the Chart Properties panel, scroll down to the Legend section.
  17. Change the IsVisibleInLegend property to False. The new column is no longer seen in the Legend.
  18. Scroll up to the Label section.
  19. Change the IsValueShownAsLabel property to True.  The calculated totals are now displayed as labels above each column.
  20. Scroll up to the Appearance section.
  21. Open the Color dropdown, and then select Transparent.  The new column is no longer visible, but the column labels remain.
  22. And the result:
  23. This concludes this procedure.

Summary

This articled has presented a step-by-step process for creating and configuring a stacked bar chart on a SharePoint Server 2010 page.  For additional detail on the topics discussed in this article, see the references.

References

Notes

  • The key to creating the stacked bar chart is getting the Chart web part to recognize that there are multiple data series; and this is done by creating multiple series during the data connection process.