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.
Supported file types - .xls and .xlsx.
Maximum cells per sheet - 2,500.
Maximum cells per file - 10,000.
How to add an on page chart
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 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.
On-page charts are embedded, which means it is placed directly onto the page for visitors to view without having to click and view 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.
💡 If a spreadsheet contains multiple worksheets, the required worksheet can be selected from the 'Worksheet' drop-down list. It is also possible to use a selection of data from the worksheet using the 'Data Range' section. Simply click and drag to highlight/select the required data.
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.
💡 Any changes made to an on page chart will automatically update as you apply them, so you will see a preview of how the chart looks on page.
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. This title will also be shown in the analytics of your document, helping you to identify the module.
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
Recommended reading - Chart Types
2. 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
Recommended reading - Chart Terminology
3. 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. Be mindful of the colour used and ensure it works well with the other colours chosen for the chart, such as text and series colours.
Bg Opacity
You can find the opacity field just to the right of the 'Bg Colour' drop-down list. Enter a numerical value Enter a numerical value between 0 - 100 to set the opacity - the higher the value, the more opaque the background will be.
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.
4. Chart Series Colours
Chart Series are the sets of data displayed on chart - for example, the lines of a Line 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.
5. 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).
6. 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, followed by 'Data Resources Manager'.
Select the 'Edit' option for the spreadsheet you need to make amendments to.
💡 A Data Resource can also be deleted from this section using the 'bin' icon.
Double-click in a cell to make an amendment.
Select the 'Save' button to save any changes.
If the Data Resource is in use, it will automatically update.
Copying Documents/Chart Data
When a copy of a Document is made into another account, the Data Resources (spreadsheets) used in the Document will be copied. Any Data Resources (spreadsheets) not used in the Document will not be included.