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
}
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.
}
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.
}
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,defaulttoTRUE "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.
}
