Create a Chart Component

A chart  displays data in many different graphical ways. This allows for the data to read in an easy-to-read manner.

Steps

  1. Navigate to the Data Visualiser.

  2. Create a New Visualisation.
    OR
    Select an Existing Visualisation.

  3. Click one of the following and drag it onto the visualisation canvas.

  4. chart_bar_graph_button.png Bar Chart/Graph - A Category (text) versus Value (number) chart with bars that extend horizontally across the screen. A bar chart can be configured as a normal bar, a line, a scatter or  a stacked bar chart.

  5. chart_column_button.png Column Chart - A Category (text) versus Value (number) chart with columns that extend vertically up the screen. A column chart can be configured as a normal column, a line, a scatter or  a stacked column chart.

  6. chart_line_button.png Line Chart/Graph - A Value (number) versus Value (number) chart with lines that intersect the dots between the data points. A line chart can be configured as a normal line or a scatter chart.

  7. chart_pie_chart_button.png Pie Chart/Graph - A Category (text) versus Value (number) chart in which each segment of the pie represents a percentage of the total value of all the segments.  Each segment is made from one row of data. A pie chart cannot be configured as any other type of chart type.

  8. chart_scatter_graph_button.png Scatter Chart - A  Value (number) versus Value (number) chart that each point represents one data point.  A scatter chart can be configured as a normal scatter or a line chart.

  9. chart_stacked_bar_graph_button.png Stacked Bar Chart/Graph - A Category (text) versus Value (number) chart where the points under one series are stacked on top of each other and extend horizontally. A stacked bar can be configured as a normal stacked bar, a bar, a line or a scatter chart.

  10. chart_stacked_column_button.png Stacked Column Chart/Graph - A Category (text) versus Value (number) chart where the points under one series are stacked on top of each other and extend vertically. A stacked column can be configured as a normal stacked column, a column, a line or as a scatter chart.

chart_component_drag.png

  1. Click edit_comp_button.png.
    OR
    Click in chart component to configure.
    Tip:  In this example, the bar chart is used.
    Create_New_chart_Component.png
    The Chart Configuration dialog opens.
    Tip: This acts a wizard to help all the necessary chart properties.
    chart_config_general_tab.png

  2. Use the General tab to customise the basic chart features. Configure the general chart properties as needed:

  3. Change the X position and Y position values to fit in the containing element for the chart. .
    Note:  The minimum value that can be entered in these fields are 0.

  4. Change the Dimensions values by selecting the use of Pixels or Percentages and typing the Width and Height.  

  1. Click Next_button.png.
    The Datasets tab opens.
    chart_config_dataset_tab.png

  2. Use Datasets tab to edit, create or remove datasets that the Chart can use and build other parts of the chart. Select the Configured Dataset for the chart to target.  

  3. Click Next_button.png.
    The Data tab opens.
    chart_config_data_tab.png

  4. Select the Data for the chart to target.

  5. Click add_new_button.png.
    The Data dialog expands and shows additional features for data configuration.
    Note: These additional features differ depending on the chart being created.
    chart_config_data_add_new_tab2.png

  6. Configure the data properties as needed.

  7. Select the Series Type from the drop-down list.

  8. Select the X Axis properties from the drop-down list.

  9. Select the Y Axis properties from the drop-down list.

  10. Select the Y Axis # series from the drop-down list.

  11. Select the Series Style from the drop-down list.

  12. Click Configure Label, Configure Tooltip, Configure Series Colours.

  1. Click Next_button.png.
    The Chart Configuration tab opens.
    chart_config_chart_config_tab.png

  2. Configure the chart configuration properties as needed:  

  3. Type a Chart Title for the chart.

  4. Type an X Axis Label for the chart.
    Note: Click Configure X Axis to change how the x axis appears.

  5. Type an Y Axis Label for the chart.
    Note: Click Configure Y Axis to change how the y axis appears.

  6. Enable the Invert Y Axis to change the direction of the y axis numerics.

  7. Type a Secondary Y Axis Label for the chart.
    Note: Click Configure Secondary Y Axis to change how the y axis appears.

  8. Enable the Invert Secondary Y Axis to change the direction of the y axis numerics.

  9. Enable to create 3D Chart.

  10. Enable to create Animate Chart.

  1. Click Next_button.png.
    The Styling tab opens.
    chart_config_styling_tab.png

  1. Use the Styling tab to specify how the header, footer and body appear. Configure the style properties for the header, body and footer of the chart.

  2. Click finish_button.png.
    The new chart component displays.