CODEWITHSUNDEEP
javascriptphpmysqlhighcharts
Samadhan Gaikwad
Samadhan Gaikwad

Reputation: 196

Make dynamic Y-axis max value and tick interval of highchart using php

I have created Highchart form php table. Right now Y-axis max. and interval values are fixed. How can I make them dynamic using last four records. Say max. value is 20 from query then intervals will be 5. For max value I got query which returns max. value from 2 column and last 4 records. Mysql query: 

 SELECT GREATEST(MAX(step1), MAX(step2)) FROM workflow1 ORDER BY id DESC LIMIT 4

Highchart script:

<script>
Highcharts.chart('container', {

    data: {
    table: 'datatable'
},
credits: {
  enabled: false
},
chart: {
    type: 'column'
},
title: {
    text: 'Results',
    style: {
        color: '#FF00FF',
        fontWeight: 'bold'
    }
},
    legend: {
    layout: 'horizontal',
    align: 'right',
    verticalAlign: 'top',
    y: 50,
    padding: 3,
    itemMarginTop: 5,
    itemMarginBottom: 5,
    itemStyle: {
        lineHeight: '14px'
    }
},

yAxis: {

    min: 0,
    max: 100,
    tickInterval: 20,
    allowDecimals: false,
    title: {
        text: 'Time in Sec.'
    }
},
tooltip: {
    formatter: function () {
        return '<b>' + this.series.name + '</b><br/>' +
            this.point.y + ' ' + this.point.name.toLowerCase();
    }
}

});

Upvotes: 0

Views: 1472

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

If you don't define specific values for min, max, or tickInterval, Highcharts will automatically adjust the axis' maximum value and tick intervals based on the current data available.

The dynamic update Highcharts demo shows how this works (though you may have to wait a bit before it goes above 1 in the example): https://www.highcharts.com/demo/dynamic-update

Glad this was helpful for you!

Upvotes: 1

Related Questions