Google Chart GeoChart does not work in Java

Question

Google Chart GeoChart does not work in Java

Navigation

#1 by (1 votes)

1

Hello,

I'm having a problem while running a Google Map Chart GeoChart in Java ...

If it's in a normal .html file, it works, but inside my project with xhtml it does not work.

HTML code:

<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><scripttype='text/javascript'>google.charts.load('current',{'packages':['geochart']});google.charts.setOnLoadCallback(drawMarkersMap);functiondrawMarkersMap(){vardata=google.visualization.arrayToDataTable([['Cidade','Margem','Vendas'],['RiodeJaneiro',45000,30],['PortoAlegre',72000,50],['SãoPaulo',27000,25],['SantaMaria',11000,11]]);varoptions={region:'BR',displayMode:'markers',colorAxis:{colors:['red','green']}};varchart=newgoogle.visualization.GeoChart(document.getElementById('chart_div'));chart.draw(data,options);};</script></head><body><divid="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Below the code in 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>

The map appears in Java, but all in white, without appearing the balls with the values set, already in the html appears the map with the colored balls.

javascript java jsf

asked by anonymous 15.12.2016 / 20:23

1 answer

Session hibernate, how to get instance How to load a PartialView to create a comment

score 1 · Answer 1

I could solve part of the problem by changing the var otions {}, and it is not possible to see by city, only by state.

<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>