create four bar chart using each function - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

create four bar chart using each function

Demo Code

ResultView the demo in separate window 

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

#trellis td {/*from   w w  w.j ava 2s .c  o  m*/
   width: 200px;
   height: 200px;
}
#trellis td.first {
   width: 300px;
}


      </style> 
      <script type="text/javascript">
    $(function(){
var charts = [],
    $containers = $('#trellis td'),
    datasets = [{
        name: 'Erik',
        data: [3, 6, 1, 2, 6]},
    {
        name: 'Gert',
        data: [5, 6, 4, 2, 1]},
    {
        name: 'Helge',
        data: [2, 6, 5, 2, 3]},
    {
        name: 'Torstein',
        data: [5, 2, 7, 4, 2]}];
$.each(datasets, function(i, dataset) {
    charts.push(new Highcharts.Chart({
        chart: {
            renderTo: $containers[i],
            type: 'bar',
            marginLeft: i === 0 ? 100 : 10
        },
        title: {
            text: dataset.name,
            align: 'left',
            x: i === 0 ? 90 : 0
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Carrots'],
            labels: {
                enabled: i === 0
            }
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: null
            },
            min: 0,
            max: 10
        },
        legend: {
            enabled: false
        },
        series: [dataset]
    }));
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <h1>Highcharts Trellis chart emulation</h1> 
      <table id="trellis"> 
         <tbody>
            <tr> 
               <td class="first"></td> 
               <td></td> 
               <td></td> 
               <td></td> 
            </tr> 
         </tbody>
      </table>  
   </body>
</html>

Related Tutorials