Adding a horizontal plot line (Y=Value) to a chart

Comments

32 comments

  • Avatar
    James Willcox

    I've been looking for a post like this!  Is there a way however draw a non straight line in JS?  I have a line I need to draw (An exponential curve), i have a csv with x and y values for this curve.  Is it possible to draw this on my graphs?

  • Avatar
    Arik

    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

  • Avatar
    James Willcox

    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.

  • Avatar
    Ramon

    Is there any way to plot that line not based on a fixed value but making some calculations with the series values? For example we want to add that horizontal line to a scatter chart with the average of the y-axis values...

    Thanks

  • Avatar
    Karoon

    Would be great to have an answer to the above...thanks!

  • Avatar
    Ido Darnell

    Hi Ramon/Karoon,

     

    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.

     

  • Avatar
    Karoon

    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
  • Avatar
    Karoon

    ...as is the case when I don't have that plotline




    widget_564ddfbda5d6a5c4dc00007e (1).png
  • Avatar
    stephen kearing

    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."

     

  • Avatar
    Andrew Block

    Does anyone know how I can updated the JavaScript so that it is dotted line instead of solid one ?

  • Avatar
    Malinda Jepsen

    In the plotLines definition, add

    dashStyle: "dash"

    That should do the trick.

  • Avatar
    Andrew Block

    Thanks Malinda!

  • Avatar
    Tripti Jaiswal

    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."

  • Avatar
    Nick Burleigh

    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!

  • Avatar
    Max Bradley

    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 array

    ev.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.

  • Avatar
    Maxim Havva

    Hi there,

    Can I use this to display a vertical line?

    (as I need to plot the line in .yAxis, - I`ve tried to change this parameter, but it doesn`t plot anything),

    Thanks,

  • Avatar
    Maxim Havva

    Thank you @Sam

  • Avatar
    John Will

    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?

     

  • Avatar
    Kenneth Leeman

    The script works fine except I have multiple operators in the same widget. The Y axis value uses the average of the days run for all operators even though the widget shows all 3 operators separately as a bar chart. How do I average for each operator individually?

  • Avatar
    Kenneth Leeman

    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;
    }

     

  • Avatar
    Megan Moss

    Is there a way to bring the line to the front of the render? 

  • Avatar
    Ian Tebbutt

    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 

  • Avatar
    Piotr Sikora

    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

  • Avatar
    Assaf Fraindlich

    Hi Piotr,

    Try this piece of code (might need some tweaking with the xAxis or yAxis):

     

     widget.on('beforeviewloaded',function(w,ev){

    ev.options.xAxis.plotBands= [{

                   color: '#72D15D',

                   from:1,

    to:1.01,

    label: {

    text: 'Plot Band'

    rotation: 90        

    }

                      }]

    })

  • Avatar
    Piotr Sikora

    Thank you Assaf!

    It works! 

  • Avatar
    Nishya Sathianesan

    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 :)

  • Avatar
    John Will

    Hi Nishya,
    Are you “not able to see the line” because it is higher than the auto-scale of y-axis? If so, you could manually set the y-axis range either in the widget or in the script.

  • Avatar
    Nishya Sathianesan

    Hi John,

    I tried the below script.

    widget.on('processresult',function(w,ev){

    ev.result.yAxis[0].plotLines= [{

    color: '#FF0000',

    width: 10,

    value: 1000

    }]

    })

     

    If my chart has y-axis value till 600, then I am not able to see the line.

  • Avatar
    Ravid Paldi

    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.