Develop Reference

Error in rendering dynamic data from api in google charts in javascript

I used google chart library to render charts like bubble chart, trendline. I am fetching json data from api and converting to array and passing it to arrayToDataTable function. For trendline and bubble chart, the div shows error - Data column(s) for axis #0 cannot be of type string
function drawBubbleChart() {
var data = google.visualization.arrayToDataTable(arrays[1]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart2'));
chart.draw(data, options);
}

Google Charts - Pie chart with sub category

I am facing some problem in displaying data in the pie chart.
I have created a jsfiddle to demonstrate my issue.
JSFIDDLE
I am providing the below data:
var data = google.visualization.arrayToDataTable([
['Year','Positive','Negative','Neutral','Comments','Score'],
[ '2010', 74, 26,49,'bad',12345],
[ '2011', 50, 50,13, 'good',78456],
[ '2012', 80, 20,56, 'good',56897],
[ '2013', 40, 60,26, 'good',25789],
[ '2014', 70, 30,60, 'bad',124536],
]);
Question 1
If you look at the jsfiddle, the combo chart (below pie chart) is perfectly displaying, but the pie chart is not displaying the values properly. So is it that the pie chart can display values only from 1 column ? Because even if i pass
'view': {'columns': [0,1,2,3]}
it still takes the value only from column 1.
Question2
From the dropdown, if i select a year, say 2011, still then the pie chart shows value only from column 1. But the combo chart acts fine.
Am i doing something wrong here ?

You're using view wrong. Here's a fiddle that does it:
http://jsfiddle.net/Xhdn3/
And the code:
var view = new google.visualization.DataView(data);
view.setColumns([0,2]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(view, options);

how to remove the y-axis line and format the value of the y-axis in google column chart

Im using google column chart in my application in my chart i need to remove the tiny space between my blue and grey bars and also to format the y axis values. Please suggest me, how to remove that tiny gap between them. My Chart
Code for the chart
google.load("visualization", "1", {packages: ["columnchart"]});
var datum=[];
datum=[[2,15,25]];
var data = google.visualization.arrayToDataTable([['column1', 'column2', 'column3']].concat(datum), false);
var options = {
legend: {position: 'none'},
colors: ['3399FF', 'C0C0C0'],
tooltip: {trigger: 'none'},
// vAxis: {minValue: 0, maxValue: maxValue, ticks: tick, format: '$'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
Updated
How to remove the yaxis line and need to format the y axis value like $10, $15, $30. Is there any way to do that in column chart package. The link i'have refered to do the chart is this

You can add the following to your options object: bar: {groupWidth: '100%'}.
This will remove the gap between your gray and your blue bar.
All options are also listed in the documentation.

First off, don't use the old version of the ColumnChart; it is deprecated and doesn't offer any features that the newer version doesn't also have. Load it like this:
google.load('visualization', '1', {packages: ['corechart']});
To format the axis values, you need to use the vAxis.format option:
var options = {
legend: {position: 'none'},
colors: ['3399FF', 'C0C0C0'],
tooltip: {trigger: 'none'},
vAxis: {
format: '$#'
}
};

Google Chart chartArea Opacity?

How do I set chartArea opacity? Here is a piece of my code... any ideas would be helpful. Thanks!
// Column Chart
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'In Millions'],
['2010', 178.7],
['2011', 211.693],
['2012', 199.3]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"",
width:400, height:400,
colors:['#89a7bf', '#b19237', '#698322', '#bf855d', '#196364', '#CCCCCC', '#D64646', '#8E468E'],
legend: {position: 'bottom', width:"250", textStyle: {fontSize: 10}},
hAxis: {title: "Year"}}
);
}
google.setOnLoadCallback(drawVisualization);

I'm sorry, the option areaOpacity is only available in the following charts:
Visualization: Geochart
Visualization: Area Chart
Visualization: Combo Chart
Visualization: Bubble Chart
Visualization: Motion Chart
Visualization: Stepped Area Chart
For the above charts, google says:
The default opacity of the colored area under an area chart series,
where 0.0 is fully transparent and 1.0 is fully opaque. To specify
opacity for an individual series, set the areaOpacity value in the
series property.

Google Visualization Animation when chart loads for the first time

I would like to know if I can apply an animation to the charts on the first time it draws?
And not only when a change of data happens?
THanks!

UPDATED ANSWER
Google has updated chart options and added the option to animate the chart on the first time it draws.
So the only thing you have to do is psecify it in the options like that:
var options = {
animation: {
duration: 1500,
startup: true //This is the new option
}
};
So you dont have to load an empty chart on the beggining or to do any other hack.
DEMO

The Chart should be rendered before you can apply your animation which is showing transition from one state to another. You can either change the data or change the chart options to create the transition and its animation.
To be able to show animation on the first time, you can simply create an empty (no data) chart, and then add your data to the chart, to show the data animation.
var options = {
animation:{
duration: 1000,
easing: 'out',
}
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
var chart = new google.visualization.ColumnChart...
chart.draw(data, options);
// Adding data
data.addRow(['V', 200]);

Try something like this http://jsfiddle.net/h7mSQ/163/. The way to do this is to render chart with zero values and then set values as required and draw chart again. Don't forget to set minimal and maximal value for (in this example) vertical axis.
function drawChart() {
var option = {title:"Yearly Coffee Consumption in our company",
width:600, height:400,
animation: {duration: 1000, easing: 'out',},
vAxis: {title: "Cups of coffee", minValue:0, maxValue:500},
hAxis: {title: "Year"}};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addRow(['2003', 0]);
data.addRow(['2004', 0]);
data.addRow(['2005', 0]);
// Create and draw the visualization.
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 400);
data.setValue(1, 1, 300);
data.setValue(2, 1, 400);
chart.draw(data, option);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);