Display 2 google bar charts on the same web page using chart visualization package 1.1 for displaying Bar graphs

Roland Wornor

unread,

Oct 5, 2015, 1:26:12 PM10/5/15

to Google Visualization API

Quick question,

Up to about a week or so ago, I was able to use the google chart visualization package 1.1 to display two charts on my web page. Now I am only able to select one of the two charts at a time - and the selection is random. I don't remember changing anything and I am using google's out of the box examples nothing really custom. Did google Visualization API change? This code below worked up to about a week ago. Now only one of these charts will display at a time. I would like both to display.

<head>

</head>

<body>

</div>

</body>

google.setOnLoadCallback(drawChart);

function drawChart() {

var dataHires = google.visualization.arrayToDataTable([

['2015', 'Hires'],

['January', 30],

['February', 22],

['March', 45],

['April', 29],

['May', 18],

['June', 33],

['July', 30],

['August', 44],

['September', 18],

['October', 22],

['November', 14],

['December', 10]

]);

var dataDuration = google.visualization.arrayToDataTable([

['2015', 'Days'],

['January', 12],

['February', 11],

['March', 16],

['April', 13],

['May', 14],

['June', 11],

['July', 10],

['August', 13],

['September', 14],

['October', 15],

['November', 14],

['December', 13]

]);

var optionsHires = {

chart: {

title: 'Hires This Year (By Month)',

subtitle: ''

},

width: 500,

bars: 'vertical',

vAxis: {format: 'decimal'},

height: 250,

colors: ['#2c94dc']

};

var optionsDuration = {

chart: {

title: 'Average Duration This Year (By Month)',

subtitle: ''

},

width: 500,

bars: 'vertical',

vAxis: {format: 'decimal'},

height: 250,

colors: ['#00a08c']

};

var chartHires = new google.charts.Bar(document.getElementById('candidate_count'));

chartHires.draw(dataHires, google.charts.Bar.convertOptions(optionsHires));

var chartDuration = new google.charts.Bar(document.getElementById('avg_duration'));

chartDuration.draw(dataDuration, google.charts.Bar.convertOptions(optionsDuration));

}

</script>

Sergey Grabkovsky

unread,

Oct 5, 2015, 1:33:27 PM10/5/15

to Google Visualization API

Hi Roland,

Nothing has changed in the last week that we're aware of, so it's a little strange that you would just start seeing this issue now. However, we've gotten numerous other reports of the same issue, and it will be fixed with the next release, which should go out this week.

--
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 http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/6586d20f-d49a-4851-b7d6-09c4b1948b08%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Brian Eng

unread,

Oct 9, 2015, 4:10:17 PM10/9/15

to Google Visualization API

I am having this exact same issue as of about two weeks ago. 6 line chart graphs all drawn and were working correctly. Now the behavior is exactly as you describe, one graph is drawn at random among the 6.

Daniel LaLiberte

unread,

Oct 9, 2015, 4:19:32 PM10/9/15

to Google Visualization API

We're not sure why this started to happen a couple weeks ago, but a good solution is to use the new release, which you can only use (currently) via the Frozen Google Charts loading mechanism, which is documented here: https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

--

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 http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/9035be2c-0245-4f81-9975-696354857991%40googlegroups.com.

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

--

Daniel LaLiberte - 978-394-1058

dlaliberte@Google.com 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Brian Eng

unread,

Oct 9, 2015, 4:40:09 PM10/9/15

to Google Visualization API

Using the frozen chart for version 43 worked for me. Thanks.

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

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/9035be2c-0245-4f81-9975-696354857991%40googlegroups.com.

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

--
Daniel LaLiberte - 978-394-1058
dlali...@Google.com 5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

muhammad fariz Akbar

unread,

Oct 13, 2015, 3:41:17 AM10/13/15

to Google Visualization API

I am having this exact same issue as of about two weeks ago too, and only change the header using the frozen chart for version 41 worked for me. Thanks

Julian Claus

unread,

Oct 14, 2015, 2:36:35 AM10/14/15

to Google Visualization API

Same here with Line Charts.

Marc-Alexandre MALCHER

unread,

Oct 15, 2015, 7:53:02 AM10/15/15

to Google Visualization API

Same issue for me... Try to display 3 bar charts... Only one appear randomly

Vladimir Martinov

unread,

Oct 15, 2015, 9:27:47 AM10/15/15

to Google Visualization API

Hi All!

Just reporting on this issue as well!

I have tested it initially in Plunker and then on a plain HTML doc - as vanilla set-up (see code below). When using google.charts Line and Bar methods, it is impossible to show more than one chart on a single page. However if the older method - google.visualization and the corresponding visualization methods (LineChart and BarChart respectively) the problem disappears!

The behaviour is basically only the first chart will be drawn and shown. Looking at the code generated by the lib, it shows the second chart drawn in DOM but it will seem that it is not displayed properly.

So a bug in 1.1 beta??? The app does not report any issues in console...

Here is the code which makes it all work (Firefox 41.0.1; Chrome 45.0.2454.101 (64-bit) on Ubuntu 15.04 (64bit);):

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar','line', 'corechart']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Day/Month', 'Sales', 'Goal'],
    ['Daily', 33549.17,47328.04],
    ['M-T-D', 96114.18,141984.12]
  ]);


  var data1 = google.visualization.arrayToDataTable([
    ['Day/Month', 'Bookings', 'Goal'],

    ['Daily', 37991.21,47659.09],

    ['M-T-D', 95610.47,142977.27]

  ]);
 var options = {
    colors: ['#e0aa0e', '#ecbb6e','green'],
    width: 800,
    chart: {
      title: 'Test Company Sales',
      subtitle: 'Sales vs Goal'
    }
  };
  var options1 = {
    colors: ['#e0440e', '#ec8f6e','green'],
    width: 800,
    chart: {
      title: 'Test Company Bookings',
      subtitle: 'Bookings'
    }
  };

  var chart = new google.charts.Bar(document.getElementById('sales'));
  chart.draw(data, options);
  var chart2 = new google.visualization.LineChart(document.getElementById('bookings'));

  chart2.draw(data1, options1);
}
</script>
</head>
<body>
<table width="100%">
    <tr><td>
       <div id="sales" style="display:block;width: 100%; height: 300;"></div>
      </td></tr><tr><td>
    <div id="bookings"  style="display:block; border: 1px solid red;width: 100%; height: 300;"></div>
   </td></tr>
</table>
    <br/>
   
</body>
</html>

Daniel LaLiberte

unread,

Oct 15, 2015, 10:08:30 AM10/15/15

to Google Visualization API

Loading 1.1 is still stuck at version 42, unfortunately. We're not sure when we can resolve this problem. But you can get the fixed behavior in version 43 if you use the frozen version loader: https://google-developers.appspot.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

--
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 http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/bd882c65-3d86-4f7b-b798-2b1595efccbe%40googlegroups.com.

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

--

Daniel LaLiberte - 978-394-1058

dlaliberte@Google.com 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Marc-Alexandre MALCHER

unread,

Oct 15, 2015, 12:19:03 PM10/15/15

to Google Visualization API

It works for me with version 43, thanks

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

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/bd882c65-3d86-4f7b-b798-2b1595efccbe%40googlegroups.com.

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

--
Daniel LaLiberte - 978-394-1058
dlali...@Google.com 5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

marco faber

unread,

Oct 22, 2015, 1:43:19 AM10/22/15

to Google Visualization API

Hi All, I am new here. I use google charts also to display charts on my webpage. Great feature.

I try to display multiple charts on 1 page, bar, combo, line, etc. Currently I have 4 charts on my webpage, 1 bar, 1 combo and 2 line charts. 3 of them are displayed on my page, the last one, a line chart, is not displayed. I can't figure out why. Can anyone help me. My code is below.

Thanks in advanced!!

<html>

<head>

<!--

.title {font-family: Verdana, Arial; font-size: 10pt; color: #990000; font-weight: bold}

.subtitle {font-size: 9pt; color: #000; font-weight: bold}

.myArea {font-size: 10pt; color: #000; font-weight: bold;}

p {margin:0; margin-bottom:5px;}

body {font-family:Arial;font-size:12px;}

.subtitle {font-weight:bold; }

#myNews {background-color:#6699CC;}

.left {float:left; width:50%; padding:0 10px; }

.right {float:right; width:50%; padding:0 10px; }

.altarea {background-color:#F0F0F0; border:5px solid #fff; width:603px;}

.area {background-color:#fff; border:5px solid #fff; width:603px;}

.myArea {padding-left:15px; }

.newsTable {margin:0; padding:5px; }

-->

.hiddenControl {display:none}

</STYLE>

google.charts.load('43', {packages: ['corechart', 'bar', 'line']});

google.charts.setOnLoadCallback(drawCharts);

function drawCharts() {

// CREATE THE DATA TABLE.

var data = google.visualization.arrayToDataTable([

['Month', 'Column1', 'Column2', 'Column3','Column4' ],

['201504',57.15,84.37, 281.2, 0],

['201505',79.91,255.67, 217.57, 0],

['201506',19.09,309.78, 293.79, 0],

['201507',0,142.31, 90.15, 0],

['201508',74.76,400.77, 120.04, 0],

['201509',0,587.43, 0, 0]

]);

var data2 = new google.visualization.DataTable();

data2.addColumn('string', 'Month');

data2.addColumn('number', 'Numbers');

data2.addRows([

['201504',3],

['201505',2],

['201506',4],

['201507',5],

['201508',2]

]);

var data3 = google.visualization.arrayToDataTable([

['Month', 'Numbers', 'Average' ],

['201504',10,10 ],

['201505',12,11 ],

['201506',9,10.33 ],

['201507',10,10.25 ],

['201508',11,10.4 ],

['201509',4,9.33]

]);

var data4 = new google.visualization.DataTable();

data4.addColumn('string', 'Month');

data4.addColumn('number', 'Average');

data4.addRows([

['201502',719.96 ],

['201503',846.84 ],

['201504',1643 ],

['201505',1406.4 ],

['201506',1255.38 ],

['201508',1384.81 ],

['201509',1370.5]

]);

// Set chart options

var options = {

width: 500,

height: 250,

legend: { position: 'top', maxLines: 3 },

bar: { groupWidth: '75%' },

isStacked: true

};

var options2 = {

width: 500,

height: 250,

legend: { position: 'none' }

};

var options3 = {

width: 500,

height: 250,

legend: { position: 'none' },

vAxis: {title: 'Amount'},

hAxis: {title: 'Month'},

seriesType: 'bars',

series: {1: {type: 'line'}}

};

var options4 = {

width: 500,

height: 250,

legend: { position: 'none' }

};

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

chart.draw(data, options);

var chart2 = new google.charts.Line(document.getElementById('linechart2'));

chart2.draw(data2, options2);

var chart3 = new google.visualization.ComboChart(document.getElementById('combochart3'));

chart3.draw(data3, options3);

var chart4 = new google.charts.PieChart(document.getElementById('linechart4'));

chart4.draw(data4, options4);

}

</script>

</head>

<BODY>

<table>

<tr>

</tr>

<tr>

</tr>

</TABLE>

</BODY>

</html>

Reply all

Reply to author

Forward