In this article
The Highcharts Designer page for a new chart element appears as shown in the figure below.
Figure 1 - The Highcharts designer page for a new chart
A chart must have a source from which it receives the data it is to display. A chart is therefore always based on an Aggregated Table (go to Table Designer Overview for more information).
To indicate to the system which table you wish to use as the source for your chart, drag the appropriate Aggregated Table element from the Report toolbox (note that you may have to expand the report page by clicking the + symbol in front of the report page name), and drop the table into the Drop Table Here area .as shown in the figure below.
Note: The aggregate table element used to provide the data for a chart does not have to be on the same page as the Chart. Any aggregated table in the Report toolbox can be used.
Figure 2 - Dragging a source table into the chart
When you drop a table into the designated area, the Chart Designer page refreshes and suggests a chart layout based on the default chart style specified in the Report Template (go to Templates Overview for more information). An example of the Chart Designer page is shown in the figure below.
Figure 3 - The Chart Designer page with a source table
On completion click Save.
You can now go to the other tabs in the Chart Designer and set up the chart as required.
Select Data
When using Highcharts, the Chart Designer page opens at the Select Data tab as shown belowhere.
Figure 4 - Example of the Highcharts Designer page
In the Select data tab:
Click on a row or column in the table to select / deselect that data. The shaded cells indicate which rows and columns are currently selected .
Figure 5 - Selecting the rows and columns of data to be displayed in the chart
Click on a distribution to set count, percent etc.
Chart
In the Chart tab you select the type of chart to be used .
Figure 6 - Selecting the chart type in the Chart tab
Select the general chart type in the column on the left, then select from the available options.
Customize
This tab holds a list of properties and settings that allow you to customize the layout and coloring for the chart. The tab holds two tabs:
- Chart - contains properties for setting the colors used for the series and the background, the labels, legend etc.
- Axis - contains the properties for setting up the chart axes, axes labels, gridlines etc.
Chart
This tab contains the properties and settings controlling the fonts and colors used for the chart area.
Figure 7 - The Chart tab
The properties and settings are as follows:
- Style - the style on which the chart's settings are based by default. This style is located in the Layout and Styles toolbox, under Styles > Chart. Once you have selected a particular style, you can then change the settings in this tab as required for this chart. If you then click Update, you can update the selected style such that it now uses your new settings as default. Or you can click New and save the current settings as a new style in the Layout and Styles toolbox. This style will then be available for use in other charts.
- Title - give the chart a title and set the font size, type and color of the text.
- Data labels - shows or hides the data labels.
- Settings - if the data labels are to be displayed, set the font size and color to be used.
- Legend - select where in the chart area you want the legend to be located, and set the font size, type and color of the text.
- Style - the layout of the legend. Select horizontal or vertical.
- Size - the dimensions of the chart in pixels .
- Palette - the color palette to be used for presenting the data in the chart.
- Font - the font family to be used for the texts in the chart.
- Plot background - the color to be used for the background area.
- Chart background -
- Data series - you can set the chart type and color separately for each series. Select the series from the dropdown and adjust the type and color as required.
Axis
This tab contains the properties and settings controlling the fonts and colors used for the chart axes.
Figure 8 - The Axis tab
The properties and settings are as follows:
- Axis - select which axis you wish to edit; horizontal or vertical.
- Enable - switch the axis labels on or off.
- Title - if you wish to show a title for the axis, type it into the field and make the location, size and color settings as required.
- Axis labels - sets the font weight and style, size and color for the labels for the selected axis.
- Gridlines - set the type of line, its thickness and color for the major and minor gridlines.