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