Google Chart Geochart does not work in Java

Asked

Viewed 232 times

1

Hello,

I have a problem running a Google Chart Geochart map in Java...

If it’s in a normal . html file, it works, but inside my xhtml project it doesn’t work.

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

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 looks in Java, but all in white, without appearing the balls with the values set, Already in html appears the map with the colored balls.

javascript java jsf

  • Any error in console?

  • None... S unfortunately it just doesn’t bring the values.

  • If the scripts are being loaded and the function is being called I don’t know what can be. Maybe the map is trying to be painted before the screen has been fully loaded, check this out.

  • At worst, if the map has some xabu for xhtml, you can leave it in an html itself and use a frame in xhtml :/

  • is a valid attempt, I have a pie chart and everything is ok, even connecting with the database, but this one, is complicated...

  • What’s really going on is that you’re not carrying the values? city, margin and sale? is that it?

  • That’s right Renato, the map is all white, without appearing the values. If I make the same code in a normal html (notepad), it loads and inserts the values...

Show 2 more comments

1 answer

1

managed to solve part of the problem by changing 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>

Browser other questions tagged javascript java jsf

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