Tree and Data Grid for Micro Charts User Guide

TABLE OF CONTENTS Components for Xcelsius... 1 Introduction... 4 Data Grid and Tree Grid Differences... 4 The Micro Chart Components... 4 More Information... 5 System Requirements for Installation... 6 Installing Inovista Add-ons... 7 Uninstalling the Add-On... 8 Using the Properties Sheet... 9 Main Property Editors... 9 Spreadsheet Binding... 9 Optional Spreadsheet Binding or Manual Data Entry... 10 Color Properties... 10 Gradient Color Editors... 11 Effect Property Editors... 13 Available HTML Tags when Using HTML Text... 15 The General Tab... 16 The Chart Columns Sub Tab... 16 Entering the Data for each Column Chart... 17 Moving and Deleting Columns... 18 Setting Column Header Text... 19 Adding an Axis Header to the Column... 19 Adding a Legend Footer to the Column... 20 Adjusting the Column Widths... 21 The General/Generic Properties Sub Tab... 22 The General/Generic Binding Sub Tab... 24 The Appearance Tab... 26 The Chart Grid Sub Tab... 27 The Gridlines and Border Sub Tab... 28 The Column Headers Sub Tab... 29 The Behaviour Tab... 30 Inovista Copyright 2009 All Rights Reserved Page 2

The Grid Options Sub Tab... 30 The Opening Effect Sub Tab... 30 The Click/Visibility Sub Tab... 31 The Columns Tab... 33 Tree Grid Properties... 35 Defining a Tree in the Spreadsheet... 35 The General/Tree Column Sub Tab... 36 Tree Source Data... 36 Other Properties... 37 Inovista Copyright 2009 All Rights Reserved Page 3

Inovista Tree and Data Grid for Xcelsius INTRODUCTION In addition to the core micro components, Inovista supplies containers such as a Data Grid, a productivity tool that allows designers to create customized presentations using logical groups of data. The Tree Grid is a related component which presents the information in a hierarchical format allowing users to navigate the data in exactly the same way as in the Windows explorer. The primary purpose of these visualizations is to be able to display as much meaningful information using the minimum screen real estate without baffling the end user. All the components are available as Xcelcius add-ins and come with a very powerful range of property editors allowing: Extensive Look & Feel Editing including Color Gradients Behavioural Effects Alerting Axes Legends User Click Management DATA GRID AND TREE GRID DIFFERENCES In the actual set up and property management of the components, there is only one real difference between the Data Grid and the Tree Grid and that is the inclusion of the Tree Column sub tab of the General tab. It is in this tab, that all tree editing activity is handled. THE MICRO CHART COMPONENTS The Data and Tree Grids are containers for Micro Chart Components. To understand more about these components, see the Micro Charts User Guide. Inovista Copyright 2009 All Rights Reserved Page 4

A Sample Data Grid A Sample Tree Grid MORE INFORMATION For more information about all Inovista products, please go to: www.inovista.com Check in the Samples and Tutorial tabs for examples and videos that can be downloaded. Inovista Copyright 2009 All Rights Reserved Page 5

To ask a question about this document or any Inovista product please contact Inovista using either of the following email addresses: support@inovista.com info@inovista.com SYSTEM REQUIREMENTS FOR INSTALLATION Xcelsius 2008 Service Pack 1 or later Flash Player 9 or greater At least 2 Gigabytes or RAM is recommended Inovista Copyright 2009 All Rights Reserved Page 6

Micro Charts User Guide INSTALLING INOVISTA ADD-ONS 1. Open Xcelsius and select the File menu option. On the menu drop down, select Manage Add- Ons... 2. On the window that pops up, click on the Install Add-On button and locate the downloaded.xlx in the file system. The Tree Grid and Data Grid as supplied as two separate.xlx files TreeGrid.xlx and DataGrid.xlx, so a click on the Install Add-On button will be needed for each file. 3. Close the pop up window and restart Xcelsius. On restart, the component should be available in the Xcelsius components box. Inovista Copyright 2009 All Rights Reserved Page 7

Micro Charts User Guide To use the component, once installed, simply drag the required component from the Component tab to the Xcelsius canvas. UNINSTALLING THE ADD-ON To uninstall the Micro Chart Suite, open the Manage Add-Ons window as in points 1 & 2 above. Select the DataGridController and/or MicroChartTreeGrid components in the Add-On manager and then click on Remove Add-On for each add-on you wish to uninstall. Inovista Copyright 2009 All Rights Reserved Page 8

USING THE PROPERTIES SHEET In addition to the standard property editors that are in common usage throughout Xcelsius, for example, the textual editors that allow a user to define font and font families; Inovista provides a range of specialist component editors. This guide will present details of the property sheet values that are specific to each component in addition to descriptions of the generic property editors. TIP For the components in a Tree or Grid to be visible in an Xcelsius preview or export, most Micro Chart components need to have actual data whether they are entered manually or derived from the spreadsheet. Some components, such as the Bullet Chart, will also need range information to be supplied. MAIN PROPERTY EDITORS SPREADSHEET BINDING To use data from the spreadsheet, use the bind editor property. Click on the button on the right hand side, to present a popup dialog box which allows the selection of a spreadsheet data range. Depending on the property, the data to select may be contained in a row or column of data. Multiple rows and columns may also be selected if they are relevant to the property. Inovista Copyright 2009 All Rights Reserved Page 9

OPTIONAL SPREADSHEET BINDING OR MANUAL DATA ENTRY Some properties offer the ability to select either a spreadsheet range or the manual entry of data. One example would be the Reference Line Value for the Micro Line chart. To manually enter a value, enter the required value into the text field and then click on the check button. To use a spreadsheet range or value, use the range selector button. If the property editor has a checkbox on the right hand side at the end of the editor, this is used to turn the property on and off. For example, in the image below, selecting the checkbox will show the Reference Line Value and deselecting will hide it. COLOR PROPERTIES The color editors generally provide a standard and advanced color picker. Where relevant, there is also a checkbox which is used to activate or deactivate the property. To select a standard color or a color that has been recently used, click on the standard color picker option. Then select the required color from the options available. TIP In the standard color picker, type or paste the hexadecimal value into the field at the top and hit enter to use that color. Inovista Copyright 2009 All Rights Reserved Page 10

To use the advanced color picker, click on the rainbow button color dialog.. This will present the advanced Use the slider to the right of the spectrum to set a base color range, and then click on the color on the main panel in order to select a color for the property. When finished, click on the Done button. The actual hexadecimal value of the color can be entered into the text field at the top right of the dialog. Hue, Saturation and Luminance values can be entered at the bottom of the dialog as can decimal Red, Green and Blue values. GRADIENT COLOR EDITORS For properties like the chart foreground and background, it is possible to create a color gradient using the gradient color property editors. Up to 6 colors can be used when creating a gradient. For each color, transparencies and ratios are editable. The gradient angle may also be defined from 0 to 360 degrees. Where relevant, there is also the option to set the gradient to Radial. Inovista Copyright 2009 All Rights Reserved Page 11

A minimum of 1 and a maximum of 6 colors are available. Use the Num. Colors option to select the required number. For each color, there is the option of using either the standard or advanced color picker. See previous section. The Alpha or transparency for each color is set by the respective slider. A value of 0 represents complete transparency and a value of 1 represents no transparency at all. The Ratios where the colors merge into the next color are defined by a single slider with a thumb for each color. Drag the thumb for each respective color to change its break point. The full range is defined from 0 to 255. The Angle of the gradient is defined by a slider allowing values from 0 to 365. If, for example, a value of 45 is selected, the gradient begins at the top left corner and completes in the bottom right corner. Inovista Copyright 2009 All Rights Reserved Page 12

The example below shows a 3 color gradient at a 45 degree angle. EFFECT PROPERTY EDITORS Most charts have the capability for the designer to create an opening effect. These effects are defined in the effect editor. A full range of effects are available and include: Blur Dissolve Fade Glow Move Resize Rotate Wipe Down Inovista Copyright 2009 All Rights Reserved Page 13

Wipe Left Wipe Right Wipe Up Zoom Select the required effect (or None) from the Effect drop down. Select the duration of the effect. Valid options are from 0 milliseconds to 10,000 milliseconds or 10 seconds. Select the required Easing Function Select the required Easing Method To further refine the effect, select the Use Options checkbox. This will enable the options for the effect that has been selected. Note that the options available for each effect will vary. Inovista Copyright 2009 All Rights Reserved Page 14

AVAILABLE HTML TAGS WHEN USING HTML TEXT When using the HTML text option in components like the Text Number Indicator or in Tooltips, the following HTML tags are valid. Anchor tag (<a>) Bold tag () Break tag ( ) Font tag () Image tag (<img>) Italic tag () List item tag (<li>) Paragraph tag () Text format tag (<textformat>) Underline tag () Inovista Copyright 2009 All Rights Reserved Page 15

THE GENERAL TAB THE CHART COLUMNS SUB TAB The Chart Column tab manages the insertion, moving and deletion of component columns. One of the main differences between using the micro chart components individually or within a grid component is that the definition of the data that drives the charts and their ranges is done from within this tab as opposed to within the micro chart component itself. Column headers, axis headers, legend footers and relative column widths are also set here. To add a chart to the grid, click on the insert button in the chart table header. To select the type of chart that will be in that specific row of the grid, click on the drop down in the Chart Type column. Scroll through the options and select the required chart. 12 different types of chart should be available. Inovista Copyright 2009 All Rights Reserved Page 16

To create another chart column, click on the insert button again. Up to 20 columns can be created in each grid. ENTERING THE DATA FOR EACH COLUMN CHART All data that are driven by spreadsheet values are entered from this tab. In some cases, for example, the manual entry of range data for the Bullet Chart or a Shape Indicator, this is undertaken in the component editor itself. To edit a chart, click on the number in the column to the left of the chart or on the row itself. At the bottom of the table, the valid data selectors for the chart will become visible. In this example (a Micro Line Chart), it is possible to enter the actual chart data and the target data if the chart is to display alerts. Note that charts will not be visible when the application is previewed or exported until actual data is included. TIP Click on the help button at the end of each data property selector to view a quick description of what that data source will do. Inovista Copyright 2009 All Rights Reserved Page 17

Click on the popup button next to the data type that is to be added and a select range dialog will be presented. Select the values from the spreadsheet that will drive the chart in the column. Data for each chart will be in rows. Each row in the spreadsheet data will create a new row in the grid. In the above example, each chart will present 7 data points and there will be 6 charts; one for each row of data. MOVING AND DELETING COLUMNS To move a column up, select the numbered column to the left of the table and click on the up button in the table toolbar. To move the column down, click on the down button. To delete the column, click on the delete button. Inovista Copyright 2009 All Rights Reserved Page 18

SETTING COLUMN HEADER TEXT To enter the text for a column header, click in the relevant cell in the Header Text column. Then type in the value required for the column header. Note to set a line break in the text, use the \n sequence. For example Column\nHeader will show over two rows. You can also bind the column header text from a spreadsheet range. Again, use \n in the spreadsheet cell to represent a line break. ADDING AN AXIS HEADER TO THE COLUMN It is possible for certain micro charts to add an axis to the column header. This is only available for charts that can be plotted horizontally. For example, the Bar and Bullet charts. For other micro charts that use horizontal value labels, selecting the Axis Header checkbox will place the labels in the header. Inovista Copyright 2009 All Rights Reserved Page 19

To show an axis header, click in the relevant cell in the Axis Header column of the table. Note that it will not be possible to select the header if it is not available. ADDING A LEGEND FOOTER TO THE COLUMN Component legend information can be shown in the footer of a column. Define the legend in the Legends tab of the component. To do this, click on the component in the chart table, and then select the Columns tab. The values set for the component will be copied by the grid and shown in the column footer. To make the footer visible or to change its size, go to the Behaviour/Grid Options tab. Inovista Copyright 2009 All Rights Reserved Page 20

To show a legend in the footer, click on the chart row and then select the relevant checkbox in the Legend Footer column. TIP Set up the axis properties in the Columns tab where properties for the individual chart are edited. Turn off the axis view in the axis editor when done. The edits will still be available for the column header. ADJUSTING THE COLUMN WIDTHS The column widths of the grid are set as a proportion of the total size. The data grid will sum all the values in the Width Ratio column and work out the width using the value for each column as a proportion of that total. Use the number selector in each cell of the Width Ratio column to set the relative width of the column. Inovista Copyright 2009 All Rights Reserved Page 21

THE GENERAL/GENERIC PROPERTIES SUB TAB Some properties can be set for all charts in the grid. These include the chart background and the chart padding. It can be useful to set a generic background to set a consistent look and feel for each row. To set a generic background, select the Show Chart Background checkbox. Then use the Gradient Color editor to create the required background. See the Gradient Color Editors section above for more information. The chart padding defines the gap between the component and the edge of the grid cell. At the bottom of the Generic Properties tab, it is possible to define a generic padding for the Top, Bottom, Left and Right sides of the component. Inovista Copyright 2009 All Rights Reserved Page 22

THE GENERAL/GENERIC BINDING SUB TAB Currently this tab is only used for setting tooltip values and ranges for those charts that use minimum and maximum range values. For tooltips, use this option only when you want to include variables from the spreadsheet in the tooltip. Use the Tooltip tab in the component if you only need standard variables from the micro charts (for example $value, $tovalue). Enter the tooltip text in the spreadsheet range you are to use. The tooltip text will be set from the range. The first cell in the range will be applied to the first column, the second cell to the second column and so on. Leave a cell in the range empty when you don t want the cell to set the tooltip text for a specific column. Inovista Copyright 2009 All Rights Reserved Page 24

When you want variable minimum or maximum range values for each row of the data grid or tree, you will have to define a spreadsheet range which contains the value for the specific row. The spreadsheet range should map to each chart that will be shown in the data grid. Where a chart range is not to be set, make sure there is an empty value in the spreadsheet range. Note that you will also need to set the Chart Minimum and Chart Maximum values in the Columns tab for each chart that will have range values set from the spreadsheet. In the spreadsheet example below, the range A1..D4 could be used to set the minimum values for a data grid consisting of 4 columns and 4 rows. The values in the second column (which may represent, for example a text column in the data grid), would be ignored. Data sources for maximum values would work in exactly the same way. Inovista Copyright 2009 All Rights Reserved Page 25

THE APPEARANCE TAB Within the Appearance tab, there are 3 sub tabs, these are: Chart Grid which specific aspects of the grid such as background color and row heights can be defined. Gridlines and Border where the vertical and horizontal gridlines can be defined and border options are set. Column Headers which manages aspects of the grid column headers. Inovista Copyright 2009 All Rights Reserved Page 26

THE CHART GRID SUB TAB Use the Row Height slider to set the height of each grid row. Valid values are between 0 and 200. The Grid Alpha slider defines the transparency of the background of the grid. Valid values are from 0 for complete transparency to 1 for no transparency. Note: To use a background color, set the Grid Alpha to 0. The Grid Items Alpha controls the transparency of the charts and other items within the grid itself. Valid values are between 0 and 200. To set the grid background color or gradient, use the Gradient Color editor. See the Gradient Color Editors section above for more information. Inovista Copyright 2009 All Rights Reserved Page 27

THE GRIDLINES AND BORDER SUB TAB To show a border for the grid, select one of the options from the Border Type drop down. Options are none, inset, outset and solid. Note that for border thickness to function, the solid option must be selected. Use the Border Thickness slider to set the width of the border. Valid options are 0 to 20 pixels. Use the standard or advanced color picker to set the color of the border. To show horizontal grid lines, select the checkbox at the end of the Horizontal Grid Lines property. Use the standard or advanced color picker to set the grid line color. To show vertical grid lines, select the checkbox at the end of the Vertical Grid Lines property. Use the standard or advanced color picker to set the grid line color. To set alternating row colors, use the standard or advanced color pickers in Alternating Row 1 and Alternating Row 2 to set the values. Inovista Copyright 2009 All Rights Reserved Page 28

THE COLUMN HEADERS SUB TAB To make the headers visible, select the Show Headers checkbox. To set the height of the column header, use the Height slider. Valid values are 0 to 140. Color pickers Color 1 and Color 2 set the gradient colors of the header. The Rollover Color color picker sets the value of the header color when the mouse is moved over it. To show the style background of the column header, select the Show Background checkbox. The transparency of the column header background is set by the Alpha slider. Valid values are 0 for completely transparent to 1 for no transparency at all. Use the Format Text section to set the font, font size, alignment and color of the header text. Inovista Copyright 2009 All Rights Reserved Page 29

THE BEHAVIOUR TAB Within the Behaviour tab, there are 3 sub tabs. These are: Grid Options where column behaviour and the legend bar are defined. Opening Effect where effects that occur when the grid is opened are defined. Click/Visibility where a click listener to the grid can be defined. Also the visibility status of the chart can be defined to depend on the value in a spreadsheet. THE GRID OPTIONS SUB TAB To remove any empty rows in the grid, select the Hide Blank Rows checkbox. To allow columns to be dragged to a different location in the grid, select the Draggable Columns checkbox. To allow columns to be resized, select the Resizable Columns checkbox. To allow columns to be sorted, select the Sortable Columns checkbox. The legend bar works in conjunction with the Legend Footer column. Select the Show Legend Bar checkbox to show the legend bar. The height of the legend bar can be adjusted with the Legend Bar Height slider. Valid values are 0 to 300. THE OPENING EFFECT SUB TAB Inovista Copyright 2009 All Rights Reserved Page 30

Select the effect (or None) that will be used when the chart is opened. See the Effect Property Editors section above for more information on how to use this editor. THE CLICK/VISIBILITY SUB TAB The Click/Visibility tab has two main functions. These are: 1. To listen for a click or a mouse rollover on the chart and thus change a value in the spreadsheet when a click is received. This can, in turn, be used to change the values or behaviours of the chart or other charts in the spreadsheet by making use of the functions in Excel. 2. To make the chart visible or invisible depending on the value of a cell in the spreadsheet. For example, a button type object can be deployed to show or hide a specific chart. If clicking on the button makes the spreadsheet cell value the same value that will hide the chart, then the chart will become invisible. Note that the values that are sent to the output click cell are in the format row number:column number. Also the values don t change when columns are sorted or dragged. For example, the top left cell will always send out the value 0:0 no matter how the grid has been restructured. Inovista Copyright 2009 All Rights Reserved Page 31

To make the chart listen for a mouse click, select the Click Listen checkbox. If a click listener is defined, the data in the format row number:column number will be copied to the Output Cell. Use the popup button at the end of the field to select the relevant spreadsheet cells. If a Rollover listener is defined, the data in the format row number:column number will be copied to the Output Cell. Use the popup button at the end of the field to select the relevant spreadsheet cells. To check for visibility, select the Test Visibility checkbox. When the value in the Status field matches the value in the Key field, then the chart will be visible. Use the popup button to select the status. Use the popup button to select the key in the spreadsheet or enter the value manually. Inovista Copyright 2009 All Rights Reserved Page 32

THE COLUMNS TAB The Columns tab provides an almost complete set of property editors for each component in the grid. Note that some component properties, for example the Opening Effect, are not available. Once selected, the component in the grid column can be edited in the same way as a standalone Micro Chart component. By default the Columns tab is disabled. For details on how the component property editors function, see the Micro Charts User Guide. To enable the Columns tab, select the component row in the table in the General/Chart Columns tab. When a component is highlighted in the table, the component tab will be enabled. Click this to open the component options. Another way to open the Column tab, is to select the Edit Column button in the Chart Columns tab. The property editors contained in the Columns tab will vary depending on the type of Micro Chart component that has been selected for the specific column. Inovista Copyright 2009 All Rights Reserved Page 33

TREE GRID PROPERTIES All the properties that have been described for the Data Grid are equally valid for the Tree Grid. All the Tree Grid properties are available in the General Tab. Note that the Tree Column tab will not be enabled until a column has been added to the Data Grid in the General/Chart Columns tab. TIP To work correctly, the Tree Grid must have row data in the Grid and Tree data in the tree column. The number of rows shown will be limited to the number of items in the tree. DEFINING A TREE IN THE SPREADSHEET For the Tree Grid component to create a tree, it needs data to be set in a certain format in the spreadsheet. In the example opposite, it can be seen that the root nodes are in column A, the second level nodes are in column B and the bottom level in column C. Note that the value must be repeated in subsequent rows to ensure the hierarchy functions correctly. Inovista Copyright 2009 All Rights Reserved Page 35

Using the Source Data property to select the spreadsheet data in the above example will create a tree structure as shown opposite. THE GENERAL/TREE COLUMN SUB TAB TREE SOURCE DATA In the Source Data property editor, use the popup button to select the table data defined in the spreadsheet. Inovista Copyright 2009 All Rights Reserved Page 36

OTHER PROPERTIES To set the header text for the Tree Column, use the Column Header text field. Data may be entered manually or selected from the spreadsheet. Use the Column Width text field to set the width of the Tree Column in pixels. Data may be entered manually or selected from the spreadsheet. Use the Node Rollover checkbox to set tree node effects on mouse over. Select the none option for no effects. Use the Node Icons checkbox to set the tree node icon. Use the Node Click Listen checkbox to add a click listener to the tree node items. Note that for this option to work, the click listener options must already be set up in the Behaviour tab. Use the Format Text options to define the font, font size, color and alignment of the header text. Inovista Copyright 2009 All Rights Reserved Page 37