google chart x axis with decimal place

2,524 views
Skip to first unread message

Richard Wallace

unread,
Feb 28, 2015, 5:51:01 AM2/28/15
to google-visua...@googlegroups.com
I'm attempting to create a basic google chart.
X axis is a time, y axis is a value.
Data is formatted as so:

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Time');
      data.addColumn('number', 'Yesterday');
      data.addColumn('number', 'Today');
      data.addColumn('number', 'TwoDayAgo');

      data.addRows([
        [01.00,  37.8, 80.8, 41.8],
        [02.00,  30.9, 69.5, 32.4],
        [03.00,  25.4,   57, 25.7],
        [04.00,  11.7, 18.8, 10.5],
        [05.00,  11.9, 17.6, 10.4]
      ]);

      var options = {
        chart: {
          title: 'Results',
          subtitle: 'Comparison'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="linechart_material"></div>
</body>
</html>

Note the decimal places in the data table.
If I remove the decimal places it will work om
However the chart does not show?

Richard Wallace

unread,
Mar 1, 2015, 3:42:29 PM3/1/15
to google-visua...@googlegroups.com
Anyone?

Sergey Grabkovsky

unread,
Mar 2, 2015, 10:15:00 AM3/2/15
to google-visua...@googlegroups.com
Hi Richard,

In JavaScript, prepending 0 to a number means that it is an octal number, and octal numbers cannot have decimal points. Try entering "01.00" in a JavaScript console. You will get the error "SyntaxError: Unexpected number", which is exactly the error that you get for your code. If you still have issues after removing the prepended zeroes, post back, and we will investigate again.



--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Richard Wallace

unread,
Mar 3, 2015, 9:42:41 AM3/3/15
to google-visua...@googlegroups.com
OK, removing the decimal places fixes the problem.
 
However, i would like them there, or at least ':00'
What i am trying to display is time...but when i try to use 06:00, 07:00 etc it also fails
 
How can i use time in a chart on the x axis?
Hi Richard,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

Sergey Grabkovsky

unread,
Mar 3, 2015, 9:52:38 AM3/3/15
to google-visua...@googlegroups.com
Again, Richard, the issue isn't the decimal places, it is the leading 0's. You can enter "1.00" with no issues, but not "01.00". That said, your decimal places aren't really giving you anything, since 1.00 === 1. There is absolutely no reason to specify them.

It is perfectly reasonable to use numbers to represent the number of minutes/seconds/hours/days passed since a certain event, but we also support a number of ways to represent dates and times. You can find the documentation for those here: https://developers.google.com/chart/interactive/docs/datesandtimes

Please be aware that date formatting is currently broken for Material Charts, and timeofday doesn't really format itself properly if it spans for longer than a day. These issues should be fixed with the next release.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

Richard Wallace

unread,
Mar 3, 2015, 5:26:51 PM3/3/15
to google-visua...@googlegroups.com
Thanks.

Is the other formatting options broke as well?
I'm trying to move the legend without success?

Sergey Grabkovsky

unread,
Mar 3, 2015, 5:35:12 PM3/3/15
to google-visua...@googlegroups.com
Currently, only moving the legend to the left is supported.
--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Richard Wallace

unread,
Mar 4, 2015, 3:15:55 AM3/4/15
to google-visua...@googlegroups.com
Thanks for the info.
Is there a plan to roll out all other features to material look charts?
 

On Tuesday, 3 March 2015 22:35:12 UTC, Sergey wrote:
Currently, only moving the legend to the left is supported.
On Tue, Mar 3, 2015 at 5:26 PM Richard Wallace <richiew...@gmail.com> wrote:
Thanks.

Is the other formatting options broke as well?
I'm trying to move the legend without success?

--
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-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

Sergey Grabkovsky

unread,
Mar 4, 2015, 7:48:57 AM3/4/15
to google-visua...@googlegroups.com
Yes, we do intend to support these features in the future, but I don't have any specific estimates for when any given feature will be implemented.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

Kevin Bolger

unread,
Nov 9, 2016, 5:42:08 AM11/9/16
to Google Visualization API
"That said, your decimal places aren't really giving you anything, since 1.00 === 1. There is absolutely no reason to specify them." This is a false assumption and I find the lack of control still available to the developer in this regard a year on from this thread to be very frustrating. I need to display my values to the correct decimal place, even if it is 1.00. If a spec limit is set to two decimal places, then when I create these google charts, I need to display my results to the same decimal place as the spec. Cutting the decimal place short leaves the charts up for scrutiny. If the value displayed is 1 and not 1.00, how does the viewer know I have not incorrectly rounded a value such as, say, 1.01 or 1.41 down to 1? They dont is the answer. That information needs to be made very explicit in some industries. Also, the decimal rounding just does not work. I have values that should be rounding to 3 decimal places. I have values such as 7.413, 7.391 etc that are displaying as 7.4. They are being drawn as 7.413 sure, but the chart tooltip and the y axis on the chart reads 7.4. This is even a bigger issue than the previous example. If someone wants to see how close a result came to a spec limit, they cant get that information from the chart - which sort of defeats the purpose. Now instead of using these web browser based interactive charts, they are having to access the data source itself. Can you see my dilemna? I would like to know if the formatting options for material charts are being looked at in any serious way at google, because this thread is a year old and as far as I can tell, nothing has changed. These details may seem minor, but they can have big implications to the usability of such a library.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

Daniel LaLiberte

unread,
Nov 9, 2016, 10:03:28 AM11/9/16
to Google Visualization API
Hi Kevin,

Google Charts provides a few ways to specify formatting of axis ticks and data values that allow you to include the decimal digits.  I'm not sure about the material charts (which are still limited in their feature support), but for the classic charts, you can either specify a 'format' option, or specify the exact tick values and formatted representation of each using the 'ticks' option.  For data values, use a number formatter on the data to generate the formatted values, or specify them yourself for each value, using e.g. { v: 1, f: '1.00' }

The format pattern for showing two decimal digits is '#.00'

To post to this group, send email to google-visualization-api@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/0eb66054-7525-4eec-be68-271763d6a69b%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--
Reply all
Reply to author
Forward
0 new messages