Chart in pop-up

Provide information relating to trends and comparisons in a chart or graph using the Charting module. This module is essential for displaying data in an visual interesting, engaging way, making it easier to digest for visitors.

How to add a chart in pop-up

• Navigate to a Document.

• Select ‘Interactivity’ for the Version of the Document that you want to work on.

The Version will then open in Interactivity mode and the Interactivity palette can be found to the right of your page.

• Select the ‘Charting’ module type from the ‘Add Interactivity' palette.

• Select the 'Chart in pop-up page’ option.

• Click and drag out the area to add to your page - this is the clickable area that the visitor will select to view the chart in a pop-up box.

• Select the chart data that you want to use from the 'Data Resource' drop-down list or upload a new one using the 'Upload' button.

Settings

The Settings palette will activate when any module on a page is selected. You can then apply settings, such as Chart Type and series colour.

1. Chart

Title

The text entered into the 'Title' field for a chart module is displayed above the chart if 'Show Title' is set to 'Yes'. Make sure it reflects the data in the chart - for example, 'Annual Sales Area Chart'.

Tooltip

A tooltip is a short piece of text which appears when a cursor is positioned over a module. It can be used to provide a brief description or explanation of the module - for example 'Annual Sales Chart'.

Chart Type

One of the most important options for the charting module; choose which type of chart you want to display your data in.

• Line

• Area

• Bar

• Horizontal Bar

• Stacked Bar

• Pie

• Doughnut

2. Accessibility

Focus Outline Colour

If Accessibility has been enabled for your document, this option can be used to choose the colour of the Focus Outline Colour.

3. Popup Style

Border Colour

A border adds a keyline around the pop-up box that the chart is displayed in. Use this field to specify the colour of the border.

Border Size

Use the 'Border Size' field to specify the width of the border around the pop-up box that the chart is displayed in. Enter a numerical value to set the border width - the higher the value, the thicker the border.

Back Colour

The 'Back Colour' field allows you to set a background colour for the pop-up box that the chart is displayed in. Be mindful of which colour is used and ensure it compliments the other chart colours, such as text and series colours.

Margin Size

Margins create breathing space by adding a separation between the chart and the pop-up box that it is displayed in. Enter a numerical value to set the margin size - the higher the value, the larger the margin.

Max Width & Height

Adjust the width and height of the pop-up box that the chart is displayed in. Aim for no larger than 900 to ensure the pop-up box is viewable on different monitor sides.

Disable Close

This option can be selected if you want to prevent the visitor from closing the pop-up box.

4. Chart Data

Switch Rows with Columns

When selected, this option will switch the rows of data in a chart with the columns - so the information displayed in the rows, will change and be displayed as columns instead, and vice-versa.

Begin Series at Zero

Selected by default, this option will display the data from zero on a chart. It can be unselected if the data does not begin at 0, which can make the data clearer to read. This works well with some Area Charts.

First Column/Row as Labels

The below options are selected by default, and unticking them will change how the data in the chart displays.

• First Column as Labels

• First Row as Labels

5. Chart Colours

Text Colour

The 'Text Colour' field allows you to set the colour of text used in the chart - select from the colour picker, enter a HEX code, or choose from your brand colours.

Grid Colour/Show Grid

Gridlines are the horizontal and vertical axis on a chart. Use the 'Grid Colour' field to set the colour or choose if they are shown on the chart using the 'Show Grid' drop-down list.

6. Chart Series

Colours

Chart Series are the sets of data displayed on chart - for example, the fill colour of a Area Chart or columns on a Bar Chart.

Series Border & Width

Add a border around the series of a chart using the Series Border and Width fields. A border can be used to help draw attention to the data or make it easier to interpret.

Series Colours

Chart Series are the sets of data displayed on a chart - for example, segments on a Doughnut Chart or columns on a Bar Chart. More than one colour can be chosen, which can help make chart data easier to interpret and understand.

• Use the colour picker to select a colour.

• Select the plus icon to add another colour.

• Select the bin icon to delete a colour.

If only one colour is chosen, different shades will be automatically set in order to differentiate between the series.

7. Chart Titles and Labels

Show Title

The text entered into the 'Title' field will be displayed above the chart if 'Show Title' is set to 'Yes'. It should explain what the data in the chart is and should be clear and concise.

Show Tooltips

Tooltips are a small informational text box that displays when hovering over a chart value. It is used to provide further information about a data point and can help encourage engagement from your visitors. Use this option to turn them on or off for the chart.

Show Legend

The Legend is an information box containing colour-keyed labels that helps your visitors understand what they are looking at, by explaining what each bar/line represents. Use this option to turn it on or off for the chart.

Axis Labels and Title

Axis are the lines that are used to measure the data in a chart. There are two types of axes: the horizontal axis is usually called the x-axis and the vertical axis is usually called the y-axis. Use the Label and Title options to enter a name (Title) for the axis and choose if it will be displayed on the chart (Labels).

Caption

Add a caption to a chart to provide additional content about the chart data. Although not mandatory, it can be helpful for your visitors to understand more about the data.

Show Caption

If you have added a caption to your chart, this option allows you to choose when it displays in the pop-up box. Choose from 'Toggleable', which requires the visitor to select an information icon to display the caption, 'Always' or 'Never'.

Caption Position

If you have added a caption to your chart, this option allows you to choose where it will display in the pop-up box. Choose from 'Top' or 'Bottom'.

Caption Colour

If you have added a caption to your chart, this option allows you to choose the text colour.

8. Clickable Area Settings

Position X & Y

Adjust the position of where the chart sits on the page. 'X' sets the position of the left edge and 'Y' sets the top edge.

Width & Height

Adjust the width and height of the clickable area. The size is measured in pts.

Link to Panel

Link the module to a Panel in your document. Once linked, the module will move with the Panel if it is repositioned or resized.

Editing Chart Data

The data of an uploaded spreadsheet can be edited in the Data Resources Manager. This can be useful if a cell name needs updating or an figure needs altering.

• Select the Inventory Tools option from the left-hand menu.

• Select 'Data Resources Manager'.

• Select the 'Edit' option for the spreadsheet you need to make amendments to.

• Double-click in a cell to make an amendment.

• Select the 'Save' button to save any changes.

Copying a document that contains chart data

When you create a copy or duplicate of a document, all associated Data Resources (spreadsheets) used within it will be copied.