Labels column issues?

eoionline

unread,

Oct 4, 2011, 6:48:35 PM10/4/11

to Google Visualization API, al...@eoionline.org

Hi,

I don't know if changes have been made recently to the Visualization,
but many of the charts and graphs I had set up using Google
visualization are now rendering differently, and it appears to be a
problem recognizing the "hasLabelsColumn" tag, or perhaps the
'headers' tag in the URL. Also, I just changed the vAxis tag sitewide
to update the % tag to the new format (I created this about a year
ago). Here's an example:

For this page: http://stateofworkingwa.org/poverty.htm

Clearly, that line graph is now incorrect - it is drawing info from
this Google Doc (https://docs.google.com/spreadsheet/ccc?
key=0Al3deEsqJkrrdE9mN2Y0LUNEX3BQcWlwdjJ2Nk5qenc&hl=en_US#gid=0), and
until recently displayed just fine.

Here's the code:

<head>
<script type="text/javascript">
google.load("visualization", "1", {packages:
["corechart"]});
google.setOnLoadCallback(initialize);
function initialize() {
var query = new google.visualization.Query('https://
spreadsheets.google.com/tq?
key=0Al3deEsqJkrrdE9mN2Y0LUNEX3BQcWlwdjJ2Nk5qenc&range=A2%3AC12&gid=0&transpose=0&headers=1&pub=1');
query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new
google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data,
{
legend:"right",
displayAnnotations:true,hasLabelsColumn:true,vAxis: {textPosition:
'none',},
title: "Percentage of People Living in Poverty, United States
and Washington, 2009",
pointSize:4, hAxis: {slantedText:true,}, vAxis: {format:
'#0.00%',},
width: 650, height: 400,});/*smaller width
than other because x-axis labels stack when chart is 640px*/
}
</script>
</head>
<body>
<div id="visualization" title="Percentage of People Living in Poverty,
United States and Washington" style="width: 650px; height: 400px;"></
div>
</body>

I'd really appreciate some help with this issue.

Thank you,

Alex

asgallant

unread,

Oct 5, 2011, 10:31:21 AM10/5/11

to google-visua...@googlegroups.com, al...@eoionline.org

I'm not quite sure why, but if you set the new strictFirstColumnType option to true, your chart renders correctly.

eoionline

unread,

Oct 5, 2011, 12:27:32 PM10/5/11

to Google Visualization API

Sure enough. I set strictFirstColumnType to true and also had to
change the hAxis format to '####' so the "Year" date displayed
correctly. It seems the inherited property is '#,###'.

Thanks for the help - I'm now subscribed to release updates so I
shouldn't be so surprised next time.

eoionline

unread,

Oct 5, 2011, 1:54:41 PM10/5/11

to Google Visualization API

Ok - that fix works fine on the LineChart, but not for ColumnChart.
When i add strictFirstColumnType to the ColumnChart, it simply does
not display. I'm doin some reading on the release notes, but haven't
been able to work out a solution. Any help is much appreciated. Here's
an example:

For this page: http://stateofworkingwa.org/features/fadingmiddleclassdream/education/tuition-fees.htm

the column chart should display like this:
https://docs.google.com/spreadsheet/ccc?key=0Al3deEsqJkrrdFN5MTlib0tEbEhuSnVrcnpJSi1kVEE&hl=en_US#gid=0

However, when I add the strictFirstColumnType to the code, the chart
breaks. Code is below:

key=0Al3deEsqJkrrdFN5MTlib0tEbEhuSnVrcnpJSi1kVEE&transpose=1&headers=1&range=A2%3AE4&gid=0&pub=1');

query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new

google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(data,
{
legend:"bottom",
displayAnnotations:true,hasLabelsColumn:true,vAxis:
{format:'#0.00%',},
title: "Tuition and Fees as a Percentage of State Median
Household Annual Income, 1991-2010",
pointSize:4, maxAlternation:1, allowCollapse:true,

width: 650, height: 400,});/*smaller width
than other because x-axis labels stack when chart is 640px*/
}
</script>

asgallant

unread,

Oct 5, 2011, 2:35:10 PM10/5/11

to google-visua...@googlegroups.com

Setting strictFirstColumnType = true for the bar, column, pie, scatter, combo (with bars), and candlestick charts enforces the rules on data type for the first column. All of these charts specify a string value in the first column, though they have worked with non-string values in the past (though this was undocumented and not officially supported). This option was introduced to allow developers to test their charts against the new requirements, which will require strict adherence to the spec. Since your data returns a number for the first column, not a string, setting this option to true would cause the chart to fail. The way to get around the problem with your data is to translate the first column into a string using a DataView and then draw the chart using the view:

var view = new google.visualization.DataView(data);
view.setColumns([{
  calc: function(data, row) {
  return data.getFormattedValue(row, 0);
  },
  type:'string'
  },
  1,
  2
]);
chart.draw(view, <options>);

Incidentally, the displayAnnotations option is applicable to the Annotated Timeline charts only. I don't know where you are getting the hasLabelsColumn option from, but it's not in any of the charts insofar as I am aware.

Jinji

unread,

Oct 5, 2011, 3:06:21 PM10/5/11

to google-visua...@googlegroups.com

The hasLabelsColumn was an internal hack used by some Google products to change chart behavior. In the last release we removed it, so it caused you these problems. I wonder where did you hear of this option. Anyway, it's no longer exist, so you can remove it from your code.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/5ZF-Gjrq6-sJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

eoionline

unread,

Oct 5, 2011, 4:48:26 PM10/5/11

to Google Visualization API

I see. Might be easier to simply embed Google's "Publish" script so I
don't have to make big changes every time they release an update...

Thanks to both of you for your help!

Jinji

unread,

Oct 6, 2011, 1:09:43 PM10/6/11

to google-visua...@googlegroups.com

Can you please elaborate?

What do you mean by "Publish script"? Who is "they" in "every time they release an update"?

eoionline

unread,

Oct 7, 2011, 12:52:25 PM10/7/11

to Google Visualization API

If you looked at the script I pasted in the above, it is different
from Google's "Publish" script when working from google docs. As I
have all of my chart/graph data saved in Google docs, I can just
create the charts in the docs, click publish, copy the code and paste
it into the page - instead of defining each chart/graph as i did in
<head> tags. That way, when "they" (Google viz programmers and
engineers) update the release and add new configuration options (like
strictFirstColumnType), it will be more simple to make changes.

Jinji

unread,

Oct 9, 2011, 9:31:38 AM10/9/11

to google-visua...@googlegroups.com

Publishing a chart from Google Docs should still work. It looks like the code you pasted above is not a "publish" script - it's a direct usage of the Javascript API. When using the Javascript API, one should adhere to the Javascript API documentation (which doesn't contain a hasLabelsColumn option). Can you please check the publish script itself?

Reply all

Reply to author

Forward