Re: [visualization-api] Google Charts line chart not showing 0-100 as a percentage scale

2,176 views
Skip to first unread message
Message has been deleted

Daniel LaLiberte

unread,
Jan 15, 2016, 8:55:39 AM1/15/16
to Google Visualization API
Rob,

The maxValue and minValue options are not supported by the Material charts.  You should use the viewWindow option instead, but there are a couple other significant mistakes in your code.  Here is a working example:  https://jsfiddle.net/dlaliberte/td8pf4pe/

In particular, if you want to use 'percent' formatting, then you should specify your values in the range 0 to 1, which are mapped to 0 to 100%.


On Thu, Jan 14, 2016 at 6:31 PM, Rob Gudgeon <robgu...@gmail.com> wrote:

Hi


I'm trying to create a basic Google Charts line chart to show percentages for 3 values over time. The chart is displaying but I'm struggling to get the vAxis to show 0 - 100%, the top value is just the highest value from my dataset (45%).


This is the code I'm using:


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

      function drawChart() {

          var data = new google.visualization.DataTable();
          data.addColumn('date', 'date');
          data.addColumn('number', 'tool1');
          data.addColumn('number', 'tool2');
          data.addColumn('number', 'tool3');

          data.addRows([
            [new Date(2000, 8, 5),  10, 20, 30],
            [new Date(2001, 8, 5),  20, 30, 40],
            [new Date(2002, 8, 5),  25, 35, 45],
          ]);

          var options = {
            chart: {
              title: 'Tool rollout'
            },
            vAxis: {minValue: 0,
                    maxValue: 100,
                    format: "percent"
                    },
            width: 900,
            height: 500,
          };

          var chart = new google.charts.Line(document.getElementById('line'));
          chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="line"></div>
</body>
</html>


But the vAxis stops at 45 (see image at http://i.stack.imgur.com/xIlp5.png)


Any ideas?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/09611660-f596-4b1c-9c4c-4560575fd3f4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
Message has been deleted

Daniel LaLiberte

unread,
Jan 16, 2016, 12:51:43 PM1/16/16
to Google Visualization API
The '100%' being truncated to '00%' is probably a bug on our part, perhaps due to measuring the text with out the '%'.  The only workaround I can suggest at this time is to not use percent formatting, so you would be back to using values in the range 0 to 100.

On Fri, Jan 15, 2016 at 6:12 PM, Rob Gudgeon <robgu...@gmail.com> wrote:
Daniel

Many thanks for the clarifications, appreciate it. Any reason why the top of the chart show '00%' rather than '100%'?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/296bd433-b09c-4ee2-8199-7d15bd654200%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages