Storing absolute values and percentages

[Lumière]

Hi everybody,

I'm currently doing a bar chart, and I show percentages (in the x axis). Now I want to show the absolute values in a tooltip. I have the absolute values in an array, and I create the datatable with percentages only (I use a different array to build the datatable). Now I want to show the percentages in the chart (that's already done) and show the absolute values when an item is hovered.

Can you please help me do it?
Thanks.

[asgallant]

Set the formatted values of your dataTable cells to the absolute values, as outlined here: https://groups.google.com/d/msg/google-visualization-api/GcAbKgMwm5s/TjdMXd0y4hoJ

[Lumière]

I made a little test, but it's not working:

var table=[['Year', 'Votes'],
          ['item 1',  {v: 387, f: 'test'}],
        ['item 2',  {v: 465, f: 'test'}],
        ['item 3',  {v: 610, f: 'test'}]];

var data = google.visualization.arrayToDataTable(table);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);

I just get a empty chart (without any item).

[Lumière]

I actually get a white screen and the folowing error on the error console :
Error: Invalid value in 0,1
Source : https://www.google.com/uds/api/visualization/1.0/66b81c45612b098032b562b20ed13080/format+fr,default,corechart.I.js
Ligne : 338

[asgallant]

The #arrayToDataTable method doesn't support the object-literal syntax (the {v: value, f: "formatted value"} notation).  You can build the table manually and add data using the DataTable#addRows method or follow the method I used in a follow-up post: https://groups.google.com/d/msg/google-visualization-api/GcAbKgMwm5s/kxzmYnuPyxYJ

[Lumière]

Works awesomely great! Thank you so much!

[Zdenek]

Hi, I dont think so. There is written in the example, that it is possible to use {v: value, f: 'formatted value'} (https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable).
But try thisone table data

var table = [
  ['Year', 'Votes'],
  ['item 1',  387],

  ['item 2',  {v: 465, f: 'test'}],
  ['item 3',  {v: 610, f: 'test'}]
];

it is working and there are formatted all rows except "item 1". I don't know why, I think there is an error in the google.corechart.

[asgallant]

Your example works exactly as it is supposed to.  The tooltip for "Item 1" says "Votes: 387" while the tooltips for "Item 2" and "Item 3" both say "Votes: test".  What is the problem here?

[Zdenek]

You told, that: The #arrayToDataTable method doesn't support the object-literal syntax (the {v: value, f: "formatted value"} notation).

The formatter has to be supported in #arrayToDataTable, but it is supported in strange way.

This is working:

var table = [
  ['Year', 'Votes'],
  ['item 1',  387],
  ['item 2',  {v: 465, f: 'test'}],
  ['item 3',  {v: 610, f: 'test'}]
];

This not:

var table = [
  ['Year', 'Votes'],

  ['item 1',  {v: 387, f: 'test'}],

  ['item 2',  {v: 465, f: 'test'}],
  ['item 3',  {v: 610, f: 'test'}]
];

That is the problem... If you use the formatter in the first value, corechart gives you the error "Invalid value in 0,1". I mean that is not correct.


Dne pátek, 17. srpna 2012 17:20:19 UTC+2 asgallant napsal(a):

[asgallant]

Ok, I see what you are saying.  I suspect that the API uses the first data row to determine the data type of each column, and for whatever reason, it doesn't work with the object-literal syntax there.  In any case, according to the documentation, the object-literal syntax isn't officially supported, so I would say that getting it to work at all (even limited as you have found) should really be classified as a "bug".

[Zdenek]

I see still one problem in the official documentation

At https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable it is that you told - "The column data types are determined automatically by the data submitted. This method does not support the use of Date or DateTime values, and also does not support use of the JavaScript literal cell object with f or v values: {v: 3.0, f: 'Three'}. If you need to specify custom cell values, or a formatted value, or Date/DateTime value, use DataTable.addRow()/DataTable.addRows() or DataTable.setValue()."

but here https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable there is JSON used in the example (even in the first value):
var data = google.visualization.arrayToDataTable([
  ['Employee Name', 'Salary'],
  ['Mike', {v:22500, f:'18,500'}],
  ['Bob', 35000],
  ['Alice', 44000],
  ['Frank', 27000],
  ['Floyd', 92000],
  ['Fritz', 18500]], false); // 'false' means that the first column is a label column.

So it is hard to say, which official documentation should be prefered :-)

Dne pondělí, 20. srpna 2012 17:32:16 UTC+2 asgallant napsal(a):

[asgallant]

The second part is wrong.  If you try to use that example, it throws an error.

[Zdenek]

And I think, these are the questions for Google - what is wrong? The example or the corechart? And why do you use an example which does not work? Is there anybody from Google, who is able to answer me?

Dne středa, 29. srpna 2012 18:18:01 UTC+2 asgallant napsal(a):

[asgallant]

The example is wrong.  The documentation contains errors in many places - we just have to point them out when they are found.