Page Comparison

{anchor:top}
{toc: class=contents}
h2. Overview 
{styleclass: Class=topLink}[top|#top]{styleclass}
The Charts step of the Report Builder has multi-chart functionality which provides the user with the option to create multiple charts based on the one report result set. These charts can then be displayed together through the use of the [Multi-Chart Canvas] set up through the [Output|Report Builder - Output Step] step.

h2. Multi-Chart Creation 
{styleclass: Class=topLink}[top|#top]{styleclass}


h2. Canvas Components
{styleclass: Class=topLink}[top|#top]{styleclass}
The Multi-Chart Canvas can contain various widgets as well as charts created in the Charts step of the builder.

h3. Charts
Any chart created during the Charts step of the report builder can be added to a Multi-Chart canvas. To add a chart to the canvas:
{expand:title=Click to view instructions...}
# Click on the Multi-Charts Objects panel on the left of the Output step to view a list of available charts and widgets.
# Select the chart you wish to add and drag it onto the canvas.
!02canvasAddChart.png|thumbnail,border=1!
{expand}

h3. Image
Images can be added to the canvas to add context to the data shown. To add an image to the canvas:
{expand:title=Click to view instructions...}
# Click on the Multi-Charts Objects panel on the left of the Output step to view a list of available charts and widgets.
# Select the Image widget and drag it onto the canvas.
!02canvasAddImage.png|thumbnail,border=1!
# Click the Select Image icon on the widget to choose an image file.
!02selectImage.png!
# Choose an image file, or upload a new image.
# You will now have the selected image displayed in the widget.
!02showImage.png!
{expand}

h3. Text
Text can be added to the canvas to add context, heading, or notes related to the data shown in charts. To add text to the canvas:
{expand:title=Click to view instructions...}
# Click on the Multi-Charts Objects panel on the left of the Output step to view a list of available charts and widgets.
# Select the Text widget and drag it onto the canvas.
# Click the Edit Text icon on the widget to choose an image file.
!02editText.png!
# Type the text you wish to use in the widget and apply formatting as required.
# Click the Edit Text icon again to save the changes.
!02saveText.png!
# You will now have the text displayed in the widget.
!02showText.png!
{expand}

h3. Rectangle
Rectangles can be added to the canvas for use around or behind other widgets. To add a rectangle to the canvas:
{expand:title=Click to view instructions...}
# Click on the Multi-Charts Objects panel on the left of the Output step to view a list of available charts and widgets.
# Select the Rectangle widget and drag it onto the canvas.
# Click the Border icon on the widget to define a colour for the outline of the rectangle.
!02setBorder.png!
# Click the Fill icon on the widget to define a colour for the middle of the rectangle.
!02setFill.png!
# Adjust the size and position of the rectangle as needed. 
bq. See [#Component Actions] for more information.
{expand}

h3. Icon
Icons can be used to add context and draw attention to data displayed in charts. To add an icon to the canvas:
{expand:title=Click to view instructions...}
# Click on the Multi-Charts Objects panel on the left of the Output step to view a list of available charts and widgets.
# Select the Icon widget and drag it onto the canvas.
# Click the Select Icon option on the widget to define the icon used.
!02selectIcon.png!
# Click the Select Icon Colour option to define the colour of the icon used.
!02selectIconColour.png!
# Adjust the size and position of the rectangle as needed. 
bq. See [#Component Actions] for more information.
# You will now have an icon displayed in the widget.
!02showIcon.png!
{expand}
{color:#CC0000}*Note:*{color} icons will not appear in exports or emailed versions of the multi-chart canvas. 


h2. Component Actions
{styleclass: Class=topLink}[top|#top]{styleclass}

h3. Resize
In order to resize a chart or widget added to the Multi-Chart Canvas, simply drag the bottom-right corner of the component to the desired size.
!03resize.png!

h3. Reposition
In order to reposition a chart or widget added to the Multi-Chart Canvas, simply click and drag the component to the required area of the canvas.

h3. Send to Back
The order of items displayed on the canvas can be changed by sending some items to the back and others to the front. Click the *Send to Back* icon on an item you wish to be displayed underneath another.
!03back.png!

h3. Bring to Front
The order of items displayed on the canvas can be changed by sending some items to the back and others to the front. Click the *Bring to Front* icon on an item you wish to be displayed on top of another.
!03front.png!

h3. Delete
Once added to the canvas, charts and widgets can be deleted if they are no longer required. Click on the *Delete* icon to remove an item from the canvas.
!03delete.png!


h2. Canvas Actions
{styleclass: Class=topLink}[top|#top]{styleclass}

h3. Shrink to Fit
Once all the required content has been added to, and positioned on the canvas you have the option to shrink the canvas size to fit the components. This removes any empty space around the edges of the canvas.
!04shrink.png!

h3. Activate
Once all the required content has been added to the canvas and any sizing and position adjustments have been made, the canvas should be activated.
!04activate.png!

h3. Edit
In order to edit an active canvas, the edit button will need to be clicked.
!04edit.png!

h3. Resize Guides
When the canvas is being resized by the user guides are displayed to show the standard dashboard and storyboard boundaries. This gives the user an idea of the sizing in relation to where the canvas will be finally displayed.
!04guide.png! 

!04guide2.png!


h2. Canvas Use 
{styleclass: Class=topLink}[top|#top]{styleclass}
A Multi-Chart canvas can be used for display on:
# Reports
# Dashboards
# Storyboards

!05dashboard.png|thumbnail,border=1!

To add a Multi-Chart Canvas to a dashboard or storyboard, use the same steps you would with any normal single chart report.

\\
\\
{horizontalrule}
{styleclass: Class=topLink}[top|#top]{styleclass}