Charts

DashboardContent has sections and cards, which organize charts. Each chart has a title, colors (optional), a type, a dataset and options (optional).

Here is the JSON representation of a chart.

 {
    "title": "Device form factors", // Could be an empty string
    "type": "Bars", // Bars || Pie || Metric || Radar
    "dataset": { // See Datasets and datasources page
        "type": "OTQL",
        "query_id": "50171"
    },
    "options": {} // Options depending on the type of chart
}

`Bars` charts

Here are the different states of a Bars chart depending on its options and the dataset

The available options for the bars chart are

"options": {
    "legend": {
         enabled: boolean; # Show or hide the legend. Defaults to FALSE.
         position: ‘bottom’ | ‘right’; # Display legend on the bottom or on the right of the chart. Defaults to bottom
     },
     "colors": string[]; # Defaults to current theme colors
     "format": ‘count’ | ‘percentage’ | ‘index’; # Defaults to count. Pass percentage or index if dataset is compatible (comes from a percentage or index transformation) to automatically change labels, and tooltips and have more info.
     "drilldown": boolean; # Enables drill down if dataset is compatible. Defaults to FALSE
     "stacking": boolean; # Enables stacking if dataset is compatible. Prioritized over drilldown. Defaults to FALSE
     "type": ‘bar’ || ‘column’; # Set to ‘bar’ to display horizontal bars instead of columns. Defaults to ‘column’
     "plot_line_value": int; # Set to draw a line at the specified value
     "hide_x_axis": boolean; # TRUE to hide X axis. Defaults to FALSE
     "hide_y_axis": boolean; # TRUE to hide Y axis. Defaults to FALSE
     "tooltip": {format: string} # Highcharts tooltip pointFormat. Defaults to “{point.y}” if dataset don’t have a -count field, “{point.y}% ({point.count})” otherwise.
     "big_bars": boolean; # TRUE displays large bars close to each other, FALSE smaller bars with more space between them. Defaults to TRUE
}

See Hicharts.filter for the data_labels.filter format.

`Area` charts

Here are the different states of an Area chart depending on its options and the dataset

The available options for the area chart are

"options": {
    "legend": {
         enabled: boolean; # Show or hide the legend. Defaults to FALSE.
         position: ‘bottom’ | ‘right’; # Display legend on the bottom or on the right of the chart. Defaults to bottom
     },
     "colors": string[]; # Defaults to current theme colors
     "format": ‘count’ | ‘percentage’; # Defaults to count. Pass percentage if dataset is compatible (comes from a percentage transformation) to automatically change labels, and tooltips and have more info.
     "type": ‘area’ || ‘line’; # Set to ‘line’ to only display lines and no area. Defaults to ‘area’
     "plot_line_value": int; # Set to draw a line at the specified value
     "hide_x_axis": boolean; # TRUE to hide X axis. Defaults to FALSE
     "hide_y_axis": boolean; # TRUE to hide Y axis. Defaults to FALSE
     "double_y_axis": boolean; # TRUE for each serie to have its own scale (and shows 2 vertical axis). Defaults to FALSE
     "tooltip": {format: string} # Highcharts tooltip pointFormat. Defaults to “{point.y}” if dataset don’t have a -count field, “{point.y}% ({point.count})” otherwise.
}

See Hicharts.filter for the data_labels.filter format.

`Pie` charts

Here are the different states of the Pie charts depending on its options and the dataset

The available options for the pie charts are

"options": {
    "legend": {
        "enabled": boolean; # Show or hide the legend. Defaults to FALSE.
        "position": ‘bottom’ | ‘right’; # Display legend on the bottom or on the right of the chart. Defaults to bottom
    },
    "colors": string[]; # Defaults to current theme colors
    "drilldown": boolean; # Enables drill down if dataset is compatible. Defaults to FALSE
    "inner_radius": boolean; # True displays the chart as a Donut, false as a Pie. Defaults to TRUE
    "is_half": boolean; # True to only display half of a donut or half of a pie. Defaults to FALSE.
    "size": number | string | undefined; # The diameter of the pie relative to the plot area. Can be a percentage (75%) or a value.
    "data_labels": {
        "enabled": boolean; # If labels are displayed or not, default to TRUE
        "distance": int; # Distance between labels and the figure. Defaults to 10 if isHalf:true, else 0
        "format": string; # Labels text. See Labels and string format. Defaults to “{point.percentage:.2f}%” if legend.enable:false, “{point.name} {point.percentage:.2f}%” otherwise.
        "filter": Highcharts.filter; # To hide labels under certain values. Defaults to undefined. 
    };
    "tooltip": {"format": string} # Highcharts tooltip pointFormat. Defaults to “{point.percentage:.2f}%” if legend.enable:false, “{point.name} {point.percentage:.2f}%” otherwise.
}

See Hicharts.filter for the data_labels.filter format.

`Radar` charts

Here are the different states of the Radar charts depending on its options and the dataset.

The available options for the Radar charts are

"options": {
    "legend": {
        "enabled": boolean; # Show or hide the legend. Defaults to FALSE.
        "position": ‘bottom’ | ‘right’; # Display legend on the bottom or on the right of the chart. Defaults to bottom
    },
    "colors": string[]; # Defaults to current theme colors
    "format": ‘count’ | ‘percentage’; # Defaults to count. Pass percentage if dataset is compatible to automatically change labels, and tooltips.
    "data_labels": {
        "enabled": boolean; # If labels are displayed or not, default to TRUE
        "format": string; # Labels text. See Labels and string format.  Defaults to “{point.y}” if dataset don’t have a -count field, “{point.y}%” otherwise
        "filter": Highcharts.filter; # To hide labels under certain values. Defaults to undefined. 
    };
    "tooltip": {"format": string} # Highcharts tooltip pointFormat. Defaults to “{point.y}” if dataset don’t have a -count field, “{point.y}% ({point.count})” otherwise.
}

See Hicharts.filter for the data_labels.filter format.

`Metric` charts

Metric charts are either displayed as percentages or as count, depending on its options.

Here are the available options for the e charts

"options": {
    "format": ‘count’ | ‘percentage’ | 'float'; # Defaults to count. If count, simply displays the number, else displays the number with %
}