Chart Panel

The Chart dashboard panel is used for displaying a graphical chart from any data source. Chart types include:

Data sources can come from database queries or AJAX calls.

Form Fields

Examples

Example Line Chart with a Database Query

Create a query to return real-time event data for a line chart.

  1. Go to the Queries UI: From the Configuration menu, select Databases, and then Queries.

    See Queries for more information.

  2. Click Add, then set the following:

    1. Name: Real-time Event Counts by Severity

    2. Schema: Event

    3. ShardID: 1

    4. User Owner: [Public to All Users In Group]

    5. Group Owner: [Public to All Groups]

    6. 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))
      
    7. Click Submit to save the query.

  3. Go to the Dashboards UI: From the Configuration menu, select Dashboards, and then Dashboards.

    See Dashboards for more information.

  4. Click Add, then set the following:

    • Name: Real-time Event Counts by Severity
  5. Add a Chart panel from the dashboard package to the dashboard.

  6. 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

  7. Click View.

  8. 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.

  1. Go to the Queries UI: From the Configuration menu, select Databases, and then Queries.

    See Queries for more information.

  2. Click Add, then set the following:

    1. Name: Real-time Event Counts for Pie

    2. Schema: Event

    3. ShardID: 1

    4. User Owner: [Public to All Users In Group]

    5. Group Owner: [Public to All Groups]

    6. 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))
      
    7. Click Submit to save the query.

  3. Go to the Dashboards UI: From the Configuration menu, select Dashboards, and then Dashboards.

    See Dashboards for more information.

  4. Click Add, then set the following:

    • Name: Real-time Event Counts for Pie
  5. Add a Chart panel from the dashboard package to the dashboard.

  6. 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

  7. Click View.

  8. 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.

  1. 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\"}"
        }
      ]
    }
    
  2. Go to the Dashboards UI: From the Configuration menu, select Dashboards, and then Dashboards.

    See Dashboards for more information.

  3. Click Add, then set the following:

    • Name: Real-time Event Counts by Severity
  4. Add a Chart panel from the dashboard package to the dashboard.

  5. 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

  6. Click View.

  7. Click Submit to save the dashboard.