QPR ProcessAnalyzer Graphs: Difference between revisions

From QPR ProcessAnalyzer Wiki
Jump to navigation Jump to search
No edit summary
 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
Graphs are general term for column, bar, line, area, etc. charts.
== Graph Functionalities ==
Graph has the following functionalities:


== Graph Colors ==
== Graph Colors ==
Line 7: Line 5:


Series colors can be defined using the following settings:
Series colors can be defined using the following settings:
* By default, series colors come from a ''default color palette''.
* By default, series colors come from a '''default color palette'''.
* '''Custom color palette''' can be defined overriding the default color palette.
* '''Custom color palette''' can be defined overriding the default color palette.
* Series color can be set for individual measures/dimensions in the measure/dimension settings (overriding the palette color).
* Series color can be set for individual measures/dimensions in the measure/dimension settings (overriding the palette color).


If defined, the data point colors override series color for individual data points. Data point colors can be defined using following rules:
If defined, the data point colors override series color for individual data points. Data point colors can be defined using following rules:
* Data point colors can be defined for the entire graph using a measure/dimension that is mapped to a '''data point color''' (available in the measure/dimension settings).
* For entire graph, data point colors can be defined using a measure/dimension that is mapped to a '''data point color''' (available in the measure/dimension settings).
* Conditional formatting can be used to define rules for data point colors for individual series (in the measure/dimension settings). This will override the previous.
* For individual series, '''[[QPR_ProcessAnalyzer_Chart#Measure.2C_Dimension_and_Column_Settings|color mappings]]''' can be used to define a specific color to specific measure/dimension value. This will override the previous one.
* For individual series, '''[[#Conditional_Formatting|conditional formatting]]''' can be used to define rules for data point colors (in the measure/dimension settings). This will override the previous ones.
 
=== Usecase: Visualize KPI Targets with Colors===
When visualizing KPI's, it's essential show how the measure is performing comparing to targets. Targets can be visualized e.g. in charts (see more below) and in the KPI Card ([[QPR_ProcessAnalyzer_KPI_Card#Visualize_KPI_Targets_with_Colors|see how to]]).
 
Target values can be shown in the charts as follows:
# Select e.g. the ''Column Chart'' as a visualization. (Colors can be visualized also with other chart types.)
# Select your KPI as the first measure.
# For the measure, select ''Variable for other measures'' in the measure settings.
# Select ''Data point colors'' as the second measure, and define the limit values between green-yellow and red-yellow.
# For the Data point colors measure, select ''Mapping in Chart'' is ''Data point color'' in the measure settings.
# When using charts, usually a dimension is selected as well.
 
Now the KPI targets are visualized as colored columns.
 
== Conditional Formatting ==
 
Conditional formatting can be used to define colors for each data point (i.e. color for column, bar, circle etc. depending on chart type). The conditional formatting is defined in the settings of the measure/dimension that is mapped to the y-axis.
 
Conditional formatting example:
<pre>
{
"color": {
"rules": [
{
"value": 100,
"comparison": ">",
"color": "#68DD8F"
},
{
"color": "#EF5254"
}
]
}
}
</pre>
 
See more examples from the [[QPR_ProcessAnalyzer_Table#Conditional_Formatting|table conditional formatting]] how to define conditional formatting for graphs. Note that graphs only support the '''color''' property in the top level in the JSON.


==Customization Examples==
==Customization Examples==
Line 25: Line 61:
</pre>
</pre>


Example for forcing a minimum value for the first (left side) Y-axis.
Example for forcing a minimum and maximum value for the first (left side) Y-axis.
<pre>
<pre>
{
{
   "yAxis": [
   "yAxis": [
    {
      "min": 0,
      "max": 100
    }
  ]
}
</pre>
Example for forcing a minimum and maximum value for the second (right side) Y-axis.
<pre>
{
  "yAxis": [
    {},
     {
     {
       "min": 0,
       "min": 0,
Line 108: Line 157:
}
}
</pre>
</pre>
== Conditional Formatting ==
Conditional formatting can be used to define data point colors (i.e. color for column, bar, circle etc. depending on chart type). The conditional formatting is defined for each measure/dimension separately that is mapped to the y-axis.
Conditional formatting example:
<pre>
{
"color": {
"rules": [
{
"value": 100,
"comparison": ">",
"color": "#36d475"
},
{
"color": "#EF5254"
}
]
}
}
</pre>
See more examples from the [[QPR_ProcessAnalyzer_Table#Conditional_Formatting|table conditional formatting]] how to define conditional formatting for graphs. Note that graphs only support the '''color''' property.


[[Category: QPR ProcessAnalyzer]]
[[Category: QPR ProcessAnalyzer]]

Latest revision as of 07:41, 27 May 2021

Graphs are general term for column, bar, line, area, etc. charts.

Graph Colors

In graphs, colors can be defined for series (i.e. all data points of the series) and individual data points. Data point colors will have priority over the series colors.

Series colors can be defined using the following settings:

  • By default, series colors come from a default color palette.
  • Custom color palette can be defined overriding the default color palette.
  • Series color can be set for individual measures/dimensions in the measure/dimension settings (overriding the palette color).

If defined, the data point colors override series color for individual data points. Data point colors can be defined using following rules:

  • For entire graph, data point colors can be defined using a measure/dimension that is mapped to a data point color (available in the measure/dimension settings).
  • For individual series, color mappings can be used to define a specific color to specific measure/dimension value. This will override the previous one.
  • For individual series, conditional formatting can be used to define rules for data point colors (in the measure/dimension settings). This will override the previous ones.

Usecase: Visualize KPI Targets with Colors

When visualizing KPI's, it's essential show how the measure is performing comparing to targets. Targets can be visualized e.g. in charts (see more below) and in the KPI Card (see how to).

Target values can be shown in the charts as follows:

  1. Select e.g. the Column Chart as a visualization. (Colors can be visualized also with other chart types.)
  2. Select your KPI as the first measure.
  3. For the measure, select Variable for other measures in the measure settings.
  4. Select Data point colors as the second measure, and define the limit values between green-yellow and red-yellow.
  5. For the Data point colors measure, select Mapping in Chart is Data point color in the measure settings.
  6. When using charts, usually a dimension is selected as well.

Now the KPI targets are visualized as colored columns.

Conditional Formatting

Conditional formatting can be used to define colors for each data point (i.e. color for column, bar, circle etc. depending on chart type). The conditional formatting is defined in the settings of the measure/dimension that is mapped to the y-axis.

Conditional formatting example:

{
	"color": {
		"rules": [
			{
				"value": 100,
				"comparison": ">",
				"color": "#68DD8F"
			},
			{
				"color": "#EF5254"
			}
		]
	}
}

See more examples from the table conditional formatting how to define conditional formatting for graphs. Note that graphs only support the color property in the top level in the JSON.

Customization Examples

Example for hiding legend.

{
  "legend": {
    "enabled": false
  }
}

Example for forcing a minimum and maximum value for the first (left side) Y-axis.

{
  "yAxis": [
    {
      "min": 0,
      "max": 100
    }
  ]
}

Example for forcing a minimum and maximum value for the second (right side) Y-axis.

{
  "yAxis": [
    {},
    {
      "min": 0,
      "max": 100
    }
  ]
}

Example for forcing a minimum value for two Y-axes (left and right side).

{
  "yAxis": [
    {
      "min": 0,
      "max": 100
    },
        {
      "min": 0,
      "max": 10000
    }
  ]
}

Example for forcing a minimum and maximum value for the second (right side) Y-axis without forcing a maximum value on the first (left side) Y-axis and giving custom titles for the two Y-axes.

{
  "yAxis": [
    {
      "min": 0,
      "title": {
        "text": "Left Y-axis"
      }
    },
    {
      "min": 0,
      "max": 100,
      "title": {
        "text": "Right Y-axis"
      }
    }
  ]
}

Example for hiding the second Y-axis.

{
 "yAxis": [
   {
     "visible": true
   },
   {
     "visible": false
   }
 ]
}

Example for forcing a minimum value for the X-axis.

{
  "xAxis": {
    "min": 0,
    "max": 10
  }
}

Example for reversing order for the Y-axis.

{
  "yAxis": [
    {
      "reversed": true
    }
  ]
}