Using hours value with to column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

Using hours value with to 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">
    window.onload=function(){//from   ww w.j  a  v  a2 s  .co  m
$(function () {
var dialogWidth=$('#chart2').width();
$('#chart2').highcharts({
        chart: {
            type: 'column',
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            borderWidth: 2,
            borderRadius: 7,
            borderColor: '#D8D8D8',
            width:dialogWidth/2,
            height:dialogWidth/2+50
        },
        title: {
            text: 'Time Worked per Day'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            labels: {
              formatter: function() {
                  return Highcharts.numberFormat(this.value/3600000,0);
              }
            },
            title: {
                text: 'Hours'
            },
            tickInterval: 3600000
        },
        credits: {
              enabled: false
          },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        return  Highcharts.dateFormat('%Hh%M',new Date(this.y));
                    }
                }
            }
        },
         tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +' : </b>' +
                    Highcharts.numberFormat(this.y/3600000,2);
            }
        },
        series: [{
            name: 'Hours',
            colorByPoint: true,
            data: [["25-05-16", 9000000], ["26-05-16", 7000000], ["27-05-16", 8000000]]
        }]
    });
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="chart2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials