CODEWITHSUNDEEP
javascripthighcharts
estemendoza
estemendoza

Reputation: 3085

Highcharts linear chart with y-axis displaying seconds and minutes

I have a chart where I have on the x-axis a datetime and on the y-axis a value in seconds, like 10, 200 or 4500. This works fine.

What I need is something like the behavior of the datetime, that when you have a date range it shows the days between that range, but if the range is really small, it displays the hours between that range. My request is that I would like to do the same but having a number in seconds, and if the range is huge, like maybe between 100 and 2500, it should be converted to minutes, what I have now is the following:

yAxis: {
        title: {
            text: 'Minutes',
            margin: 10
        },
        min: 0,
        tickInterval: 60,
        labels:{
           formatter: function(){
                var minutes = ""
                if (this.value > 59){
                    minutes = Highcharts.numberFormat((this.value/60), 0)
                }
                return minutes;
            }
       }
    }

which is great for range between 60 and 500, but when the range is longer, it draws a lot of lines to display the minutes.

Any ideas? Can I change the tickInterval depending on some value?

I already have seen this reply Plotting seconds, minutes and hours on the yAxis with Highcharts, but I don't want to handle a datetime object on that axis.

Upvotes: 0

Views: 1051

Answers (1)

SteveP
SteveP

Reputation: 19093

I would really recommend using the inbuilt datetime axis type if you can. It takes away a lot of hassle with things like the issue you are asking about.

Failing that, you are on the right track in looking at the tickInterval. You could try not specifying a tickInterval at all, and let highcharts decide for you. It will usually find something sensible.

If that doesn't work well for you, then you will have to look at your data range and choose a sensible tickInterval yourself. One algorithm you could use is:

if (range < 500)
    tickInterval = 60
else
    tickInterval = 120

Obviously, if your range can go even bigger, you may need to have another case which switches the tickInterval to 300 or higher.

Upvotes: 0

Related Questions