Chart on page

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.

• Navigate to a document, and select 'Design' for the version you wish to work on.
• Select the ‘Interactivity’ tab at the top of the page.

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

• Select the 'Chart on page’ option.

• Click and drag out the area to add to your page - this is where the chart will be displayed on the page. The chart size will change depending on the size of the clickable area.

• 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

Click on a module already placed on your page to activate the Settings palette. This allows you to configure options like subtitles, Chart Type and series colour.

Chart

Name
The 'Name' field is set by default, but it's important to update it to something unique that reflects the interactivity - for example, 'Website Visits - June, as it will be shown in the Analytics of you document.

Heading
The heading is the text that will be displayed to the visitor when they view the chart in your document.

Description
The text entered here will display when a user hovers their cursor over the chart. It is also read out by a screen reader when a document is viewed in accessible mode.

Chart Type
Choose which type of chart you would like to display your data in.

• Line
• Area
• Bar
• Horizontal Bar
• Stacked Bar
• Pie
• Doughnut

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

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.

Bg Colour
The 'Bg Colour' field allows you to set a background colour for the chart.

Bg Opacity
Enter a numerical value between 0 - 100 to set the opacity of the background colour - the higher the value, the more opaque the background will be.

Grid Colour
Gridlines are the horizontal and vertical axis on a chart. Use the 'Grid Colour' field 

Show Grid
to set the colour or choose if they are shown on the chart using the 'Show Grid' drop-down list.

Chart Series Colours

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.

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.

Chart Headings and Labels

Show Heading
The text entered into the 'Heading' field will be displayed above the chart if 'Show Heading' 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 Headings
Axis are the lines that are used to measure the data in a chart.

There are two types of axes:

• horizontal axis is usually called the 'x-axis'.
• vertical axis is usually called the 'y-axis'.

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.