1

Olá,

Estou com um problema ao executar um mapa do Google Chart GeoChart no Java...

Se estiver em um arquivo .html normal, funciona, mas dentro do meu projeto com o xhtml não funciona.

Código em html:

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

     google.charts.load('current', {'packages': ['geochart']});
     google.charts.setOnLoadCallback(drawMarkersMap);

  function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['Cidade',   'Margem', 'Vendas'],
    ['Rio de Janeiro',  45000,    30],
    ['Porto Alegre',    72000,      50],
    ['São Paulo',       27000,    25],
    ['Santa Maria',     11000,      11]
  ]);

  var options = {
    region: 'BR',
    displayMode: 'markers',
    colorAxis: {colors: ['red', 'green']}
  };

  var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  chart.draw(data, options);
};
</script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Abaixo o código no java:

<ui:define name="conteudo">

    <div class="container">
        <div class="row">

            <div class="col-md-6 BorderedBox">
                <div id="chart_div2" class="chart"></div> 
            </div>
        </div>

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

         function drawMarkersMap() {
         var data = google.visualization.arrayToDataTable([
           ['Cidade',   'Margem', 'Vendas'],
           ['Rio de Janeiro',  45000,    30],
           ['Porto Alegre',     72000,      50],
           ['São Paulo',       27000,    25],
           ['Santa Maria',      11000,      11]
         ]);

         var options = {
           region: 'BR',
           displayMode: 'markers',
           colorAxis: {colors: ['red', 'green']}
         };

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

    </div>
</ui:define>

O Mapa aprece em Java, porém todo em branco, sem aparecer as bolinhas com os valores setados, Já no html aparece o mapa com as bolinhas coloridas.

7
  • Algum erro no console?
    – BrTkCa
    15/12/2016 às 19:30
  • Nenhum... :S infelizmente ele apenas não traz os valores. 15/12/2016 às 19:31
  • Se os scripts estão sendo carregados e a função esta sendo chamada eu não sei o que pode ser. Talvez o mapa esteja tentando ser pintando antes da tela ter sido completamente carregada, dê uma verificada nisso.
    – BrTkCa
    15/12/2016 às 19:36
  • Na pior das hipóteses, se o mapa tiver algum xabu para xhtml, você pode deixar em um html mesmo e usar um frame no xhtml :/
    – BrTkCa
    15/12/2016 às 19:37
  • é uma tentativa válida, tenho um gráfico de pizza e está tudo ok, até conectando com o banco de dados, mas esse aí, está complicado... 15/12/2016 às 19:39

1 Resposta 1

1

consegui resolver parte do problema alterando o var otions{}, e não é possivel ver por cidade, apenas pelo estado.

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

  function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['Cidade',   'Margem', 'Vendas'],
    ['Rio de Janeiro',  45000,    30],
    ['Rio Grande do Sul',   72000,      50],
    ['São Paulo',       27000,    25],
    ['Mato Grosso',     11000,      11]
  ]);

  var options = {
    region: 'BR',
    resolution: 'provinces',
    displayMode: 'regions',
    colorAxis: {colors: ['red', 'green']}
  };

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .