The scale on the KPI Gauge when using a percentage is always from 0 to 100 (or from 0 to any high number you use for your percentage). When using KPI's with very small changes in range (e.g. 0.1 variance) the scale is not useable.
It shows a lot of red, green or yellow but it is impossible to read the correct value from the Gauge. It also look depressing, a lot of red on the screen while the actual value may be a good (green) value.
I want to be able to change the scale so it can start at e.g. 80 and run to 100. This would give a better view for some KPI's with high (or low) percentages.
And while we are at it, remove the gray Target pointer, it is confusing sometimes!
Example
Graph that is not useable anymore because of the low variance I want to monitor:
Irritating Target Arrow:
My Configuration
Hyper-V vitual machine with 2 CPU's and 8GB RAM
Maximo 7.6.0.2
DB2 10.5
I also tested this on a 7.5.0.6 configuration with Oracle, works the same :)
Solution
No for the solution, no java code needs to be altered :) whoohooo
We do however change two files;
- kpigraph.jsp
- kpigraphportlet.jsp
These are located in: \SMP\maximo\applications\maximo\maximouiweb\webmodule\webclient\components
The first file is for the graph when opening the KPI in the KPI Manager. The second file is for the KPI graph on the starcenter.
Developer Mode
I want to change these files and while testing and tweaking it is nice to set the MXServer in Developer Mode. This way you can tweak the files, save them directly in the ear file and see your changes without restarting your MXserver of rebuilding en redeploying.
Below where to enable Developer Mode in Websphere:
This is the ear file in which I copy the modified file directly
Modifications
Copy the kpigraph.jsp and kpiportlet.jsp to the desktop.
Open the files from the desktop in an editor like notepad ++
kpigraph.jsp:
In the kpigraph.jsp, search for "if (chartData instanceof DialChartData)"
Should be around line 120.
In between the {} of the if statement I changed the code:
DialChartData dialData = (DialChartData)chartData;
%> dojo.require('ibm.tivoli.mbs.dijit.kpi.DialGauge');
//Different start points for various KPI's
<%
Double targ = dialData.target;
Double caut = dialData.arc1Threshold;
Double alert = dialData.arc2Threshold;
int start = dialData.start;
Double interval = dialData.tickInterval;
Double targetVal = dialData.target;
//hide the target
targetVal = 0.00;
if (targ > 84 && targ <= 100 && caut > 84 && caut <= 100 && alert > 84 && alert <= 100)
{
start = 80;
interval = 2.00;
}
if (targ > 92 && targ <= 100 && caut > 92 && caut <= 100 && alert > 92 && alert <= 100)
{
start = 90;
interval = 1.00;
}
if (targ > 97 && targ <= 100 && caut > 97 && caut <= 100 && alert > 97 && alert <= 100)
{
start = 97;
interval = 0.25;
}
%> var gauge = new ibm.tivoli.mbs.dijit.kpi.DialGauge({<%
%>id: "kpichart_<%= id %>", <%
%>width: 400, <%
%>height: 140, <%
%>radius: 75, <%
%>cx: 140, <%
%>cy: 130, <%
//%>startValue: <%=dialData.start%>, <%
%>startValue: <%=start%>, <%
%>endValue: <%=dialData.end%>, <%
%>hover: "<%=HTML.encode(dialData.label)%>", <%
%>innerColor: "<%=dialData.innerColor%>", <%
%>tickOffset: 90, <%
//%>tickInterval: <%=dialData.tickInterval%>, <%
%>tickInterval: <%=interval%>, <%
%>arc1Color: "<%=dialData.arc1Color%>", <%
%>arc1Label: "<%=dialData.arc1Label%>", <%
%>arc1Threshold: <%=dialData.arc1Threshold%>, <%
%>arc2Color: "<%=dialData.arc2Color%>", <%
%>arc2Label: "<%=dialData.arc2Label%>", <%
%>arc2Threshold: <%=dialData.arc2Threshold%>, <%
%>arc3Color: "<%=dialData.arc3Color%>", <%
%>arc3Label: "<%=dialData.arc3Label%>", <%
//%>target: <%=dialData.target%>, <%
%>target: <%=targetVal%>, <%
//%>targetColor: "<%=dialData.targetColor%>", <%
%>targetColor: "<%=dialData.innerColor%>", <%
%>targetLabel: "<%=dialData.targetLabel%>", <%
%>value: <%=dialData.kpi%>, <%
%>valueColor: "<%=dialData.kpiColor%>", <%
%>valueLabel: "<%=dialData.kpiLabel%>"<%
if(rtl)
{
%>,orientation: "cclockwise"<%
}
%>}, 'kpichart_<%= id %>_holder');
gauge.startup();
I created three different scales in this example. The scale changes depending on the values entered in the KPI in the "Target", "Caution At" and "Alert At" fields:
Depending on the values fileld in there I change the start of the scale and the interval and put those in a variable.
I use that variable in the graph buildup.
To do this I do not delete the lines or replace them but comment them out and put the new field below the original. Like so:
//%>startValue: <%=dialData.start%>, <%
%>startValue: <%=start%>, <%
//%>tickInterval: <%=dialData.tickInterval%>, <%
%>tickInterval: <%=interval%>, <%
I changed the color of the Target Arrow to the color of the innerColor so the Arrow is still there but it isn't visible. And I set the arrow on position 0.0:
//%>target: <%=dialData.target%>, <%
%>target: <%=targetVal%>, <%
//%>targetColor: "<%=dialData.targetColor%>", <%
%>targetColor: "<%=dialData.innerColor%>", <%
kpigraphportlet.jsp:
The same applies to the kpigraphportlet.jsp. The code is just in another place.
Again search for "if(chartData instanceof DialChartData)"
Replace the code in the { (begin) and } (end) with:
DialChartData dialData = (DialChartData)chartData;
%>dojo.require('ibm.tivoli.mbs.dijit.kpi.DialGauge');
document.<%=methodName%> = function()
{
var dJit = dijit.byId("kpiportletchart_<%= id %>");
if(dJit)
dJit.destroyRecursive(true);
//Different start points for various KPI's
<%
Double targ = dialData.target;
Double caut = dialData.arc1Threshold;
Double alert = dialData.arc2Threshold;
int start = dialData.start;
Double interval = dialData.tickInterval;
Double targetVal = dialData.target;
//hide the target
targetVal = 0.00;
if (targ > 84 && targ <= 100 && caut > 84 && caut <= 100 && alert > 84 && alert <= 100)
{
start = 80;
interval = 2.00;
}
if (targ > 92 && targ <= 100 && caut > 92 && caut <= 100 && alert > 92 && alert <= 100)
{
start = 90;
interval = 1.00;
}
if (targ > 97 && targ <= 100 && caut > 97 && caut <= 100 && alert > 97 && alert <= 100)
{
start = 97;
interval = 0.25;
}
%>
var gauge = new ibm.tivoli.mbs.dijit.kpi.DialGauge({<%
%>id: "kpiportletchart_<%= id %>", <%
%>width: <%=dialwidth%>, <%
%>height: <%=dialheight%>, <%
%>radius: <%=dialradius%>, <%
%>cx: <%=dialcx%>, <%
%>cy: <%=dialcy%>, <%
%>url: <%=dialData.url != null ? '"' + wcs.getMaximoRequestContextURL() + dialData.url + '"': null%>,<%
//%>startValue: <%=dialData.start%>, <%
%>startValue: <%=start%>, <%
%>endValue: <%=dialData.end%>, <%
%>hover: "<%=HTML.encode(dialData.label)%>", <%
%>innerColor: "<%=dialData.innerColor%>", <%
%>tickOffset: <%=dialmajortickoffset%>, <%
//%>tickInterval: <%=dialData.tickInterval%>, <%
%>tickInterval: <%=interval%>, <%
%>arc1Color: "<%=dialData.arc1Color%>", <%
%>arc1Label: "<%=dialData.arc1Label%>", <%
%>arc1Threshold: <%=dialData.arc1Threshold%>, <%
%>arc2Color: "<%=dialData.arc2Color%>", <%
%>arc2Label: "<%=dialData.arc2Label%>", <%
%>arc2Threshold: <%=dialData.arc2Threshold%>, <%
%>arc3Color: "<%=dialData.arc3Color%>", <%
%>arc3Label: "<%=dialData.arc3Label%>", <%
//%>target: <%=dialData.target%>, <%
%>target: <%=targetVal%>, <%
//%>targetColor: "<%=dialData.targetColor%>", <%
%>targetColor: "<%=dialData.innerColor%>", <%
%>targetLabel: "<%=dialData.targetLabel%>", <%
%>value: <%=dialData.kpi%>, <%
%>valueColor: "<%=dialData.kpiColor%>", <%
%>valueLabel: "<%=dialData.kpiLabel%>"<%
if(rtl)
{
%>,orientation: "cclockwise"<%
}
%>}, 'kpiportletchart_<%= id %>_holder');
gauge.startup();
};
dojo.addOnLoad(document.<%=methodName%>);
The same changes apply here as for the kpigraph.jsp
Save both files and copy them to the \SMP\maximo\applications\maximo\maximouiweb\webmodule\webclient\components
Overwrite the old files (make a backup before overwriting them...)
Also copy them into you ear file:
C:\Program Files (x86)\ibm\WebSphere\AppServer\profiles\ctgAppSrv01\installedApps\ctgCell01\MAXIMO.ear\maximouiweb.war\webclient\components
Now open the KPI and startcenter again:
You can modify the if statements or maybe even think of something even more dynamic. But I think this is a great starting point :)
GNZ
