show days of month dates in X axis from JSON file in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

show days of month dates in X axis from JSON file in column chart

Demo Code

ResultView the demo in separate window 

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

#divStatsGrupo {//from w  w  w . j  a v  a 2s  .  c om
   position: absolute;
   width: 600px;
   height: 300px;
   z-index: 2;
   left: 10px;
   top: 10px;
   background-color: #FFF;
   border: solid;
   border-bottom-width: 2px;
   border-color: #C0C0C0;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
Highcharts.setOptions({
    global: {
        useUTC: false
    }
});
var datos = [{
    'name': 'Sant Iscle 60',
        'data': [
        [1398902400000, 4],
        [1399939200000, 1]
    ]
}, {
    'name': 'Sant Iscle 62',
        'data': [
        [1399939200000, 2]
    ]
}, {
    'name': 'Laboratorio Comp.',
        'data': [
        [1400025600000, 2]
    ]
}];
$('#divStatsGrupo').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: ''
    },
    tooltip: {
        formatter: function () {
            return Highcharts.dateFormat('%d/%m/%Y', new Date(this.x)) + '<br/>' + 'Alarmas: ' + this.y;
        }
    },
    xAxis: {
        type: "datetime",
        tickInterval: 24 * 3600 * 1000,
        labels: {
            rotation: -45,
            align: 'right'
        },
        dateTimeLabelFormats: { // don't display the dummy year
            day: '%e. %b',
        }
    },
    yAxis: {
        title: {
            text: 'Total alarmas'
        },
        allowDecimals: false,
        min: 0
    },
    series: datos,
    plotOptions: {
        series: {
            pointRange: 24 * 3600 * 1000 // one day
        }
    }
});
    });

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

Related Tutorials