work with value in google maps

Asked

Viewed 521 times

2

Well I’m taking a look at how google charts work. And I’m not finding the way to work with rods in R$. I need the chart to display the formatted values. Does anyone know how to do this?

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <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.57],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

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

javascript google-charts

  • What format do you need ?

  • Where do you want to put R$?

  • Then I would enter the data like this:' ['Seg', 239.33], ['Ter', 428.80], ['Quar', 232.98],' And the chart had to be all formatted like this: R$239.33

1 answer

2


Thus ?

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <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.57],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);

      var options = {
        title: 'My Daily Activities',
        pieHole: 0.4,
      };

      var formatter = new google.visualization.NumberFormat({
        decimalSymbol: ',',
        groupingSymbol: '.',
        negativeColor: 'red',
        negativeParens: true,
        prefix: 'R$ '
      });
      formatter.format(data, 1);

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

<body>
  <div id="donutchart" style="width: 900px; height: 500px;"></div>
</body>

</html>

  • 1

    Very good, that’s right. Thank you

  • If it helped, mark it as the right answer, please. I don’t know if you’ve had the time yet.

  • I hadn’t given the time

  • you know how to make it responsive with 50% of the screen?

Browser other questions tagged javascript google-charts

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