When you look at the script, you'll see some values that come from the dashboard:
MedianPerc: This is the median percent (our X-axis is in percentages)
SD1: This is a calculation to get to +1 Standard Deviation
SDMinus1: This is the calculatoin to get to -1 Standard Deviation
and so on for the number of standard deviations we wanted to show.
Here's how the widget looks.
Here's the script:
widget.on('processresult',function(w,ev){
var s = ev.result.series;
var MedianPerc = "MedianPerc";
var MedianPercVal;
var SD1 = "SD1";
var SD1Val;
var SDMinus1 = "SDMinus1"
var SDMinus1Val;
var SD2 = "SD2";
var SD2Val;
var SDMinus2 = "SDMinus2"
var SDMinus2Val;
var SD3 = "SD3";
var SD3Val;
var SDMinus3 = "SDMinus3"
var SDMinus1Val;
$.each(s, function(i, v) {
switch(v.name) {
case MedianPerc:
MedianPercVal = (v.data[0].y) * 1000;
//hide original line
// is there a way i can hide it on hover over too?
v.lineWidth = 0;
break;
case SD1:
SD1Val = v.data[0].y * 1000;
// //hide original line
// // is there a way i can hide it on hover over too?
v.lineWidth = 0;
break;
case SDMinus1:
SDMinus1Val = v.data[0].y * 1000;
// //hide original line
// // is there a way i can hide it on hover over too?
v.lineWidth = 0;
break;
case SD2:
SD2Val = v.data[0].y * 1000;
// //hide original line
// // is there a way i can hide it on hover over too?
v.lineWidth = 0;
break;
case SDMinus2:
SDMinus2Val = v.data[0].y * 1000;
// //hide original line
// // is there a way i can hide it on hover over too?
v.lineWidth = 0;
break;
case SD3:
SD3Val = v.data[0].y * 1000;
// //hide original line
// // is there a way i can hide it on hover over too?
v.lineWidth = 0;
break;
case SDMinus3:
SDMinus3Val = v.data[0].y * 1000;
// //hide original line
// // is there a way i can hide it on hover over too?
v.lineWidth = 0;
break;
}
});
ev.result.xAxis.plotLines= [{
color: 'Red',
width: 2,
dashStyle: "dash",
value: MedianPercVal,
label: {text: ((MedianPercVal)/10).toFixed(2) + "% Orion Median",
rotation:0,
textAlign: "center",
style:{fontFamily: "abelregular"},
y:30,
x:0
}
},
{
color: '#BFBFBF',
width: 2,
dashStyle: "dash",
value: SD1Val,
label: {text: "1 SD",// + ((SD1Val)/10).toFixed(2) +'%',
rotation:0,
textAlign: "center",
style:{fontFamily: "abelregular"},
y:15,
x:-3
}
},
{
color: '#BFBFBF',
width: 2,
dashStyle: "dash",
value: SDMinus1Val,
label: {text: "-1 SD",// + ((SDMinus1Val)/10).toFixed(2) +'%',
rotation:0,
textAlign: "center",
style:{fontFamily: "abelregular"},
y:15,
x:-3
}
},
{
color: '#BFBFBF',
width: 2,
dashStyle: "dash",
value: SD2Val,
label: {text: "2 SD",// + ((SD2Val)/10).toFixed(2) +'%',
rotation:0,
textAlign: "center",
style:{fontFamily: "abelregular"},
y:15,
x:-3
}
},
{
color: '#BFBFBF',
width: 2,
dashStyle: "dash",
value: SDMinus2Val,
label: {text: "-2 SD",// + ((SDMinus2Val)/10).toFixed(2) +'%',
rotation:0,
textAlign: "center",
style:{fontFamily: "abelregular"},
y:15,
x:-3
}
},
{
color: '#BFBFBF',
width: 2,
dashStyle: "dash",
value: SD3Val,
label: {text: "3 SD",// + ((SD3Val)/10).toFixed(2) +'%',
rotation:0,
textAlign: "center",
style:{fontFamily: "abelregular"},
y:15,
x:-3
}
},
{
color: '#BFBFBF',
width: 2,
dashStyle: "dash",
value: SDMinus3Val,
label: {text: "-3 SD",// + ((SDMinus3Val)/10).toFixed(2) +'%',
rotation:0,
textAlign: "center",
style:{fontFamily: "abelregular"},
y:15,
x:-3
}
}
]
//ev.result.plotOptions.series.enableMouseTracking=false;
})
//Remove tooltips for all points except for those which belong to "# Households" series
widget.on("beforedatapointtooltip", function(w, args){
if(args.context.pointScope.series.name !== "# Households"){
args.cancel = true;
delete args.context.pointScope.series.options.marker.states.hover;
};
});
widget.on("beforeviewloaded", function(a, ev){
var max = 5;
var min = 0;
var interval = 0.1;
var tickCount = (max-min) / interval;
var tickPositions = _.range(min, max+interval, interval);
// we only need one decimal place. without this code, precision was a problem
for(var i = 0; i< tickPositions.length; i++){
tickPositions[i] = tickPositions[i].toFixed(1);
}
var categories = ev.options.xAxis.categories.map(function(c){return parseFloat(c);});
var series = ev.options.series;
// for(var j = 0; j < series.length; j++){
var j = 0;
var seriesData = series[j].data;
var newSeriesData = [];
for(var i = 0; i< tickPositions.length; i++){
var tickValue = parseFloat(tickPositions[i]);
var existingCategoryIndex = categories.indexOf(tickValue);
if(existingCategoryIndex < 0){
newSeriesData.push(0);
}else{
newSeriesData.push(seriesData[existingCategoryIndex]);
if (newSeriesData[i].y == undefined || newSeriesData[i] == null) {
newSeriesData[i].y = 0;
}
}
}
series[j].data = newSeriesData;
// }
ev.options.xAxis.categories = tickPositions;
// now format category labels with a %
categoryLabels = tickPositions;
ev.options.xAxis.categories = tickPositions;
for (var i = 0; i < categoryLabels.length; i++) {
categoryLabels[i] += "%";
}
});