title: How to create grouped bars in amCharts?
body: <p>I'm using amCharts for creating chart in my form. I want to create a grouped bar chart.</p>
  
  <p>My JSON data is:</p>
  
  <pre><code>  [{date:'10-dec-2015',visits:4025,country:'USA'},{date:'10-dec-2015',visits:1182,country:'India'},{date:'10-dec-2015',visits:o,country:'Spain'},{date:'11-dec-2015',visits:1322,country:'USA'},{date:'11-dec-2015',visits:1122,country:'India'},{date:'11-dec-2015',visits:1114,country:'Spain'},{date:'12-dec-2015',visits:984,country:'India'},{date:'13-dec-2015',visits:711,country:'Poland'},]
  </code></pre>
  
  <p>My existing code is given below:</p>
  
  <pre><code>chartData = generateChartData();   //function call  
  //creating column chart
  
  var chart = AmCharts.makeChart("chartdiv", {
      "type": "serial",
      "theme": "light",
      "dataProvider": chartData,
      "categoryField": "date",
      "rotate": false,
      "startDuration": 1,
      "categoryAxis": {
          "labelRotation": 90,
          "gridPosition": "start",
          "position": "left",
          "autoGridCount": false,
      },
      "trendLines": [],
      "graphs": [
          {
              "balloonText": "[[country ]]:[[value]]",
              "fillAlphas": 0.8,
              "id": "AmGraph-1"+i,
              "lineAlpha": 0.2,
              "title": "title",
              "type": "column",
              "valueField": "visits",
               "color":colors[0]
          }
      ],
      "chartScrollbar": {
          "autoGridCount": false,
          "graph": "AmGraph-1"+i,
          "scrollbarHeight": 10
      },
      "legend": {
          "align": "center",
          "position": "right",
          "markerType": "square",
          "right": 6,
          "labelText": "[[title]]",
          "valueText": "",
          "valueWidth": 80,
          "textClickEnabled": true,
          "rollOverColor": "blue",
          "fontSize": 13,
          "useGraphSettings": true
  
      },
      "guides": [],
      "valueAxes": [
          {
              "id": "ValueAxis-1",
              "position": "left",
              "axisAlpha": 0
          }
      ],
      "allLabels": [],
      "balloon": {},
      "titles": [],
      "export": {
          "enabled": true
      },
  });
  //function definition
  
   function generateChartData() {
      chartData = [];       
          for (var i = 0; i &lt; $scope.datalength; i++) {
              var newdate = $scope.data[i].Date;
              var visits = $scope.data[i].visits;
              var country = $scope.data[i].country;
  
              chartData.push({
                  date: newdate,
                  visits: visits,
                  country : country 
              });
          }          
      }       
      return chartData;
  }
  </code></pre>
  
  <p>Existing output is given below:
  <a href="https://i.stack.imgur.com/IFmiF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IFmiF.png" alt="enter image description here"></a></p>
  
  <p>Expected output is:
  <a href="https://i.stack.imgur.com/IFmiF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hlPpd.jpg" alt="enter image description here"></a></p>
  
  <p>Can anyone help me to reach at my expected output.</p>
  
  <p>Thanks in advance.</p>