Adding a horizontal plot line (Y=Value) to a chart
Introduction
This post will show how to add an Horizontal Plot Line to a chart on a desired value using Javascript. Use this script when you have a chart with a “break by” (when a chart is not broken by, you can just add a value by using the "Fx" option and setting the desired value for a solid line).
Example
Steps
-
Edit the widget script
-
Copy and paste the below syntax, edit the script parameters (value, width and color if necessary) and click on the “SAVE”
-
Go back to the widget and refresh your browser
-
Click on the “Apply”
widget.on('processresult',function(w,ev){
ev.result.yAxis[0].plotLines= [{
color: '#FF0000',
width: 2,
// dashStyle: "dash",
value: 50000
}]
})
-
Hi James,
Thanks for this comment!
Unfortunately, drawing the curve using JS, is beyond the scope of our standard support.
The best way to address this will be adding the CSV as a table to your ElastiCube model and align (arithmetically) the X series with current X dimension you already have.
Then, you can create a unified dimension between these two, build, and plot the secondary measure (Y values from the CSV) along the first measure in the line chart.
If you have further questions or issues, please feel free to open a new support request.
Arik
-
Unfortunately the solution you have offered does not work as I need to plot a line and a scatter chart together (Which should be a simple procedure as it is for most products). Is there no other way to add a second dimension and more points to the method described in the post? I feel this is more an extension of the topic of the post. Further more I feel that this information would not only benefit myself but many of your other customers who come looking at either a) the article or b) are looking for this exact ability. It's not often in the real world where all cases are linear and if you need a non linear curve to show a limit, or a life time or a critical value then your clients are missing out.
-
Great, thanks for this. It works well...buuut I would like the x-axis to be able to adjust according to the other non-plot line lines. (e.g. so the axis restricts itself to the areas where the other two lines are flat
widget_564ddfbda5d6a5c4dc00007e.png -
...as is the case when I don't have that plotline
widget_564ddfbda5d6a5c4dc00007e (1).png -
Using the example graph provided in the Introduction above, can you please provide the complete widget script syntax for providing a line based on a calculation of the series value?
"For this you can use a measured value combined with the ALL() function, it should look like this:
([measure],all(dimension))
While the 'dimension' is the field you're plotting on the x-axis."
-
Kindly provide the complete widget script syntax for providing a line based on a calculation of the series value for Scatter Chart?
"For this you can use a measured value combined with the ALL() function, it should look like this:
([measure],all(dimension))
While the 'dimension' is the field you're plotting on the x-axis."
-
This has been asked twice in this thread already unsuccessfully, but it's been a while so I'll ask again:
Would someone be so kind as to provide complete example syntax for the following, using an actual example measure and an actual example dimension:
"For this you can use a measured value combined with the ALL() function, it should look like this:
([measure],all(dimension))
While the 'dimension' is the field you're plotting on the x-axis."
This is a great added functionality, but it really needs to be dynamic in order to be more helpful. Thanks!
-
All,
As a variation of the script used in the original post, you can plot a line based on the Average of the Y-Axis value(s) by using the following script:
widget.on('processresult',function(w,ev){
var forIndx = 0; //set index of Formula you want to plot the average. 1st formula is index 0, 2nd is index 1, etc...
var allVals = ev.result.series[forIndx].data; //pull all Y-axis values into array
var setLen = (allVals.length); //get length of y-axis value array
var calcY = 0;
for(i=0; i < setLen; i++){
calcY = calcY + allVals[i].y; //sum all values in array
}
var plotY = calcY / setLen; //calc average by dividing sum of values by length of arrayev.result.yAxis[0].plotLines= [{ //plot y-axis avg line on widget
color: '#FF0000',
width: 2,
value: plotY
}]
});Please let us know if you have any issues with this script. This, specifically plots the Average but the calculation could be edited to plot other values depending on the need.
-
@Maxim - you can take a look here: https://support.sisense.com/hc/en-us/community/posts/221227648-Adding-Plot-Lines-to-Chart.
-
I have a graph where the y-axis is in percentage (ranges from 0% to 100%), if I use the script of:
widget.on('processresult',function(w,ev){
ev.result.yAxis[0].plotLines= [{
color: '#FF0000',
width: 10,
value: 1
}]
})
Then I do get a red line right at the 100% row, and it also works for values > 1; but, I get no line if I try to use a value between 0 and 1 (like 0.5). Any ideas on how to fix this?
Actually what I'd *really* like to be able to do is set the y-range to draw a horizontal bar from the low to high of that range (for example draw a colored line over a defined range of y-axis values that auto-scales as the y-axis scales -- like shown below where range from 94% to 96% is highlighted.
Is this possible?
-
Following seems to work to get 3 lines but they are not plotted individually per each operator. How can the line be sectioned? Also, how can the value of the average (red line) be displayed on a hover?
widget.on('processresult',function(w,ev){
var allVals = ev.result.series[0].data;
console.log('allVals', allVals);
var operators = getOperatorNames(allVals);
var lines = [];
operators.forEach(function(operator){
lines.push({
color: '#FF0000',
name: operator,
width: 2,
value: getAverageRuntimeForOperator(allVals, operator)
});
});
console.log(lines)
ev.result.yAxis[0].plotLines= lines;});
function getOperatorNames(vals){
return vals.reduce(function(r,e){
if(e.selectionData){
var name = (e.selectionData || ['']) [0];
if(!~r.indexOf(name)) r.push(name);
}
return r;
}, []);
}function getAverageRuntimeForOperator(vals, operatorName){
var filteredVals = vals.filter(function(elem){
return !!elem.selectionData;
}).filter(function(elem){
return elem.selectionData[0] === operatorName;
});
return filteredVals.reduce(function(sum, val, i, c){
console.log(c.length)
return val.y + sum;
}, 0) / filteredVals.length;
}
-
I also need this functionality, with both bounday lines and bands. I looked at the page source and it appears that Sisense is using the HighCharts controls for it's charting. If that's the case can we make use of the HighCharts examples such as this https://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
-
Hi!
is it possible to create above chart?
I need to add plot line label.Ive added code like this:
({
color: '#000000',
width: 2,label: {
text: 'LABEL',
style: {
color: '#000000',
fontWeight: 'bold'
},
verticalAlign: 'bottom',
align: 'left',
rotation: 0
},
value: 2
}
After that line appears correctly but without label.Is it possible to add labels as well?
Thanks in advance for help
-
Dear All,
I am here trying to use the scripts given here to have a target or threshold revenue line. As always the target revenue will be higher than booked revenue I am not able to see the line in my chart. Can anyone help me here to write a script that I can use for having a target value line which is higher than the existing value in the chart! Thank you :)
-
Hi Nishya,
You can also achieve the same result without the JS code if you will add a field in your Cube named "Goal" at the same table you use for the chart and then allocate a fixed value for it.
Once you do that, you can simply plot the horizontal line the same way you plot other charts and then the autoscaling will work out of the box.
Cheers,
Ravid
Please sign in to leave a comment.
Comments
32 comments