Is there a way how to dynamically create a plotline in highchart when the value is lower than previous one?

Question

I would like to ask if any of you already has experience with automatically generated plotline in case that "some condition".

I have highchart connected to SQL Server from where I am reading numbers (of resistance) to yAxis and datetime for xAxis. Everything is working properly but I would like to put a plotline every time when the value of resistance is going let's say at least 30% down.

So the main question is how to create a condition (in javascript/mssql/php...) which will be comparing current row value with the previous one and in case it will be lower will be automatically created a plotline.

I hope it make sense somehow. Thank you in advance for any ideas.

The code is working, I can see the values which I need in chart. No error messages or so, just trying to find a way for dynamic plotline.

Thank you in advance for any recommendation.

Here is a php function for connection with SQL Server:

function GetAvg2($connection, $column, $Zone, $Table, $dodatek="")
{
    $sql="SELECT concat(datediff(second,{d '1970-01-01'},dateadd(month,datediff(month, 0,date),0)),'000') as datumek, avg($column) as column_set FROM $Table WHERE FileName = '$Zone' and R_TOP1 is not NULL $dodatek group by dateadd(month,datediff(month, 0,date),0)";
    $data=array();
    $result = sqlsrv_query($connection, $sql);
    while( $row = sqlsrv_fetch_array( $result, SQLSRV_FETCH_ASSOC) ) 
    {
        $data[]="[".$row['datumek'].",".number_format($row['column_set'],2,'.','')."]";
    }
    return implode(",",$data);  
}

ppotaczek ppotaczek · Accepted Answer · 2019-08-06T12:17:19

In load chart event you can loop through points and add some plot lines dynamically. For example:

chart: {
    events: {
        load: function() {
            var points = this.series[0].points,
                value = 4,
                closed = true,
                plotLines = [];

            points.forEach(function(p) {
                if (closed ? p.y >= value : p.y <= value) {
                    closed = !closed;
                    plotLines.push({
                        value: p.x,
                        color: 'red',
                        width: 2
                    });
                }
            });

            this.xAxis[0].update({
                plotLines: plotLines
            });
        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/wngo4k1s/

API Reference:

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Axis#update

Is there a way how to dynamically create a plotline in highchart when the value is lower than previous one?

1 Answers