CODEWITHSUNDEEP
highcharts
SPB
SPB

Reputation: 65

Change highcharts axis value based on User Selection

I am a new bee to High charts and stuck up with the formatting of axis values based on user selection. Please see the following scenario;

Date & Time Selection by User

http://prntscr.com/8i0g39

In the image, the User select the Range of values with which the Graph will be plotted. The output as follows;

The Graph based on the User Selection

http://prntscr.com/8i0gg8

In this the data pulls out properly and all the information are correct. Except the following;

  1. In the X-axis (The Hours of the day) the time showed from 00:15 to 05:00 instead of 10:00 to 15:00 (User selection).

    • How can i change the axis value based on User Selection ?
    • How can i format the X-axis value in (HH:00) format and with point interval of 1 hour ?

Thank you.

Regards, Shenulal

Upvotes: 0

Views: 319

Answers (1)

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

If your time is fetched properly but labels showing wrongly , then it might be showing UTC dates. use utc false like below 

Highcharts.setOptions({
global: {
    useUTC: false
}
});

use formatter functionn in xAxis labels to get desired format of time.TickInterval to be set to one hour to show hourly data. 

     xAxis :{
  tickInterval: 3600 * 1000   //equals to one hour
   type:'dateTime',
   labels: {
                        formatter: function() {
                        return Highcharts.dateFormat(''%H:%M', this.value);

                    }
  }

Upvotes: 1

Related Questions