Cannot make a percent stacked bar chart

507 views
Skip to first unread message

Heywood Buzzfuddle

unread,
Mar 13, 2019, 12:16:08 PM3/13/19
to Google Visualization API
I want to make a percent stacked bar chart. 

          isStacked: true,

will stack the bars for sure but 

          isStacked: 'percent',

does nothing. 

The vAxis and legend options appear to do nothing as well. 

Am I mixing material and classic?  Am I doing something wrong?  Is this a known bug?

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Paid', 'Suspended', 'Offered'],
          ['2009', 1030, 540, 1350],
          ['2010', 1000, 400, 200],
          ['2011', 1170, 460, 250],
          ['2012', 660, 1120, 300],
          ['2013', 1030, 540, 1350],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 1350],
          ['2018', 1000, 400, 200],
  ]);

var options = {
          isStacked: true,
//          height: 300,
          title: 'Awards Offered, Suspended, and Paid',
          subtitle: 'FY2009 - FY2018',
          legend: {position: 'bottom', maxLines: 3},
          bar: { groupWidth: "61.8%" },
  colors:['green'],
  vAxis: {
            format: 'decimal',
minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

 

Daniel LaLiberte

unread,
Mar 13, 2019, 12:46:40 PM3/13/19
to Google Visualization API
Sorry, the 'percent' and 'relative' stacking option is not supported by the material 'Bar' chart.  If you can use the google.visualization.BarChart or ColumnChart, it should work.  You might want to use the 'theme': 'material' option to get the material colors and fonts.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/6811a668-3040-4f34-bdec-649ca92f795b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--

Heywood Buzzfuddle

unread,
Mar 13, 2019, 1:22:42 PM3/13/19
to Google Visualization API

If I do 
chart.draw(data, google.charts.BarChart.convertOptions(options));
or
chart.draw(data, google.charts.ColumnChart.convertOptions(options));

it doesn't render.

The only place i see google.visualization in my code anywhere is
google.visualization.arrayToDataTable

Am I supposed to somehow change this line:
        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

Terribly confused.

Daniel LaLiberte

unread,
Mar 13, 2019, 2:04:57 PM3/13/19
to Google Visualization API
Yes, you need to change your google.load() call to load the 'corechart' package, and then google.visualization.ColumnChart will be defined.  See documentation here:   https://developers.google.com/chart/interactive/docs/gallery/columnchart#stacked-column-charts

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/09362f74-b34d-42ee-9251-dd14f9557189%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Heywood Buzzfuddle

unread,
Mar 13, 2019, 2:35:46 PM3/13/19
to Google Visualization API
I changed like this:
//      google.charts.load('current', {'packages':['bar']});
      google.charts.load("current", {packages: ["corechart"]});

I also did:
//        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        var chart = new google.charts.ColumnChart(document.getElementById('columnchart_material'));

//        chart.draw(data, google.charts.Bar.convertOptions(options));
        chart.draw(data, google.charts.ColumnChart.convertOptions(options));

No joy in any combination.  I've been all over that reference. 

I don't have a line like this:
 var visualization = new google.visualization.ColumnChart(container);
anywhere in my code, don't understand it (container???), and don't know where I need to put it.  Do I need it?  Where and how do i use it if i do??


Boiled down code right now is:

   <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
//    google.charts.load("current", {packages: ["corechart"]});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
  
        var data = google.visualization.arrayToDataTable([
                                 my data
  ]);
var options = {
                          isStacked: true,
                          some options
                   };

var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
// no joy     var chart = new google.charts.ColumnChart(document.getElementById('columnchart_material'));

chart.draw(data, google.charts.Bar.convertOptions(options));
//  no joy    chart.draw(data, google.charts.ColumnChart.convertOptions(options));
      };

</script>





On Wednesday, March 13, 2019 at 1:04:57 PM UTC-5, Daniel LaLiberte wrote:
Yes, you need to change your google.load() call to load the 'corechart' package, and then google.visualization.ColumnChart will be defined.  See documentation here:   https://developers.google.com/chart/interactive/docs/gallery/columnchart#stacked-column-charts

On Wed, Mar 13, 2019 at 1:22 PM Heywood Buzzfuddle <heyb...@gmail.com> wrote:

If I do 
chart.draw(data, google.charts.BarChart.convertOptions(options));
or
chart.draw(data, google.charts.ColumnChart.convertOptions(options));

it doesn't render.

The only place i see google.visualization in my code anywhere is
google.visualization.arrayToDataTable

Am I supposed to somehow change this line:
        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

Terribly confused.

On Wednesday, March 13, 2019 at 11:46:40 AM UTC-5, Daniel LaLiberte wrote:
Sorry, the 'percent' and 'relative' stacking option is not supported by the material 'Bar' chart.  If you can use the google.visualization.BarChart or ColumnChart, it should work.  You might want to use the 'theme': 'material' option to get the material colors and fonts.


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

Daniel LaLiberte

unread,
Mar 13, 2019, 3:06:21 PM3/13/19
to Google Visualization API

You need to replace

  var chart = new google.charts.ColumnChart(document.getElementById('columnchart_material'));

with

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));

Also, with the 'corechart' charts, many options are different, and you should *not* call  google.charts.Bar.convertOptions().  Maybe it would help to start with a full example (from the documentation page) that uses google.visualization.ColumnChart() with percent stacking, and then swap in your data, and add options incrementally.


To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/af6b10cc-375b-4f83-91df-178ac7967a3f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.


--

Heywood Buzzfuddle

unread,
Mar 13, 2019, 3:27:30 PM3/13/19
to Google Visualization API


On Wednesday, March 13, 2019 at 2:06:21 PM UTC-5, Daniel LaLiberte wrote:

You need to replace

  var chart = new google.charts.ColumnChart(document.getElementById('columnchart_material'));

with

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));

Also, with the 'corechart' charts, many options are different, and you should *not* call  google.charts.Bar.convertOptions().  Maybe it would help to start with a full example (from the documentation page) that uses google.visualization.ColumnChart() with percent stacking, and then swap in your data, and add options incrementally.



Starting with a full working example and adding and swapping incrementally is the only way I know how to work!!  Unfortunately, there is no full working option to start from on the documentation page that I can find

I have managed to get it working, however (I think) and will now start tweaking it.  Here is full working code (the colors will blind you, I will change them, lol):

    <script type="text/javascript">

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  
var data = google.visualization.arrayToDataTable([
          ['Year', 'Paid', 'Suspended', 'Offered'],
          ['2009', 144230, 59846, 55257],
          ['2010', 141380, 120048, 52770],
          ['2011', 147210, 151367, 52611],
          ['2012', 158349, 145365, 65960],
          ['2013', 140973, 168595, 67639],
          ['2014', 136563, 165492, 65777],
          ['2015', 128399, 160095, 59119],
          ['2016', 107057, 161546, 51908],
          ['2017', 121579, 104588, 63924],
          ['2018', 129517, 97546, 73942],
  ]);

var options = {
          isStacked: 'percent',
          title: 'Awards Paid, Suspended, and Offered',
          subtitle: 'FY2009 - FY2018',
          legend: { position: 'bottom', maxLines: 3 },
          bar: { groupWidth: "61.8%" },
  tooltip: {fontSize: 12},
  colors:['green', 'red', 'blue'],
  vAxis: {
            format: 'decimal',
minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
      }
    </script>

    <div id="columnchart_material" style="width: 600px; height: 500px;"></div>


 
THANK YOU VERY MUCH FOR THE HELP AND STAYING WITH THIS THREAD!!!!


 
Reply all
Reply to author
Forward
0 new messages