Question

this is pretty straightforward.
This is based on the pie chart example on the google charts playground

Can anyone tell me why this works:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 4],
    ['Eat', {'v':0.,'f':'text 2'}],
    ['Commute', {'v':2,'f':'text 3'}],
    ['Watch TV', {'v':2,'f':'text 4'}],
    ['Sleep', {'v':0.,'f':'text 5'}]
  ]);

  // Create and draw the visualization.
  new google.visualization.PieChart(document.getElementById('visualization')).
      draw(data, {title:"So, how was your day?"});
}

But this doesn’t (added a literal string for “Work” line):

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', {'v':4,'f':'text 1'}],
    ['Eat', {'v':0.,'f':'text 2'}],
    ['Commute', {'v':2,'f':'text 3'}],
    ['Watch TV', {'v':2,'f':'text 4'}],
    ['Sleep', {'v':0.,'f':'text 5'}]
  ]);

  // Create and draw the visualization.
  new google.visualization.PieChart(document.getElementById('visualization')).
      draw(data, {title:"So, how was your day?"});
}

This doesn’t work in the playground nore does it work on my site, When done on my site I will however get the following firebug javascript error:

Error: Invalid value in 0,1
(https://www.google.com/uds/api/visualization/1.0/351cbc565e06280bb093b00ce39323d9/format+en_GB,default,corechart.I.js
)

Thanks in advance, I’m probably missing something really obvious

Answer 1

I’ve resolved this issue, I’ve gotten the following response from another forum and have used a workaround:

That is because the arrayToDataTable method does not support the use
of the {v: value, f: “formatted value”} object. I have extrapolated
that the method derives the column types from the first row of data,
and was not written to handle object entry. Subsequent rows are
likely added via the addRows method (or something like it), thus the
object entry works there. If you want to enter your data like that,
you will have to explicitly define your DataTable columns and then use
the addRows method.

The workaround is to create a bogus entry and set the value to 0 like follows:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Bogus',0],
    ['Work', {'v':4,'f':'text 1'}],
    ['Eat', {'v':0.,'f':'text 2'}],
    ['Commute', {'v':2,'f':'text 3'}],
    ['Watch TV', {'v':2,'f':'text 4'}],
    ['Sleep', {'v':0.,'f':'text 5'}]
  ]);

  // Create and draw the visualization.
  new google.visualization.PieChart(document.getElementById('visualization')).
      draw(data, {title:"So, how was your day?"});
}