create bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

create bar 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.9.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//ww  w .j a v a 2s . c o  m
$(function () {
    var barOptions = {
        chart: {
            renderTo: 'container',
            width: 450,
            height: 350,
            type: 'column'
        },
        xAxis: {
            categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        },
        series: [{
            name: 'NC',
            data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
        }, {
            name: 'OK',
            data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
        }, {
            name: 'KO',
            data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
        }, {
            name: 'VALID',
            data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
        }, {
            name: 'CHECK',
            data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
        }, {
            name: 'COR',
            data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
        }]
    };
    barChart = new Highcharts.Chart(barOptions);
    barChart.series[0].hide();
    barChart.series[0].show();
});
    });

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

Related Tutorials