Exercise 1: Using the Chart Web Part

In this exercise you have received some summary sales information that must be presented on the current BI Center SharePoint site. You’ll be using the Chart Web Part to quickly visualize the sales data currently stored in lists.

Task 1 – Add the Chart Web Part to the page

In this task, you will create a new web part page in the SharePoint site and place a chart web part on it.

1. In Internet Explorer navigate to http://intranet.contoso.com/sites/BIApplications
2. Create a new Web Part Page in the Pages document library
   1. Click the All Site Content link in the left side Navigation menu
   2. Click the Create button
   3. Filter by Page, select Web Part Page and click Create

      

      Figure 1

      Create Dialog

   4. Name the page ChartWebPart and select a layout of Full Page, Vertical
   5. Select Pages in the Document Library dropdown and click Create

      

      Figure 2

      Create Web Part Page

3. Add a Chart Web Part to the new page
   1. Click the Add a Web Part link in the content section of the page
   2. Select a Category of Business Data in the Categories section
   3. Select Chart Web Part in the Web Parts section and click Add

      

      Figure 3

      Add Chart Web Part

Task 2 – Create a Sales by Country Pie Chart

In this task, you will attach list data to the Chart Web Part and then apply formatting to build a pie chart.

1. Connect the Chart Web Part to the data in the Sales by Country list
   1. Click the Data & Appearance link on the Chart Web Part
   2. On the new page, click the Connect Chart to Data link
   3. Choose the Connect to a List option and click Next
   4. Choose the Sales by Country list in the List drop down and click Next

      

      Figure 4

      Choose Chart Data Source List

   5. Don’t assign a data filter and click Next
   6. When choosing the bindings of data to field, verify the Y field is set to Sales Revenue and the X Field is set to Country

      

      Figure 5

      Set Chart Data Bindings

   7. Click the Finish button to complete the wizard

      

      Figure 6

      Complete Bar Chart

2. Customize the chart to render as a 3D pie chart
   1. Click the Data & Appearance link on the Chart Web Part
   2. On the new page, click the Customize Your Chart link
   3. On the Select Chart Type wizard page, select Pie as the Chart Type Category
   4. Choose the 3D Chart Types and pick the first pie chart template and click Next

      

      Figure 7

      Choose Pie Chart Type

   5. Set the Width to 800px and the Height to 400px and click Next
   6. On the Chartelementproperties wizard page check the Show Legend check box
   7. Set the Title to Sales By Country

      

      Figure 8

      Add Chart Legend

   8. Click the Finish button to complete the wizard

      

      Figure 9

      Complete Pie Chart

Task 3 – Create a Sales by Year Chart

In this task, you will attach list data to the Chart Web Part and then apply formatting to build a pie chart.

1. Create a new Chart Web Part on the ChartWebPart page
   1. Click the Add a Web Part link in the content section of the page
   2. Select a Category of Business Data in the Insert section
   3. Select Chart Web Part in the Web Parts section and click Add

      

      Figure 10

      Add Chart Web Part

   1. Connect the Chart Web Part to the data in the Sales by Year list
      1. Click the Data & Appearance link on the Chart Web Part
      2. On the new page, click the Connect Chart to Data link
      3. Choose the Connect to a List option and click Next
      4. Choose the Sales by Year list in the List drop down and click Next
      5. Don’t assign a data filter and click Next
      6. When choosing the bindings of data to field, verify the Y Field is set to Sales Revenue, the X Field is set to Year, and the Group by Field is set to Country
      7. Click the Finish button to complete the wizard
   2. Customize the chart to render as a line chart
      1. Click the Data & Appearance link on the Chart Web Part
      2. On the new page, click the Customize Your Chart link
      3. On the Select Chart Type wizard page, select the Line as the Chart Type Category
      4. Choose the 2D Chart Types and pick the Line with no margin chart template and click Next
      5. Set the Width to 800px and the Height to 400px and click Next
      6. On the Chart element properties wizard page check the Show Legend check box
      7. Set the Title to Sales By Year
      8. Click the Finish button to complete the wizard

         

         Figure 11

         Add Chart Web Part