Skip to main content

Creating a chart component

Updated over 2 months ago

Properties

To create a graphic component, you must first enter the general information of the component:

  • a title

  • a description (optional)

  • the period of the data involved :

    • If you wish to apply a time offset between the time range selected for the entire dashboard and the period for the component, you can enter a time offset value here. For further details, please refer to the dedicated section.

    • Alternatively, if you want to apply a completely different time range to the component, ignoring the one selected for the dashboard, you can use the "Lock" button.

      The "Lock" button allows you to override the global dashboard time range and force this component to always use its own specific period.

      To do this, click the "Lock" button, and then select the time range you wish to use:

Curves

Once the general information is entered, you can select the tags to be used, by clicking on the Metric Search button.

The usual io-base metric search window opens. Several tabs allow a search either from the tree structure, or by meta-data, or by metric name. When you have found the right metrics, click on the button to add them. The metrics appear in the table on the right.

You can delete the metrics from the right table by using the delete icon.

Note : for a graphic component, it is possible to add several metrics.

To validate the selection, click on Save.

A preview of the chart is displayed on the left.

You can set several details on the charts:

  • the name of the curve (which will change in the caption)

    To do so, go to the Actions column, then click on the button enlightened below :

    The ‘Options’ section becomes visible, and contains the ‘Display name’ field. Here you can enter the name you want :

  • the type of aggregation used :

  • the color used :

  • the type of graph (bar, line or scatter)

You can also indicate whether you want the curves to appear in a staircase (straight lines from value to value) or interpolated.

Each curve can be duplicated.To do so, go to the Actions column, and click on the boxed button below :

Scales

From the Scales table, you can enter minimum and maximum values for the visibility of your graph, as well as the pitch to be applied for the graduations. Each time you make a change, the graph updates on the right side to show the changes.

Thresholds

Finally, it is possible to define one or several thresholds (horizontal or vertical, with legend, color, and if it should appear as a continuous or dotted line).

Finally, it is possible to define one or more thresholds (horizontal or vertical), with a label, color, and whether it should appear as a solid or dashed line.

To do so, click on the "New Threshold" button :

Configuration fields will appear to allow you to define the new threshold.

Start by selecting the axis for which you want to create a threshold.

Name your threshold :

Then, specify the position where you want the threshold label to appear on your chart :

- at the beginning :

- in the middle :

- at the end :

You can then configure the definition of your threshold by clicking on the button representing the threshold :

Specify :

- line or dotted line :

- position of the threshold : horizontal or vertical

- threshold value : the value where the threshold line will be drawn

For example, with the value '30':

Once all the settings are complete, you can click on Save to save and make your component appear in the dashboard.

Did this answer your question?