title: How do I make stacked bar chart on amcharts interactive?
body: <p>I have written some code in amcharts.js to create stacked bar charts (with data as a parameter) and a pie chart.</p>
  
  <p>The code can be found here:
  <a href="http://jsfiddle.net/akashdmukherjee/myd363tw/30/" rel="nofollow noreferrer">http://jsfiddle.net/akashdmukherjee/myd363tw/30/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://www.amcharts.com/lib/3/pie.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"&gt;&lt;/script&gt;
  &lt;div id="chartdiv"&gt;&lt;/div&gt;   
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#chartdiv {
      width       : 100%;
      height      : 500px;
      font-size   : 11px;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var year_wise_continent_breakdown_data = 
  [
  {"year": 2003,"europe": 2.5,"namerica": 2.5,"asia": 2.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
  {"year": 2004,"europe": 2.6,"namerica": 2.7,"asia": 2.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
  , {"year": 2005,"europe": 2.8,"namerica": 2.9,"asia": 2.4,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
  ];
  
  var quarter_wise_continent_breakdown_data_for_2003 = 
  [
  {"year": "Q1","europe": 0.5,"namerica": 2.1,"asia": 1.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
  {"year": "Q2","europe": 2.6,"namerica": 2.7,"asia": 3.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
  , {"year": "Q3","europe": 2.8,"namerica": 1.7,"asia": 1.4,"lamerica": 1.3,"meast": 1.3,"africa": 2.1}
  ];
  
  var quarter_wise_continent_breakdown_data_for_2004 = 
  [
  {"year": "Q1","europe": 1.5,"namerica": 2.1,"asia": 1.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
  {"year": "Q2","europe": 4.6,"namerica": 2.7,"asia": 3.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
  , {"year": "Q3","europe": 5.8,"namerica": 1.7,"asia": 1.4,"lamerica": 1.3,"meast": 1.3,"africa": 2.1}
  ];
  
  var quarter_wise_continent_breakdown_data_for_2005 = 
  [
  {"year": "Q1","europe": 3.9,"namerica": 2.1,"asia": 1.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
  {"year": "Q2","europe": 2.1,"namerica": 2.7,"asia": 3.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
  , {"year": "Q3","europe": 0.8,"namerica": 1.7,"asia": 1.4,"lamerica": 1.3,"meast": 1.3,"africa": 2.1}
  ];
  
  var continent_breakdown_data = [ 
      {"country": "UK", "litres": 99},
      {"country": "Belgium","litres": 60},
      { "country": "The Netherlands","litres": 50}
  ];
  
  var make_pieChart_from_continent_breakdown_data = function(selected_year, selected_region){
      AmCharts.makeChart("chartdiv", {
          "type": "pie",
          "theme": "none",
          "dataProvider": continent_breakdown_data,
          "valueField": "litres",
          "titleField": "country",
          "exportConfig":{    
            menuItems: [{
            icon: '/lib/3/images/export.png',
            format: 'png'   
            }]  
          }
      });
  };
  
  var make_stackedBars_chart = function(data_for_stackedBars_chart){
      AmCharts.makeChart("chartdiv", {
          "type": "serial",
          "theme": "none",
          "legend": {
              "horizontalGap": 10,
              "maxColumns": 1,
              "position": "right",
              "useGraphSettings": true,
              "markerSize": 10
          },
          "dataProvider": data_for_stackedBars_chart,
          "valueAxes": [{
              "stackType": "regular",
              "axisAlpha": 0.3,
              "gridAlpha": 0
          }],
          "graphs": [{
              "balloonText": "&lt;b&gt;[[title]]&lt;/b&gt;&lt;br&gt;&lt;span style='font-size:14px'&gt;[[category]]: &lt;b&gt;[[value]]&lt;/b&gt;&lt;/span&gt;",
              "fillAlphas": 0.8,
              "labelText": "[[value]]",
              "lineAlpha": 0.3,
              "title": "Europe",
              "type": "column",
              "fillColors": "#3C3C3C",
              "valueField": "europe"
          }, {
              "balloonText": "&lt;b&gt;[[title]]&lt;/b&gt;&lt;br&gt;&lt;span style='font-size:14px'&gt;[[category]]: &lt;b&gt;[[value]]&lt;/b&gt;&lt;/span&gt;",
              "fillAlphas": 0.8,
              "labelText": "[[value]]",
              "lineAlpha": 0.3,
              "title": "North America",
              "type": "column",
              "color": "#000000",
              "valueField": "namerica"
          }, {
              "balloonText": "&lt;b&gt;[[title]]&lt;/b&gt;&lt;br&gt;&lt;span style='font-size:14px'&gt;[[category]]: &lt;b&gt;[[value]]&lt;/b&gt;&lt;/span&gt;",
              "fillAlphas": 0.8,
              "labelText": "[[value]]",
              "lineAlpha": 0.3,
              "title": "Asia-Pacific",
              "type": "column",
              "color": "#000000",
              "valueField": "asia"
          }, {
              "balloonText": "&lt;b&gt;[[title]]&lt;/b&gt;&lt;br&gt;&lt;span style='font-size:14px'&gt;[[category]]: &lt;b&gt;[[value]]&lt;/b&gt;&lt;/span&gt;",
              "fillAlphas": 0.8,
              "labelText": "[[value]]",
              "lineAlpha": 0.3,
              "title": "Latin America",
              "type": "column",
              "color": "#000000",
              "valueField": "lamerica"
          }, {
              "balloonText": "&lt;b&gt;[[title]]&lt;/b&gt;&lt;br&gt;&lt;span style='font-size:14px'&gt;[[category]]: &lt;b&gt;[[value]]&lt;/b&gt;&lt;/span&gt;",
              "fillAlphas": 0.8,
              "labelText": "[[value]]",
              "lineAlpha": 0.3,
              "title": "Middle-East",
              "type": "column",
              "color": "#000000",
              "valueField": "meast"
          }, {
              "balloonText": "&lt;b&gt;[[title]]&lt;/b&gt;&lt;br&gt;&lt;span style='font-size:14px'&gt;[[category]]: &lt;b&gt;[[value]]&lt;/b&gt;&lt;/span&gt;",
              "fillAlphas": 0.8,
              "labelText": "[[value]]",
              "lineAlpha": 0.3,
              "title": "Africa",
              "type": "column",
              "color": "#000000",
              "valueField": "africa"
          }],
          "categoryField": "year",
          "categoryAxis": {
              "gridPosition": "start",
              "axisAlpha": 0,
              "gridAlpha": 0,
              "position": "left"
          },
          "exportConfig":{
              "menuTop":"20px",
              "menuRight":"20px",
              "menuItems": [{
              "icon": '/lib/3/images/export.png',
              "format": 'png'   
              }]  
          }
      })
  };
  
  //****************************************************************************
  // RENDER CHARTS
  //****************************************************************************
  make_stackedBars_chart(year_wise_continent_breakdown_data);
  ////make_pieChart_from_continent_breakdown_data(2005, "Asia-Pacific");
  </code></pre>
  
  <p>If you notice, I create stacked bar charts using make_stackedBars_chart() function by passing in data. From my code, there are four options I can pass as data for the stacked bar chart:
  1. year_wise_continent_breakdown_data
  2. quarter_wise_continent_breakdown_data_for_2003
  3. quarter_wise_continent_breakdown_data_for_2004
  4. quarter_wise_continent_breakdown_data_for_2003</p>
  
  <p>I could also create a pie chart instead using the function make_pieChart_from_continent_breakdown_data(selected_year, selected_region). The pie chart, for simplicity here, uses only one piece of data that's defined as the continent_breakdown_data variable.</p>
  
  <p>The first view that an user of this 'dashboard' would see is the year-wise trends broken down by continents. This is the page that's renders when you open the jsfiddle link. This is made possible by a function call make_stackedBars_chart(year_wise_continent_breakdown_data);</p>
  
  <p><strong><em>But now is the fun part.</em></strong></p>
  
  <p>How do I make this interactive?
  Let's start with the first view.
  <img src="https://i.stack.imgur.com/suSUg.png" alt="enter image description here"></p>
  
  <p>When the user single-clicks on the first column (data for year 2003), or second column (data for year 2004), or third column (data for year 2005), I want the selected column to be highlighted in Grey. Something like this.
  <img src="https://i.stack.imgur.com/8XHs1.png" alt="enter image description here">
  My hope is that this can be set by setting the fillColors attribute of the graph object in the function. But how?</p>
  
  <p>Next, when the user double-clicks on the selected column, the user should be able to drill-down to a new stacked bar chart which shows category breakdown but trending over Quarters of the selected year. So, let's say the user selected year 2005. When they single-clicked, it turned grey. After single-clicking or before single-clicking, if they double-click the year 2005 column, a new stacked bar chart is loaded with an additional button on top to go back to the previous chart. My understanding is that this needs to be done using a function call of make_stackedBars_chart(quarter_wise_continent_breakdown_data_for_2005);
  This should look something like this:<img src="https://i.stack.imgur.com/QEZlv.png" alt="enter image description here"></p>
  
  <p>Once this, is done user should be able to click on the top button to go back from there to the old chart into this view.
  <img src="https://i.stack.imgur.com/Srj3H.png" alt="enter image description here"></p>
  
  <p>Fine. So the user saw year-wise view and quarter-wise view. But, now they want to select only one category (Asia-Pacific region) of year 2005 and see some other data specific to that. Selecting any portion on the chart should first collect the category (region/continent in this case) they have selected and the year they have selected. The selected region should be colored grey on a single click. 
  <img src="https://i.stack.imgur.com/ldtb2.png" alt="enter image description here">
  On a double click before/after the single-click on  this portion of Asia-Pacific in 2005, this information should be passed onto a function that creates a pie chart accordingly. For this, a function call of this could be made
  make_pieChart_from_continent_breakdown_data(2005, "Asia-Pacific"); The resultant graph should also have a button on top to go back to the original view. It should look something like this.
  <img src="https://i.stack.imgur.com/ZfmWc.png" alt="enter image description here"></p>
  
  <p>Clicking on 'Go Back', they should be redirected to the original year-wise stacked bar chart.
  <img src="https://i.stack.imgur.com/MSSun.png" alt="enter image description here"></p>