How to place two Google Graphics Maps on the same page

Question

How to place two Google Graphics Maps on the same page

Asked 8 years ago

Viewed 2,570 times

2

I’m creating a web application that uses two charts powered by the bank. I use the Google Api, google Charts. However, only the first graphic appears while the other is blank.

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  </head>
  <body>

<script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data1 = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options1 = {
          title: 'teste 1',
          is3D: true,
        };

        var chart1 = new google.visualization.PieChart(document.getElementById('teste1'));
        chart1.draw(data1, options1);
      }
    </script>


   <div id="teste1" style="width: 600px; height: 300px;"></div>


 <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'teste 2',
          is3D: true,
        };

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

    <div id="teste" style="width: 600px; height: 300px;"></div>
  </body>
</html>

2 answers

2

Google Charts has a time error that prevents more than one chart from clicking on the same page.

Google has actually managed to fix this bug,I advise you to read this documentation on the subject :

https://developers.google.com/chart/interactive/docs/basic_load_libs#Frozen-versions

Also take a look at this page that talks about the same subject as yours and how they managed to tidy up :

https://groups.google.com/forum/? utm_medium=email&utm_source=footer#! msg/google-Visualization-api/Kulput418cg/yZieM8buCQAJ

This question has also been answered in the OS, here the link :

https://stackoverflow.com/questions/33128087/multiple-google-charts

Also take a look at the documentation on how to draw multiple Harts :

https://developers.google.com/chart/interactive/docs/basic_multiple_charts#draw-Multiple-Charts-on-one-page

Browser other questions tagged php javascript css json google-charts

You are not signed in. Login or sign up in order to post.

by Vergil Wallace • 1 point · Answer 1 · 2020-01-29T15:15:23+00:00

Here it is...is Easy just follow the example:

google.charts.load('current', {'packages': ['corechart'], 'language': 'pt-br'});
google.charts.setOnLoadCallback(drawChartExemplo1);
function drawChartExemplo1() {

var data = google.visualization.arrayToDataTable([
    ['Unidades', 'ValorTotal'],
    ['São Paulo', 14000.45],
    ['Rio de Janeiro', 44000.00],
    ['Bahia', 69000.99],
    ['Amazonia', 35000.00]
]);

var options = {
    title: 'Exemplo de Grafico em Pizza 2',
    is3D: true,
    pieSliceText: 'value',
    legend: {
        position: 'labeled', 
        textStyle: {
            fontSize: 12,
            color: '#25476a',
            bold: true,
            italic: false}
    }
};

var chart = new google.visualization.PieChart(document.getElementById('pieChart'));

//Para fomatando a variavel formatter para fazer a conversão.
var formatter = new google.visualization.NumberFormat({
    decimalSymbol: ',',
    groupingSymbol: '.',
    negativeColor: 'red',
    negativeParens: true,
    prefix: 'R$ '
});

//Para converter o valores da pizza para real.
formatter.format(data, 1);

chart.draw(data, options);
};

///////////////////////////////////////////////////////////////////////////////////////////////////

//2° Grafico
google.charts.load('current', {'packages': ['corechart'], 'language': 'pt-br'});
google.charts.setOnLoadCallback(drawChartExemplo2);
function drawChartExemplo2() {

var data = google.visualization.arrayToDataTable([
    ['Unidades', 'ValorTotal'],
    ['New York', 4000.45],
    ['California', 800.00],
    ['São Francisco', 6000.99],
    ['Miami', 3000.00]
]);

var options = {
    title: 'Exemplo de Grafico em Pizza 2',
    is3D: true,
    pieSliceText: 'value',
    legend: {
        position: 'labeled', 
        textStyle: {
            fontSize: 12,
            color: '#25476a',
            bold: true,
            italic: false}
    }
};

var chart = new google.visualization.PieChart(document.getElementById('pieChart2'));

//Para fomatando a variavel formatter para fazer a conversão.
var formatter = new google.visualization.NumberFormat({
    decimalSymbol: ',',
    groupingSymbol: '.',
    negativeColor: 'red',
    negativeParens: true,
    prefix: 'R$ '
});

//Para converter o valores da pizza para real.
formatter.format(data, 1);

chart.draw(data, options);
};