Chart and Gauge Properties

From QPR ProcessAnalyzer Wiki
Jump to: navigation, search

Chart and gauge presentation objects can be used visualize data in a graphically, e.g. column, bar, line or pie charts.

JSON properties

Variety of chart and gauge settings can be changed using a JSON properties. In QPR UI, charts and gauges are drawn using Highcharts component:

The effective JSON means a JSON definition that is used by the chart or gauge when it's drawn. The effective JSON is formed from the following parts which are merged:

  1. Default settings defined by QPR UI.
  2. User settings defined using the JSON settings textbox. (priority in if same settings are defined in both)

User settings are defined in chart or gauge presentation tab in the JSON settings textbox. User settings always override the default settings if there are same JSON setting name defined in both. You can click the Show effective JSON checkbox to show the effective JSON. You can use the effective JSON as a starting point for your customized JSON settings. User settings also override any other user defined settings in chart or gauge properties.

Note that if you enable the buttonOptions JSON setting, export files may be generated in the Highcharts web service (3rd party), if generating them is not possible in the browser side. This depends on which browser you are using. Generated files in the Highcharts web service means that the data in the chart needs to be sent to a server managed by Highsoft AS.

Examples of JSON properties

Subtitle: In addition to the main title, charts may also contain a subtitle.

{
  "subtitle": {
    "text": "Subtitle"
  }
}

Series color: The series colors are defined as nodes with hex "color" values inside the "series" array. For each series, define a {} block, and place the color definition to the series you want to define the color for. For example, to define the color for the 3rd series:

{
  "series": [
    {},
    {},
    {
      "color": "#000000"
    }
  ]
}

Stacked charts: Stacking is defined in the "plotOptions" object. In the following example, the first and second series of a column chart are stacked together:

{
  "plotOptions": {
    "column": {
      "stacking": "normal"
    }
  }
}

Show in legend: The series names' visibility is defined as "showInLegend" nodes inside the "series" array. In the following example, the first and third series names are shown in the legend:

{
"series": [
  {
   "showInLegend": true
  },
  {
   "showInLegend": false
  },
  {
   "showInLegend": true
  }
 ]
}

Y axis title

{
 "yAxis": {
   "title": {
     "text": "Project progress %"
  }}
}

Disable tooltip

{
  "tooltip": {
    "enabled": false
  }
}

Set number of decimals (rounding) in the tooltip: No decimals in this example.

{
  "tooltip": {
    "valueDecimals": 0
  }
}

Data labels: The enabled setting in the following example determines whether data labels are enabled or disabled (by default data labels are disabled for charts and enabled for gauges). The format setting determines how numbers in the data labels are formatted (using two decimals in the following example). In addition, it's possible to add prefix or suffix for a measure unit.

{
  "series": [{
    "dataLabels": {
      "enabled": true,
      "format": "{y:,.2f} %"
    }    
  }]
}

Chart background color: Background color can be defined as a hexadecimal value, e.g. "#FF0000" (red). Also "transparent" can be used to show panel background color.

{
  "chart": {
    "backgroundColor": "transparent"
  }
}

Exporting: Enabling exporting and defining CSV, XLS, PNG, JPEG, and SVG as the export file types. Note also the "fallbackToExportServer" setting which, being "false", prevents data from being sent to a third party server when doing the export. Note that PDF export is not supported for Microsoft Internet Explorer.

{
  "exporting": {
    "enabled": true,
    "fallbackToExportServer": false,
    "buttons": {
      "contextButton": {
        "menuItems": [
          "downloadCSV",
          "downloadXLS",
          "downloadPDF",
          "downloadPNG",
          "downloadJPEG",
          "downloadSVG",
          "printChart"
        ]
      }
    }
  },
  "navigation": {
    "buttonOptions": {
      "enabled": true
    }
  }
}

Add a Gauge

  1. Click the Gauge button on the side toolbar.
    AddGauge.png
  2. Click the Properties button on the gauge presentation object to open the gauge properties.
    OpenGaugeProperties.png
  3. First, give a Name and optionally a Description for the gauge. Then click the Mapping tab.
    GaugeProperties.png
  4. Graphical presentation objects take their data from existing tables. Select a data grid from the Select Data Source list.
    GaugeSelectDataSource.png
  5. Value settings define the ranges and range limits for the graphical presentation objects. To use existing value settings, select the desired value settings from the list on the bottom left corner. To define new value settings, click New and give a name for the value settings. Next, add the desired amount of Range limits and then add Range(s) and define their properties.
    GaugeValueSettings.png
  6. Next, use the Column and Row Function buttons to define which row or column contains the Values, which row or column contains the Labels for the periods, which one(s) are used for the Series Labels, which one(s) are used for Range Limit(s), and which row or column to take All the values from.
    GaugeMapColumns.png
    These same kind of mapping steps are used in other graphical presentation objects too, but for example column charts can show multiple values, whereas a gauge is limited to showing only one value.
  7. The Preview shown on the Mapping tab acts as a reference when defining the ranges. To see a bigger preview click the Presentation tab.
    GaugeMapped.png
  8. On the Presentation tab, expand the Scale section, and define the scale for the gauge by entering the Minimum and Maximum values to use on the gauge.
    GaugePresentation.png
    For other graphical presentation objects, expand the Presentation settings Values section to define the Ordering, Color, and Type of the series, and the Axis section to define the scale.
  9. Collapse the Scale section and expand the JSON settings section.
  10. After you are done, click Close to apply the changes and to close the presentation object properties. Then click Save to save the changes to the panel.