0

I have a set of 

var data = new google.visualization.arrayToDataTable([
    ['Month', 'Rate', 'Interest', 'Principle', 'Balance','New Balance'],
    ['Jan', 321, 600, 816, 319, 890],
    ['Feb', 163, 231, 539, 594, 678],
   ]);

I want to Stack and Group the above data 2 at a time (Rate,Interest), (Principle, Balance) and last one New Balance as a separate Bar. How can this be achieved in Google charts.

I am new to this whole thing..any help appreciated here is some on info to get grouping data into 2 bars how can this be improved to fit my requirement.

How to make a grouped bar stack with Google charts?

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
Jason J
  • 11
  • 1
  • 5

2 Answers2

1

using the option isStacked, if set to true, stacks the elements for all series at each domain value.

this means the values for all columns for each row will be displayed in one stack

as such, to create separate stacks, the data will need to be separated into rows

something like the following working snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Month\nCategory', 'Bottom', 'Top'],
    ['Rate / Interest', 321, 600],
    ['Principle / Balance\nJan', 816, 319],
    ['New Balance', 890, null],
    ['Rate / Interest', 163, 231],
    ['Principle / Balance\nFeb', 539, 594],
    ['nNew Balance', 678, null],
  ]);

  var options = {
    height: 400,
    isStacked: true,
    legend: 'none',
    width: 800
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • hope this helps -- as for grouping, this could be added manually, as seen in [this answer](http://stackoverflow.com/a/40240392/5090771)... – WhiteHat Jan 27 '17 at 16:28
0
    <html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Asia', 'Europe'],
               ['2012',  900,      390],
               ['2013',  1000,      400],
               ['2014',  1170,      440],
               ['2015',  1250,       480],
               ['2016',  1530,      540]
            ]);

            var options = {title: 'Population (in millions)', isStacked:true};  

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }`enter code here`
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>
joe
  • 1