MOSS Charts Web Part. User Guide. Copyright 2008 Data Springs Inc. All rights reserved.

Transcription

1 MOSS Charts Web Part User Guide Copyright 2008 Data Springs Inc. All rights reserved.

2 Table of contents: 1 INTRODUCTION INSTALLATION PROCEDURE Installation steps MOSS CHARTS MAIN MENU MODIFYING MOSS CHARTS SETTINGS Managing Chart Data Managing Chart Legends Managing Chart Graph Example of the Bar Chart Type Example of the Bar 3D Chart Type Example of the Bar Fade Type Example of the Bar Glass type Example of the Line Chart Type Example of the Line Dot Chart Type Example of the Line Hollow Chart Type Example of the Area Hollow Chart Type Example of the Pie Chart Type Modifying MOSS Charts Web Part Appearance Modifying the Layout Modifying Advanced Settings MANAGING THE LISTS Creating a list Adding a column to the list Adding an item to the list Working with the lists Creating a new view Creating a chart based on the view EXPORTING MOSS CHARTS SETTINGS Importing the MOSS Charts Settings...34 List of figures: Figure 1: Accessing MOSS Charts Main Menu...6 Figure 2: MOSS Charts Main Menu...6 Figure 3: Modifying Shared Web Part...8 Figure 4: Available options for modifying MOSS Charts...8 Figure 5: Managing Chart Data...9 Figure 6: Managing "Chart Legends"...11 Figure 7: Managing the chart graph...12 Figure 8: Example of the Bar Chart Type...14 Figure 9: Example of the Bar 3D Chart Type...14 Figure 10: Example of the Bar Fade Type...15 Figure 11: Example of the Bar Glass type...15 Figure 12: Example of the Line Chart Type...16 Figure 13: Example of the Line Dot Chart Type...16 Figure 14: Example of the Line Hollow Chart Type...17 Figure 15: Example of the Area Hollow Chart Type...17 Figure 16: Example of the Pie Chart Type...18 Figure 17: Modifying Web Part Appearance...19 Figure 18: Using the layout parameters...20 Figure 19: Modifying Advanced Settings...21 Figure 20: Creating a list (step 1/3)...23 Figure 21: Creating a list (step 2/3)...24 Figure 22: Creating a list (step 3/3)...24 Figure 23: The list has been successfully created...25 Figure 24: Creating a column (step 1/2)...25 Page: 2 / 37

3 Figure 25: Creating a column (step 2/2)...26 Figure 26: Adding an item to the list (step 1/3)...27 Figure 27: Adding an item to the list (step 2/3)...27 Figure 28: Adding an item to the list (step 3/3)...28 Figure 29: items as months during the year...28 Figure 30: Creating a new view (step 1/4)...29 Figure 31: Creating a new view (step 2/4)...29 Figure 32: Creating a new view (step 3/4)...30 Figure 33: Creating a new view (step 2/4)...30 Figure 34: Creating a new view (step 4/4)...30 Figure 35: Choose the desired view from the View menu...31 Figure 36: Creating a chart based on the view (step 1/2)...31 Figure 37: Creating a chart based on the view (step 2/2)...32 Figure 38: Example of the chart created based on the view Revenues below 20, Figure 39: Exporting the Web Part settings (step 1/3)...33 Figure 40: Exporting the Web Part settings (step 2/3)...33 Figure 41: Exporting the Web Part settings (step 3/3)...34 Figure 42: Importing the MOSS Charts Settings (step 1/5)...34 Figure 43: Importing the MOSS Charts Settings (step 2/5)...35 Figure 44: Importing the MOSS Charts Settings (step 3/5)...36 Figure 45: Importing the MOSS Charts Settings (step 4/5)...36 Figure 46: Importing the MOSS Charts Settings (step 5/5)...37 Page: 3 / 37

4 1 INTRODUCTION The MOSS Chart Web Part is a web part built by Data Springs for the purpose of rendering several chart types based on data from a SharePoint list on a MOSS 2007 or WSS 3.0 Site. The web part includes many features including: General Features Dynamic Chart Types - Bar, Bar3D, Bar Fade, Bar Glass, Line, Line Dot, Line Hollow, Area Hollow, Pie Custom Data source with MOSS Chart web part you have the ability to connect your chart to virtually any SharePoint list or utilize a view to sort and filter the data retrieved within the chart results Chart Legend Define a legend for your chart including chart X and Y titles, colors, and size Look & Feel Parameters Each area within the web part has settings to define the look and feel of the web part. This includes not only the labels and text used within the web part, but also the titles, colors, alpha transparency, size, and many other custom parameters and configuration options Note: this manual assumes prior experience with SharePoint lists and views. For further information about SharePoint, please consult the SharePoint documentation. Page: 4 / 37

5 2 INSTALLATION PROCEDURE Included in the installation package are the following 3 files: mychart.cab mychartinstallwebpartinstallwebpart.rename readme.txt 2.1 Installation steps Step 1: copy the 3 files to this folder: C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\bin Step 2: rename the file "mychartinstallwebpartinstallwebpart.rename" to "installwebpart.bat" Step 3: run the file installwebpart.bat (note: make sure that this makes an IIS reset) Page: 5 / 37

6 3 MOSS CHARTS MAIN MENU In order to access the MOSS Charts web part main menu, click on the arrow symbol next to the MOSS Charts label. Figure 1: Accessing MOSS Charts Main Menu The following options are available inside the main menu: Figure 2: MOSS Charts Main Menu Minimize click on this option if you want to minimize the web part Page: 6 / 37

7 Close option for removing the Web Part from the page (note: this will also reset all changes made to the Web Part) Modify Shared Web Part option for modifying the MOSS Charts settings (see section 4.4) Export option for exporting web part configuration and settings (see section 6) Page: 7 / 37

8 4 MODIFYING MOSS CHARTS SETTINGS In order to start modifying the MOSS Charts settings, choose Modify Shared Web Part option from the main menu. Figure 3: Modifying Shared Web Part The following screen will be displayed. Figure 4: Available options for modifying MOSS Charts The following options are available inside this screen: Page: 8 / 37

9 Appearance the option for managing the web part appearance (see section 4.4) Layout the option for managing the web part layout (see section 4.5) Advanced the option for managing the web part advanced settings (see section 4.6) Chart Data the option for managing chart data (see section 4.1) Chart Legends the option for managing chart legends (see section 4.2) Chart Graph the option for managing chart graph (see section 4.3) 4.1 Managing Chart Data In order to start managing the chart data choose option Modify Shared Web Part from the main menu and then click on the + symbol next to the Chart Data label. Figure 5: Managing Chart Data Page: 9 / 37

10 The following options and parameters are available: listname properties these 3 properties are used for setting up the SharePoint list (note: see section 5): o listname this property is mandatory o listname2 - this property is optional o listname3 this property is optional listviewname properties - these are the properties for setting the desired view for the listnames o listviewname - is a required property o o listviewname2 this property is optional except in the case where listname2 has been previously setup listviewname3 - this property is optional except in the case where listname3 has been previously setup listfieldvalue properties - these fields are the properties used for setting the values which will be drawn on the chart o listfieldvalue this property is mandatory o listfieldvalue2 - this property is optional except in the case where listname2 has been previously setup o listfieldvalue3 - this property is optional except in the case where listname3 has been previously setup After setting the desired parameters, click on the "OK button to save the changes. Important note: All of these properties must have an existent valid field name on the Sharepoint list (see section 5 for further information about setting up a list). 4.2 Managing Chart Legends In order to start managing the chart legends, i.e various text displayed within the chart, choose option Modify Shared Web Part from the main menu and then click on the + symbol next to the Chart Legends label. Page: 10 / 37

11 Figure 6: Managing "Chart Legends" The following options and parameters are available: legendx enter the label for legendx (i.e. Months ) legendxsize this is the property for setting the size of the X axis (note: value should be entered in pixels) legendxcolor this is a property for setting the color for the X axis (note: the color should be specified as a hexadecmal value) legendy enter the label for legendy (i.e. Amounts ) legendysize this is the property for setting the size of the Y axis (note: value should be entered in pixels) legendycolor this is a property for setting the color for the X axis (note: the color should be specified as a hexadecmal value) Page: 11 / 37

12 ChartTitle this is the property for setting the label text for the chart i.e. the title of the chart SeriesSize this is the property for setting the label size for series references on the chart (note: the value should be entered in pixels) legendserie (1, 2 and 3) these 3 properties are used for setting the labels for the drawn series After setting the desired parameters, click on the "OK button to save the changes. 4.3 Managing Chart Graph In order to start managing the chart legends choose option Modify Shared Web Part from the main menu and then click on the + symbol next to the Chart Graph label. Figure 7: Managing the chart graph The following options and parameters are available: Page: 12 / 37

13 ChartType this is the pull down menu for choosing the desired chart type (note: this property is required): o Bar see section o Bar 3D see section o Bar Fade see section o Bar Glass see section o Line see section o Line Dot see section o Line Hollow see section o Area Hollow see section o Pie see section Choose Alpha this parameter is used for setting the chart alpha transparency for the graph colors (note: recommended values are between 0 and 100) GraphColor 1,2 and 3 these parameters are used for setting the desired graph colors; there are 3 available parameters, so your graph can contain 3 different colors (note: the colors should be specified as hexadecimal values) Width use this parameter to set the width of the entire chart Height use this parameter to set the height of the entire chart o Note: It is recommended that you set these properties so that the size fits the amount of the data within the chart default value for this parameter is set to 450 and 400 pixels Choose StepsY enter the desired value for making the steps i.e. granularity of the Y axis Choose StepsX enter the desired value for making the steps i.e. granularity of the X axis YMin use this parameter to set the minimal value for the Y axis YMax use this parameter to set the minimal value for the X axis After setting the desired parameters, click on the "OK button to save the changes. Page: 13 / 37

14 4.3.1 Example of the Bar Chart Type Figure 8: Example of the Bar Chart Type Example of the Bar 3D Chart Type Figure 9: Example of the Bar 3D Chart Type Page: 14 / 37

15 4.3.3 Example of the Bar Fade Type Figure 10: Example of the Bar Fade Type Example of the Bar Glass type Figure 11: Example of the Bar Glass type Page: 15 / 37

16 4.3.5 Example of the Line Chart Type Figure 12: Example of the Line Chart Type Example of the Line Dot Chart Type Figure 13: Example of the Line Dot Chart Type Page: 16 / 37

17 4.3.7 Example of the Line Hollow Chart Type Figure 14: Example of the Line Hollow Chart Type Example of the Area Hollow Chart Type Figure 15: Example of the Area Hollow Chart Type Page: 17 / 37

18 4.3.9 Example of the Pie Chart Type Figure 16: Example of the Pie Chart Type 4.4 Modifying MOSS Charts Web Part Appearance In order to start modifying the MOSS Charts web part appearance, choose option Modify Shared Web Part from the main menu and click on the + symbol next to the Appearance label. Page: 18 / 37

19 Figure 17: Modifying Web Part Appearance The following parameters are available inside this screen: Title input field for setting the web part title Height option for setting the web part height; choose one of the following: o Yes select this radio button if you want to set a fixed height for the web part and then enter the desired value and choose the desired category (e.g. Pixels or Centimeters) o No. Adjust width to fit zone select this radio button if you do not wish to set the fixed height but adjust the height to fit the zone Width option for setting the web part width; choose one of the following: o Yes select this radio button if you want to set a fixed width for the web part and then enter the desired value and choose the desired category (e.g. Pixels or Centimeters) o No. Adjust width to fit zone select this radio button if you do not wish to set the fixed width but adjust the height to fit the zone After setting the desired parameters, click on the OK button in order to save the changes. 4.5 Modifying the Layout In order to start modifying the MOSS Charts web part layout, choose option Modify Shared Web Part from the main menu and click on the + symbol next to the Layout label. Page: 19 / 37

20 Figure 18: Using the layout parameters The following parameters are available inside this screen: Hidden select this checkbox if you wish to hide the Web Part Direction select the desired direction from this pull down menu: o Left to Right o Right to Left Zone select the desired zone orientation i.e. the location of the web part within the page Zone Index enter the desired Zone Index value i.e. the value for setting the desired sort order for this web part (the smaller the value the closer to the top will the web part be placed) 4.6 Modifying Advanced Settings In order to start modifying the MOSS Charts web part advanced settings choose option Modify Shared Web Part from the main menu and click on the + symbol next to the Advanced label. Page: 20 / 37

21 Figure 19: Modifying Advanced Settings The following parameters are available inside this screen: Allow Minimize select this checkbox if you wish to allow minimizing of the Web Part Allow Close - select this checkbox if you wish to allow closing of the Web Part Allow Hide - select this checkbox if you wish to allow hiding of the Web Part Page: 21 / 37

22 Allow Zone Change - select this checkbox if you wish to allow zone change for the Web Part Allow Connections - select this checkbox if you wish to allow Web Part connections Allow Editing in Personal View - select this checkbox if you wish to allow minimizing of the Web Part Export Mode use the desired export mode from this pull down menu o Non-sensitive data only - choose this option if you wish to allow exporting of the non sensitive data o Export all data - choose this option if you wish to allow the export of all data Title URL field for entering the title URL Description - field for entering the description Help URL field for entering the help URL Help Mode pull down menu for choosing the desired help mode. Catalog Icon Image URL you this field to specify a relative path on your system towards the catalog icon image Title Icon Image URL you this field to specify a relative path on your system towards the title icon image Import Error Message use this field to specify a custom error message which will be displayed to in case an import error occurs Page: 22 / 37

23 5 MANAGING THE LISTS Note: this User Guide assumes general knowledge and experience with SharePoint; further information about each of the elements descried within this section can be found here: The SharePoint lists are used for defining the content for the charts. So, to be able to display data within the charts, you will need to setup a SharePoint list. The procedure of creating a list is explained by using yearly revenues report as an example. 5.1 Creating a list In order to create a list, choose option Create from the Site Actions menu. Figure 20: Creating a list (step 1/3) The following page will be displayed. Page: 23 / 37

24 Figure 21: Creating a list (step 2/3) Click Custom List and the following page will be displayed. Figure 22: Creating a list (step 3/3) The following options and parameters are available: Name enter the name of the list (e.g. Revenues ) Description enter the list description (e.g. This list collects information about the revenues ) Display the list in the Quick Launch this option can be useful if you plan to create a small number of lists; if your site has a large number of lists and libraries, it would be a good idea to keep only the ones which are used most so as not to create an opposite effect After setting the desired parameters, click Create and the list will be created. Page: 24 / 37

25 Figure 23: The list has been successfully created The next step is adding columns to the list (see section 5.2). 5.2 Adding a column to the list The column element is used to define the type of information the list will contain i.e. the parameters displayed within the columns. Since we are using yearly revenues as an example, the columns our list should contain are: Title this will be the Month column used for displaying different months in a year Value this column will contain the actual information about the revenue per month Created by/modified by these are the columns displaying information about the persons who have created or modified the report In order to start creating a column, choose option Create Column from the Settings menu. Figure 24: Creating a column (step 1/2) The following page will be displayed. Page: 25 / 37

26 Figure 25: Creating a column (step 2/2) The following options and parameters are available: Column name enter the name of the column inside this input field (e.g. Title ) The type of information choose the type of information this column will contain (note: once you make the choice, the page will be refreshed containing further specific parameters o For the title column you should choose Single line of text option o For the value column, the Number, etc After setting the desired parameters, click on the "OK button to create a new column. The new column will be created (e.g. Title). You can repeat the same procedure for the desired number of columns you wish to display within your list. The last step in defining a list is adding items, which will utilize the columns to display specific information. In the case of yearly revenues report, the items will be months containing values, i.e. the amount for each of the months (note: for further information about creating items, see section 5.3). 5.3 Adding an item to the list In order to add an item to the list (in the case of yearly revenues, these will be a month and an amount earned during the month), choose option New Item from the New menu. Page: 26 / 37

27 Figure 26: Adding an item to the list (step 1/3) The following page will be displayed. Figure 27: Adding an item to the list (step 2/3) The following parameters are available (note: the parameters available for defining an item are actually the previously created columns see section 5.2): Title for the purpose of creating a yearly revenue report, the title field can be used for defining the name of one month (e.g. JAN) Value similarly, the value field in this case is used for entering the amount of the generated revenue during that month Created by/modified by these fields can be used for specifying the person/s involved with creating or modifying the report After setting the desired parameters, click OK and the new item will be created. Page: 27 / 37

28 Figure 28: Adding an item to the list (step 3/3) You can repeat the same procedure to create the rest of the months/items within a year. Figure 29: items as months during the year 5.4 Working with the lists One of the ways for manipulating the data within the lists is creating different views for them. In the case of yearly revenues report which is used as an example throughout this guide, those views can be revenues below or above a certain value (i.e. Above 50,000 below 50,000, etc). Different views can then be used for creating accompanying charts (a chart per view), so you could have one chart for revenues above 50,000 and the other for revenues below 50,000. Page: 28 / 37

29 5.4.1 Creating a new view In order to start creating a new view, click on the list you wish to create the view for (e.g. Revenues). Figure 30: Creating a new view (step 1/4) The following page will be displayed. Figure 31: Creating a new view (step 2/4) Choose option Create View from the Settings menu. The following page will be displayed. Page: 29 / 37

30 Figure 32: Creating a new view (step 3/4) Choose option Standard View. The following page will be displayed (note: only the most important parameters are explained for further information about the view parameters see Figure 33: Creating a new view (step 2/4) Enter the name for this view within the View Name field (note: this name will be used for connecting the chart to this view see section 4.3). Figure 34: Creating a new view (step 4/4) The Filter parameter is used for defining the condition for displaying items within a view. Here you can decide to set the condition to Value less than 20,000 and the view (and subsequently the chart as well) will only display items below 20,000. Page: 30 / 37

31 Figure 35: Choose the desired view from the View menu Choose the desired view from the View menu to review the settings of the created view Creating a chart based on the view Once you have defined a desired view for the items (see the previous section), you can create a chart based on that view. Figure 36: Creating a chart based on the view (step 1/2) The page for setting the chart parameters will be displayed. Page: 31 / 37

32 Figure 37: Creating a chart based on the view (step 2/2) The two parameters used for connecting the view to the chart are: listname enter the name of the list with the view you wish to display listviewname enter the name of the specific view you wish this chart to represent (note: you can repeat the same procedure to define the desired number of charts per view)) The screenshot below demonstrates the chart created based on the view Revenues below 20,000. Figure 38: Example of the chart created based on the view Revenues below 20,000 Page: 32 / 37

33 6 EXPORTING MOSS CHARTS SETTINGS In order to start exporting the MOSS Charts web part settings, choose option Export from the main menu. Figure 39: Exporting the Web Part settings (step 1/3) The following screen will be displayed. Figure 40: Exporting the Web Part settings (step 2/3) Click on the Save button to choose the file name and location and the following dialog will be displayed. Page: 33 / 37

34 Figure 41: Exporting the Web Part settings (step 3/3) Choose the desired location and the name of the exported file and click on the Save button in order to complete the export procedure. 6.1 Importing the MOSS Charts Settings In order to import the MOSS Charts settings once you have performed the export (note: see previous section), choose option Edit Page from the Site Actions menu. Figure 42: Importing the MOSS Charts Settings (step 1/5) The following screen will be displayed. Page: 34 / 37

35 Figure 43: Importing the MOSS Charts Settings (step 2/5) Click on the Advanced Web Part Gallery and options at the bottom of the screen and the following screen will be displayed. Page: 35 / 37

36 Figure 44: Importing the MOSS Charts Settings (step 3/5) Click on the arrow next to the Browse label in order to open the menu and then choose the Import option. The following screen will be displayed. Figure 45: Importing the MOSS Charts Settings (step 4/5) Click on the Browse button inside this screen to locate the exported file and then click on the Upload button in order upload it. The following screen will be displayed. Page: 36 / 37

37 Figure 46: Importing the MOSS Charts Settings (step 5/5) The Uploaded Web Part part of the screen will display information about the uploaded MOSS Chart. Select the desired location from the pull down menu and click on the Import button at the bottom to complete the procedure of importing web part settings and configuration. The MOSS Charts web part will be imported to the page. Page: 37 / 37