CODEWITHSUNDEEP
javascripthighcharts
Irfan Nasim
Irfan Nasim

Reputation: 2222

Highcharts bar chart x-axis inconsistent behaviour

I have chart with daily data, i am creating x-axis with one hour interval by giving range named minDate and maxDate in minDate assigning start of the day of minDate and in maxDate next day start of the day. i-e user select 20/aug/2015 the minDate will be 20-08-2015 00:00:00:00 and maxDate will be 21-08-2015 00:00:00:00 in millis.

the code as under fellow:

dateRangeFromMilli: function(startDate, noOfDays){
        var minMax = [],
            oneDayMilli = 24 * 60 * 60 * 1000,
            firstDate = new Date(startDate);
        minMax.push(firstDate.getTime());

    for(var i = 1; i < noOfDays ; i++) {
        minMax.push(firstDate.getTime() + oneDayMilli);
    }

    return minMax;
},

var $date = $("#selDate"),
        minMax = HSDateUtils.dateRangeFromMilli($date.val(), 2);

Highcharts.setOptions({
   global: {
            useUTC: false,
            timezoneOffset: new Date().getTimezoneOffset()
   }
});


xAxis: {
       title: {
               enabled: true,
               text: 'Hours'
       },
       type: 'datetime',
       tickInterval: 3600 * 1000,
       min: minMax[0],
       max: minMax[1],
       labels: {
               enabled: true,
               formatter: function (){
                        return Highcharts.dateFormat('%I %p',this.value);
               },
               style:{
                      width:'1px'
               },
               step: 1
               },
       dateTimeLabelFormats: {
               hour: '%I %p'
       },
       plotBands: {
             color: 'rgba(101, 109, 120, 0.2)', // Color value
             from: 0.5, // Start of the plot band
             to: 2.7
          }
      },

The images with inconsistant data is under follow: enter image description here

enter image description here

enter image description here

enter image description here

please see jsfiddle links for Image4: http://jsfiddle.net/oa4mo6ww/5/

for image3 http://jsfiddle.net/oa4mo6ww/6/

Upvotes: 0

Views: 145

Answers (2)

Kacper Madej
Kacper Madej

Reputation: 7886

As a workaround you can set pointRange for series. Example: http://jsfiddle.net/641dpb11/1/

This is an already reported bug - https://github.com/highslide-software/highcharts.com/issues/4184

Upvotes: 1

Alexander Stepchkov
Alexander Stepchkov

Reputation: 755

It looks like the problem is that you trying to display data that out of interval of dates that you show and that coz the issue. I've add a check is data is in range and only then add it to data array and it works Try it http://jsfiddle.net/Paulson/oa4mo6ww/8/

     $.each(data.DATA, function (index, activity) {
        var valArray = [];
        if(activity.timestamp>=minMax[0]&&activity.timestamp<=minMax[1]){
            valArray.push(activity.timestamp);
            valArray.push(activity.minutesPerformed);
            labelsArray[activity.timestamp] = activity.type;
            activityArray.push(valArray);
        }
    });

Upvotes: 0

Related Questions