Exercise 1: Using the Charting Web Parts

In this exercise you will use the Chart Web Part to provide a simple way to provide charts on a Web Part page so that users can visualize data in native lists within a SharePoint site as well as external lists created with the BCS. For the sake of time, this exercise will use a SharePoint list but keep in mind that the techniques you learn to display charts using the Chart Web Part can also be based on data from backend systems.

1. If you haven’t already done so, run the batch file named SetupLab12.bat, found in the c:\Student\Labs\12_BI\ folder, to create the new site collection that will be used to test and debug the code you will be writing in this lab. This batch file creates a new site collection at an URL of https://intranet.contoso.com/sites/Lab12a and https://intranet.contoso.com/sites/Lab12b.
2. Using the browser, navigate to the site at https://intranet.contoso.com/sites/Lab12a.

3. In the Quick Launch, you should see that there are two lists that have been created in the site named Sales By Country and Sales By Year. Click on the links to quickly inspect the data inside.(Note: if the lists are missing run the BI_DataGenerator.exe located in c:\Student\Labs\12_BI)

   Figure 1

   The Sales By Country list

4. The Chart Web Part is part of the Enterprise Edition of SharePoint Server 2010. Therefore, you must activate a specific feature of the Enterprise Edition before you can use the Chart Web Part.
   1. Select the Site Actions » Site Settings.
   2. Inside the Site Collection Administration section of the Site Settings page, select Site collection features.
   3. Activate the feature titled SharePoint Server Enterprise Site Collectionfeatures.
   4. Navigate back to the Site Settings page using the breadcrumbs.
   5. Inside the Site Action section of the Site Settings page, select Site features.
   6. Activate the feature titled SharePoint Server Enterprise Site features. Note: Activation of these features is what makes the Chart Web Part available.
5. Click on the Home link on the Top Link navigation bar to return to default.aspx.
6. Add an instance of the Chart Web Part to default.aspx using the following steps.
   1. Select Site Actions » Edit Page to place default.aspx into edit mode.
   2. Click on the Add a Web Part button inside the Left Web Part Zone.

   3. Select the Chart Web Part from the Business Data folder and click the Add button place it on the page.

      Figure 2

      Add the Chart Web part

7. Once the Chart Web Part has been added to the page, you should see a link with the caption of Data & Appearance. Click on this link to launch a wizard that will allow you to select a data source.

   Figure 3

   The Chart web part

8. Follow these steps to move through the wizard and connect the Chart Web Part to a SharePoint list as its data source.
   1. On the first page of the wizard, click the link Connect chart to data.
   2. Now select a data source. Choose Connect to a List and click Next.

   3. The next page asks you to pick a site and a list. Leave the current site as the selected site and make sure Sales by Country is selected as the target list. Click Next.

      Figure 4

      Configure the Chart web part

   4. The next page shows you the data from the list but requires no action. Click Next.

   5. The final step of the wizard allows you to bind your chart to the data. Fill out this page as shown in the screenshot below (these should all be default settings on this screen) and click Finish.

      Figure 5

      Configure the Chart web part

9. At this point you should have a basic column chart. Now you need to convert it into a pie chart and make it look more polished. Click the Data & Appearance link again and do the following:
   1. On the first page of the wizard click Customize Your Chart.

   2. The next page allows you to pick a chart type. Under Chart Type Categories select Pie. Select the 2D Chart Types tab and select the first chart type with the caption of Pie. Click Next.

      Figure 6

      Configure the Chart web part

   3. The next page allows you to change visual aspects of the chart. Change the Chart Width from 300px to 800px. Change the Chart Height from 300px to 400px. Click Next.

   4. On the next page, click the checkbox which reads Show Legend. Add a legend title of "Sales By Country”.

      Figure 7

      Configure the Chart web part

   5. Click Finish to complete the wizard and to see the chart which should look like the one shown below.

      Figure 8

      Sales By Country Pie Chart

10. Now you will add a second instance of the Chart Web Part to default.aspx so you can also chart the sales data inside the Sales by Year list.
    1. Select Site Actions » Edit Page command to place default.aspx into edit mode.
    2. In the Left Web Part Zone click on the Add Web Part button.

    3. Select the Chart Web Part from the Business folder and click the Add button place it on the page.

       Figure 9

       Add another Chart web part

11. At this point the new Chart Web Part instance should appear above the Pie Chart Web Part you created earlier. Now configure this following these directions:
    1. Click on the Data & Appearance link on new Chart Web Part instance so you can select a data source.
    2. On the first page of the wizard, click the link which reads Connect Chart To Data.
    3. The next page asks you to select a data source. Choose Connectto a List and click Next.
    4. The next page asks you to pick a site and a list. Leave the current site as the selected site and select Sales by Year as the target list. Click Next.
    5. The next page shows you the data from the list but requires no action. Click Next.

    6. The next and final step of the wizard allows you to bind your chart to the data. Fill out this page as the screenshot shown below and click Finish.

       Figure 10

       Configure the Chart web part

12. At this point you should have a basic column chart. Now you need to convert it into a line chart and make it look more polished. Click the Data & Appearance link again and follow these steps.
    1. On the first page of the wizard click Customize Your Chart.

    2. The next page allows you to pick a chart type. Under Chart Type Categories select Line. Select the 2D Chart Types tab and select the chart type with the caption of Line with no Margin and click Next.

       Figure 11

       Configure the Chart web part

    3. The next page allows you to change visual aspects of the chart. Change the Chart Width from 300px to 800px. Change the Chart Height from 300px to 400px. Click Next.

    4. On the next page, click the checkbox which reads Show Legend. Add a legend title of "Sales By Country”

       Figure 12

       Configure the Chart web part

    5. Click Finish to complete the wizard and to see the chart which should look like the one shown below.

       Figure 13

       The configured Sales By Country Line Chart web part