Difference between revisions of "Key Stats - Visualisations"

From All n One's bxp software Wixi

Jump to: navigation, search
 
(13 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
== Overview ==
 +
 +
bxp allows a custom visualisation report to be generated on screen through the Keystats module. The visual Keystat can generate a number of charts: line, bar and pie.
 +
 +
This visual Keystat generates any number of Keystat data in the chart once they are separated by a ,
  
−
== Overview ==
+
== Creating a Visual Key Stat ==
  
−
bxp has the ability to allow users to render on screen a custom visualisation through the Key Stats module. The visual Key Stat can render a number of charts: line, bar and pie.
+
To create a Visual Keystat make sure to have the Keystat Id that contains the data you wish to generate the desired chart from. To create a Keystat:-
−
The visual Key Stat can render any number of Key Stats data in the chart once they are separated by a ,
 
  
  
−
== Creating a visual Key Stat ==
+
''Main Menu > Key Stats > KeyStat - Add''
  
−
To Create a Visual Key Stat you first ned to have the key stat Id number that will contain the data that you wish to generate the desired chart from. To create a Key Stat navigate the following system path
 
  
−
Main Menu > Key Stats > KeyStat - Add
+
Input the following settings to successfully create a visual key stat:-
  
−
Once here you will need to input the following settings to successfully create a visual key stat.
+
1) Title - This should be an easily identifiable title for the keystat
  
−
1) Title - This should be an easily identifiable title for the key stat
 
 
2) Type - Set this to be ''Graphic''
 
2) Type - Set this to be ''Graphic''
−
3) Query - Field(s) - This field should contain the headings of the stats that you are including in the chart ( multiple items can be separated by a ,)
+
 
−
4) Query - SQL - This field should contain the key stat ids that you want to include in the chart ( multiple items can be separated by a ,)
+
3) Query - Field(s) - This field should contain the headings of the stats to be included in the chart ( multiple items can be separated by a ,)
−
5) Display Title - This is the title of the Graph when it renders to screen
+
 
−
6) Style Pattern - This allows you to select the type of graph you wish to render i.e Line, Bar or Pie
+
4) Query - SQL - This field should contain the key stat ids to be included in the chart ( multiple items can be separated by a ,)
 +
 
 +
5) Display Title - This is the title of the Graph when it generates on screen
 +
 
 +
6) Style Pattern - This allows you to select the type of graph you wish to generate, i.e. Line, Bar or Pie
 +
 
 +
 
  
 
[[File:VisKeyStatSetting.png]]
 
[[File:VisKeyStatSetting.png]]
  
  
−
== Output ==
+
== Visual Keystat Multi Data Series ==
 +
 
 +
bxp can generate two charts with multiple Data Series'. These charts are a line chart, and a bar chart with a line. Both of these charts are created the exact same way as the standard graphs outlined above, but require slight modification to the following settings:
 +
''Query - SQL'' and ''Query - Field(s)''
 +
 
 +
 
 +
=== Line Chart Multi Series ===
 +
 
 +
In order to generate a line chart with multiple data series' the following settings must be in the following format:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
 
 +
<!--Base Format-->
 +
Query - Field(s) - Name of data series( sep by , )[[DATASERIES]]Headings for intervals ( sep by , )
 +
 
 +
Query - SQL - Values for Series 1 (sep by ,)[[DATASET]]Values for Series 2 (sep by ,)..............[[DATASET]]Values for Series X(sep by ,)
 +
 
 +
 
 +
<!--Example-->
 +
Query - Field(s) - Series1, Series 2[[DATASERIES]]Date Range 1,Date Range 2, Date Range 3
 +
 
 +
Query - SQL - 10,110,200[[DATASET]]500,100,300
 +
</syntaxhighlight>
 +
 
 +
 
 +
=== Bar Chart with Line ===
 +
 
 +
To generate a bar chart with a line, the following settings must be in the following format:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
 
 +
<!--Base Format-->
 +
Query - Field(s) - Name for the Bar Chart Series, Name for the Line Chart Series[[DATASERIES]]Headings for intervals ( sep by , )
 +
 
 +
Query - SQL - Values for the Bar Chart (sep by ,)[[DATASET]]Values for the Line Chart (sep by ,)
 +
 
 +
 
 +
<!--Example-->
 +
Query - Field(s) - Bar Chart Series, Line Chart Series[[DATASERIES]]Date Range 1,Date Range 2, Date Range 3
 +
 
 +
Query - SQL - 10,110,200[[DATASET]]500,100,300
 +
</syntaxhighlight>
 +
 
 +
 
 +
== Key Stats Gauges ==
 +
 
 +
Key stats in bxp has the ability to generate a number of gauges. To create a key stats gauge, you need to have the following settings
 +
 
 +
 
 +
* Query - Field(s) - The sub title of the gauge
 +
* Query - SQL - This should contain the main settings for your gauge, these settings are outlined in the below sections
 +
* Display Title - The main title for the gauge
 +
* Style Pattern - Type of gauge to display
 +
 
 +
 
 +
The following gauges are available through Key Stats:
 +
 
 +
 
 +
* Angular gauge
 +
* Horizontal gauge
 +
* Level indicator gauge
 +
* Pyramid gauge
 +
* Thermometer gauge
 +
 
 +
 
 +
=== Angular gauge ===
 +
 
 +
To generate an Angular gauge, the following settings must be in the following format:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
 
 +
<!--Base Format-->
 +
Enable/Disable border
 +
[SEP]background color
 +
[SEP]height,width
 +
[SEP]min,max
 +
[SEP]range start,range end,color[Range]range start,range end,color[Range]range start,range end,color
 +
[SEP]key stat, key stat
 +
 
 +
 
 +
<!--Example-->
 +
False
 +
[SEP]FFFFFF
 +
[SEP]400,600
 +
[SEP]0,100
 +
[SEP]0,20,#e44a00[Range]20,60,#f8bd19[Range]60,100,#6baa01
 +
[SEP]1,2
 +
</syntaxhighlight>
 +
 
 +
 
 +
=== Horizontal gauge ===
 +
 
 +
To generate a Horizontal gauge, the following settings must be in the following format:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
 
 +
<!--Base Format-->
 +
Enable/Disable border
 +
[SEP]background color
 +
[SEP]height,width
 +
[SEP]min,max
 +
[SEP]range start,range end,color[Range]range start,range end,color[Range]range start,range end,color
 +
[SEP]key stat, key stat
 +
 
 +
 
 +
<!--Example-->
 +
False
 +
[SEP]FFFFFF
 +
[SEP]200,500
 +
[SEP]0,100
 +
[SEP]0,20,#e44a00[Range]20,60,#f8bd19[Range]60,100,#6baa01
 +
[SEP]1,2
 +
</syntaxhighlight>
  
−
'''Example outputs'''
+
 
 +
=== Level indicator gauge ===
 +
 
 +
To generate a Level indicator gauge, the following settings must be in the following format:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
 
 +
<!--Base Format-->
 +
Enable/Disable border
 +
[SEP]background color
 +
[SEP]height,width
 +
[SEP]min,max
 +
[SEP]range start,range end,color[Range]range start,range end,color[Range]range start,range end,color
 +
[SEP]Low Text,High Text
 +
[SEP]key stat
 +
 
 +
 
 +
<!--Example-->
 +
False
 +
[SEP]FFFFFF
 +
[SEP]200,600
 +
[SEP]0,500
 +
[SEP]0,200,#ff0000[Range]200,350,#00ff00[Range]350,400,#0000ff
 +
[SEP]Low Text,High Text
 +
[SEP]1
 +
</syntaxhighlight>
 +
 
 +
 
 +
=== Pyramid gauge ===
 +
 
 +
To generate a Pyramid gauge, the following settings must be in the following format:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
 
 +
<!--Base Format-->
 +
Enable/Disable border
 +
[SEP]background color
 +
[SEP]height,width
 +
[SEP]min,max
 +
[SEP]key stat, key stat
 +
[SEP]key stat label 1, key stat label 2
 +
[SEP]Tool tip
 +
 
 +
 
 +
<!--Example-->
 +
False
 +
[SEP]FFFFFF
 +
[SEP]400,600
 +
[SEP]0,100
 +
[SEP]1,2
 +
[SEP]label 1,label 2
 +
[SEP] - Tool tip testing
 +
</syntaxhighlight>
 +
 
 +
 
 +
=== Thermometer gauge ===
 +
 
 +
To generate a Thermometer gauge, the following settings must be in the following format:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
 
 +
<!--Base Format-->
 +
Enable/Disable border
 +
[SEP]background color
 +
[SEP]height,width
 +
[SEP]min,max
 +
[SEP]key stat
 +
[SEP]Thermometer height
 +
[SEP]Thermometer bulb radius
 +
[SEP]Fill colour
 +
 
 +
 
 +
<!--Example-->
 +
False
 +
[SEP]FFFFFF
 +
[SEP]700,600
 +
[SEP]-20,800
 +
[SEP]1
 +
[SEP]500
 +
[SEP]50
 +
[SEP]#008ee4
 +
</syntaxhighlight>
 +
 
 +
 
 +
== Examples Output ==
  
 
'''Bar Chart'''
 
'''Bar Chart'''
  
 
[[File:VisKeyStatChartBar.png]]
 
[[File:VisKeyStatChartBar.png]]
 +
  
 
'''Pie Chart'''
 
'''Pie Chart'''
  
 
[[File:VisKeyStatChartPie.png]]
 
[[File:VisKeyStatChartPie.png]]
 +
  
 
'''Line Chart'''
 
'''Line Chart'''
  
 
[[File:VisKeyStatChartLine.png]]
 
[[File:VisKeyStatChartLine.png]]
 +
 +
 +
'''Line Multi Series'''
 +
 +
[[File:KeyStats_Line_Multi.png]]
 +
 +
 +
'''Bar Chat With Line'''
 +
 +
[[File:KeyStats_Bar_Line.png]]
 +
 +
 +
'''Angular gauge'''
 +
 +
[[File:KS_Angular.png]]
 +
 +
 +
'''Horizontal gauge'''
 +
 +
[[File:KS_Horizontal.png]]
 +
 +
 +
'''Level indicator gauge'''
 +
 +
[[File:KS_Level.png]]
 +
 +
 +
'''Pyramid gauge'''
 +
 +
[[File:KS_Pryamid.png]]
 +
 +
 +
'''Thermometer gauge'''
 +
 +
[[File:KS_Thermom.png]]
 +
 +
[[Category:Module Specific:KeyStats]]

Latest revision as of 09:56, 16 February 2016

1 Overview

bxp allows a custom visualisation report to be generated on screen through the Keystats module. The visual Keystat can generate a number of charts: line, bar and pie.

This visual Keystat generates any number of Keystat data in the chart once they are separated by a ,

2 Creating a Visual Key Stat

To create a Visual Keystat make sure to have the Keystat Id that contains the data you wish to generate the desired chart from. To create a Keystat:-


Main Menu > Key Stats > KeyStat - Add


Input the following settings to successfully create a visual key stat:-

1) Title - This should be an easily identifiable title for the keystat

2) Type - Set this to be Graphic

3) Query - Field(s) - This field should contain the headings of the stats to be included in the chart ( multiple items can be separated by a ,)

4) Query - SQL - This field should contain the key stat ids to be included in the chart ( multiple items can be separated by a ,)

5) Display Title - This is the title of the Graph when it generates on screen

6) Style Pattern - This allows you to select the type of graph you wish to generate, i.e. Line, Bar or Pie


VisKeyStatSetting.png


3 Visual Keystat Multi Data Series

bxp can generate two charts with multiple Data Series'. These charts are a line chart, and a bar chart with a line. Both of these charts are created the exact same way as the standard graphs outlined above, but require slight modification to the following settings: Query - SQL and Query - Field(s)


3.1 Line Chart Multi Series

In order to generate a line chart with multiple data series' the following settings must be in the following format: 

<!--Base Format-->
Query - Field(s) - Name of data series( sep by , )[[DATASERIES]]Headings for intervals ( sep by , )

Query - SQL - Values for Series 1 (sep by ,)[[DATASET]]Values for Series 2 (sep by ,)..............[[DATASET]]Values for Series X(sep by ,)


<!--Example-->
Query - Field(s) - Series1, Series 2[[DATASERIES]]Date Range 1,Date Range 2, Date Range 3

Query - SQL - 10,110,200[[DATASET]]500,100,300


3.2 Bar Chart with Line

To generate a bar chart with a line, the following settings must be in the following format: 

<!--Base Format-->
Query - Field(s) - Name for the Bar Chart Series, Name for the Line Chart Series[[DATASERIES]]Headings for intervals ( sep by , )

Query - SQL - Values for the Bar Chart (sep by ,)[[DATASET]]Values for the Line Chart (sep by ,)


<!--Example-->
Query - Field(s) - Bar Chart Series, Line Chart Series[[DATASERIES]]Date Range 1,Date Range 2, Date Range 3

Query - SQL - 10,110,200[[DATASET]]500,100,300


4 Key Stats Gauges

Key stats in bxp has the ability to generate a number of gauges. To create a key stats gauge, you need to have the following settings


  • Query - Field(s) - The sub title of the gauge
  • Query - SQL - This should contain the main settings for your gauge, these settings are outlined in the below sections
  • Display Title - The main title for the gauge
  • Style Pattern - Type of gauge to display


The following gauges are available through Key Stats:


  • Angular gauge
  • Horizontal gauge
  • Level indicator gauge
  • Pyramid gauge
  • Thermometer gauge


4.1 Angular gauge

To generate an Angular gauge, the following settings must be in the following format: 

<!--Base Format-->
Enable/Disable border
[SEP]background color
[SEP]height,width
[SEP]min,max
[SEP]range start,range end,color[Range]range start,range end,color[Range]range start,range end,color
[SEP]key stat, key stat


<!--Example-->
False
[SEP]FFFFFF
[SEP]400,600
[SEP]0,100
[SEP]0,20,#e44a00[Range]20,60,#f8bd19[Range]60,100,#6baa01
[SEP]1,2


4.2 Horizontal gauge

To generate a Horizontal gauge, the following settings must be in the following format: 

<!--Base Format-->
Enable/Disable border
[SEP]background color
[SEP]height,width
[SEP]min,max
[SEP]range start,range end,color[Range]range start,range end,color[Range]range start,range end,color
[SEP]key stat, key stat


<!--Example-->
False
[SEP]FFFFFF
[SEP]200,500
[SEP]0,100
[SEP]0,20,#e44a00[Range]20,60,#f8bd19[Range]60,100,#6baa01
[SEP]1,2


4.3 Level indicator gauge

To generate a Level indicator gauge, the following settings must be in the following format: 

<!--Base Format-->
Enable/Disable border
[SEP]background color
[SEP]height,width
[SEP]min,max
[SEP]range start,range end,color[Range]range start,range end,color[Range]range start,range end,color
[SEP]Low Text,High Text
[SEP]key stat


<!--Example-->
False
[SEP]FFFFFF
[SEP]200,600
[SEP]0,500
[SEP]0,200,#ff0000[Range]200,350,#00ff00[Range]350,400,#0000ff
[SEP]Low Text,High Text
[SEP]1


4.4 Pyramid gauge

To generate a Pyramid gauge, the following settings must be in the following format: 

<!--Base Format-->
Enable/Disable border
[SEP]background color
[SEP]height,width
[SEP]min,max
[SEP]key stat, key stat
[SEP]key stat label 1, key stat label 2
[SEP]Tool tip


<!--Example-->
False
[SEP]FFFFFF
[SEP]400,600
[SEP]0,100
[SEP]1,2
[SEP]label 1,label 2
[SEP] - Tool tip testing


4.5 Thermometer gauge

To generate a Thermometer gauge, the following settings must be in the following format: 

<!--Base Format-->
Enable/Disable border
[SEP]background color
[SEP]height,width
[SEP]min,max
[SEP]key stat
[SEP]Thermometer height
[SEP]Thermometer bulb radius
[SEP]Fill colour


<!--Example-->
False
[SEP]FFFFFF
[SEP]700,600
[SEP]-20,800
[SEP]1
[SEP]500
[SEP]50
[SEP]#008ee4


5 Examples Output

Bar Chart

VisKeyStatChartBar.png


Pie Chart

VisKeyStatChartPie.png


Line Chart

VisKeyStatChartLine.png


Line Multi Series

KeyStats Line Multi.png


Bar Chat With Line

KeyStats Bar Line.png


Angular gauge

KS Angular.png


Horizontal gauge

KS Horizontal.png


Level indicator gauge

KS Level.png


Pyramid gauge

KS Pryamid.png


Thermometer gauge

KS Thermom.png

Retrieved from ‘https://www.bxpsoftware.com/wixi/index.php?title=Key_Stats_-_Visualisations&oldid=6561’