Chart Panel
The Chart dashboard panel is used for displaying a graphical chart from any data source. Chart types include:
-
Area
-
Area Spline
-
Bar
-
Column
-
Line
-
Pie
-
Spline
Data sources can come from database queries or AJAX calls.
Form Fields
-
Panel Name: Name of the panel to be displayed in the panel header.
-
Title: The title of the chart, centered at the top.
-
Subtitle: The subtitle of the chart, center at the top below the title.
-
Chart Type: The type of chart from the available list of line, spline, area, area spline, bar, column, pie.
-
X-Axis Type: The type of the x-axis can be category for most cases or timeseries when the category is in epoch time.
-
Stacking: Whether to show additional series of data stacked on top of the previous series.
-
Legend: Whether to show the legend at the bottom of the chart or not.
-
Extra Config: Extra HighCharts configuration that will be merged into the final configuration. Refer to the HighCharts documentation for additional details.
-
Source: The source of the data for the chart can be Database for a Unified Assurance database query, or AJAX for a local script that processes its own data and returns JSON.
-
Database Query: If Source is set to Database, the existing database query saved in the system.
-
AJAX URL: If Source is set to AJAX, the absolute URL path to the script that returns JSON data on the local server.
-
Category Field: The field in the JSON response that defines the category on the x-axis.
-
Value Field: The field in the JSON response that defines the value on the y-axis.
-
Series Field: The field in the JSON response that uniquely identifies the series for the category and value. Only one series can be defined for pie charts.
-
Meta Field: The field in the JSON response that allows additional data to be added to the series or point.
-
Hide Header: Whether the panel header should be hidden or not.
-
Width (%): Limit the panel to a specific percent width of the dashboard, ranging from 10% to 100%.
-
Height (px): Limit the panel to a specific height in pixels.
-
Refresh Rate (secs): The default chart refresh rate in seconds. This setting just refreshes the data. It does not reload the entire panel.
Examples
Example Line Chart with a Database Query
Create a query to return real-time event data for a line chart.
-
Go to the Queries UI: From the Configuration menu, select Databases, and then Queries.
See Queries for more information.
-
Click Add, then set the following:
-
Name: Real-time Event Counts by Severity
-
Schema: Event
-
ShardID: 1
-
User Owner: [Public to All Users In Group]
-
Group Owner: [Public to All Groups]
-
Query:
SELECT ELT(Severity + 1, 'Normal', 'Unknown', 'Info', 'Minor', 'Major', 'Critical') AS Severity, ELT(Severity + 1, '{"color":"\#66E066"}', '{"color":"\#D088F4"}', '{"color":"\#A1D3FE"}', '{"color":"\#FEFE66"}', '{"color":"\#FED07E"}', '{"color":"\#FE6666"}') AS Meta, DAYNAME(FROM_UNIXTIME(FirstReported)) AS Day, SUM(Count) AS Count FROM Events GROUP BY Severity, DAYNAME(FROM_UNIXTIME(FirstReported)) ORDER BY Severity, DAYOFWEEK(FROM_UNIXTIME(FirstReported)) -
Click Submit to save the query.
-
-
Go to the Dashboards UI: From the Configuration menu, select Dashboards, and then Dashboards.
See Dashboards for more information.
-
Click Add, then set the following:
- Name: Real-time Event Counts by Severity
-
Add a Chart panel from the dashboard package to the dashboard.
-
Click Configure Panel, then set the following:
-
Panel Name: Real-time Event Counts by Severity
-
Chart Type: Line
-
Database Query: Real-time Event Counts by Severity
-
Category Field: Day
-
Value Field: Count
-
Series Field: Severity
-
Meta Field: Meta
-
-
Click View.
-
Click Submit to save the dashboard.
Example Pie Chart with a Database Query
Create a query to return real-time event data for a pie chart.
-
Go to the Queries UI: From the Configuration menu, select Databases, and then Queries.
See Queries for more information.
-
Click Add, then set the following:
-
Name: Real-time Event Counts for Pie
-
Schema: Event
-
ShardID: 1
-
User Owner: [Public to All Users In Group]
-
Group Owner: [Public to All Groups]
-
Query:
SELECT DAYNAME(FROM_UNIXTIME(LastReported)) AS Day, SUM(Count) AS Count FROM Events GROUP BY DAYNAME(FROM_UNIXTIME(LastReported)) ORDER BY DAYOFWEEK(FROM_UNIXTIME(LastReported)) -
Click Submit to save the query.
-
-
Go to the Dashboards UI: From the Configuration menu, select Dashboards, and then Dashboards.
See Dashboards for more information.
-
Click Add, then set the following:
- Name: Real-time Event Counts for Pie
-
Add a Chart panel from the dashboard package to the dashboard.
-
Click Configure Panel, then set the following:
-
Panel Name: Real-time Event Counts for Pie
-
Chart Type: Pie
-
Database Query: Real-time Event Counts for Pie
-
Category Field: Day
-
Value Field: Count
-
-
Click View.
-
Click Submit to save the dashboard.
Example Bar Chart with an AJAX Query
Create an AJAX source that returns real-time event data for a category-axis column chart.
-
When you configure the chart panel with Source set to AJAX, Unified Assurance sends an HTTP GET request to the configured AJAX URL. On the internal presentation server, create a local script at that URL that returns event data in JSON format. The script must be accessible through the WebFQDN of the presentation server. For example, return the Day, Count, Severity, and optional Meta fields in the following format:
{ "success": true, "data": [ { "Day": "Monday", "Count": 12, "Severity": "Major", "Meta": "{\"color\":\"#FED07E\"}" }, { "Day": "Tuesday", "Count": 8, "Severity": "Major", "Meta": "{\"color\":\"#FED07E\"}" }, { "Day": "Wednesday", "Count": 5, "Severity": "Critical", "Meta": "{\"color\":\"#FE6666\"}" } ] } -
Go to the Dashboards UI: From the Configuration menu, select Dashboards, and then Dashboards.
See Dashboards for more information.
-
Click Add, then set the following:
- Name: Real-time Event Counts by Severity
-
Add a Chart panel from the dashboard package to the dashboard.
-
Click Configure Panel, then set the following:
-
Panel Name: Real-time Event Counts by Severity
-
Chart Type: Column
-
X-Axis Type: Category
-
Source: AJAX
-
AJAX URL: <The URL to the script you made above>
-
Category Field: Day
-
Value Field: Count
-
Series Field: Severity
-
Meta Field: Meta
-
-
Click View.
-
Click Submit to save the dashboard.