Format datetime axis in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

Format datetime axis in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts test tool</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//from ww w. j a va 2s  . c  om
   min-width: 300px;
   max-width: 800px;
   height: 300px;
   margin: 1em auto;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var dtos = [
    [1430265600000, 0],
    [1430352000000, 120],
    [1430438400000, 90],
    [1430524800000, 0],
    [1430611200000, 30],
    [1430697600000, 358],
    [1430784000000, 710]
];
Highcharts.setOptions({
});
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
    },
    title: {
        text: '',
        style: {
        }
    },
    xAxis: {
        type: 'datetime',
        labels: {
            formatter: function() {
                var dateArray = this.axis.series[0].xData;
                var previousDate = new Date(dateArray[dateArray.indexOf(this.value) - 1]);
                var date = new Date(this.value);
                var month = date.toDateString().substring(4,7);
                var previousMonth = previousDate.toDateString().substring(4,7);
                var day = date.getDate();
                if(this.isFirst || (previousMonth != month))
                    return day + '. ' + month;
                return day;
            }
        }
    },
    yAxis: {
        startOnTick: false,
        min: 0,
        title: {
            text: 'Steps'
        },
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            color: '#B2DB33',
        }
    },
    series: [{
        name: 'Steps',
        data: dtos
    }, ]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials