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);
}

How to create a Multi Ring Donut chart using Google Chart?

Anybody help me to create a multi ring donut chart using google chart ?
https://developers.google.com/chart/interactive/docs/gallery/piechart#donut
I need like following image with multilevel colors.

This was possible with the Google Image Charts API, which has been deprecated in 2012. It seems to still be up and running, it's just not maintained anymore.
With that API, it was (and still is) possible to create concentric pie charts such as the one below
http://chart.apis.google.com/chart?chd=s:Yr3,ff9&cht=pc&chs=300x200&chxr=0,20,45|1,25,50
which yields the following pie chart
Also you can play with the API and easily create your own pie charts here:
http://www.jonwinstanley.com/charts/
Supporting this kind of concentric Pie chart in the new Google Charts API is still an open issue

I know it's has been a long time ago but here's one way you can do this, using google charts:
But, I removed the subtitles because they interfere in the position of objects, i think it's easier and better if we do our subtitles . Then i just made some drawings e maths to achieve this.
You can control the size and pieHole with 3 variables.
If you need more rings you need to replicate the logic of the first pie hole, but your code will grow kkkk.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
//control is here
let larguraGraficoFora = 400;
let alturaGraficoFora = 400;
let furoGraficoFora = 0.8;
var data = google.visualization.arrayToDataTable([
['Sabor de Pizza', 'Quantidade'],
['portuguesa', 30],
['frango com catupiry', 30],
['calabresa', 30],
['alguma doce', 30],
]);
var options = {
width: larguraGraficoFora,
height: alturaGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
pieHole: furoGraficoFora,
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['c#', 30],
['python', 30],
['javascript', 30],
['sql server', 30],
['php', 30],
]);
var options2 = {
legend:'none',
width: larguraGraficoFora*furoGraficoFora,
height: alturaGraficoFora*furoGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
backgroundColor: 'transparent',
legend: 'none'
};
var chart2 = new google.visualization.PieChart(document.getElementById('donut_2'));
chart2.draw(data2, options2);
ajustePosicaoPieCentral(larguraGraficoFora, alturaGraficoFora, furoGraficoFora);
}
function ajustePosicaoPieCentral(largura, altura, furo){
yt = altura*(1+furo)/2.0;
xt = largura*(1-furo)/2.0;
var css = document.getElementById('donut_2');
css.style.transform = "translate("+xt+"px, -"+yt+"px)";
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_1" ></div>
<div id="donut_2"></div>

hAxis.slantedText or legend repositioning with Google Material Column Charts

SlantedText doesn't seem to work although the classic chart could do that. (This is the feature which rotates the labels on the horizontal axis a little, so they can fit onto the figure even when there are fairly enough columns). Is that something which is not implemented yet in the beta Material Charts, or am I doing something wrong?
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="top_x_div" style="width: 500px; height: 400px;"></div>
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 500,
chart: { subtitle: 'popularity by percentage' },
hAxis: { slantedText: true },
"hAxis.slantedText": true
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));
};
https://jsfiddle.net/csabatoth/cjs3atnp/3/
As you can see I tried multiple ways to set that flag. I just don't want to abandon the Material charts because they look nicer.
Classic charts working:
https://jsfiddle.net/csabatoth/cjs3atnp/4/

Most probably this is still not implemented. Material Charts are in beta. Trend lines are not functional either as of now.
I indicate Material vs Classic only features in my related GitHub repo: https://github.com/MrCsabaToth/GoogleChartsTalk

google stacked bar chart api with two hAxis

I am drawing an stacked bar chart using google api, I want two hAxis for graph (top one in number format and down one in % format). I am using this code for rendering graph.
Can any one suggest how to add top hAxis as number?
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003',1360,1001,1082,1974],
['2004',1556,1649,1150,1495]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
isStacked:true,
hAxes:{0:{title:'Losses in percentage',format:'#,#%'},
1:{title:'Losses in number'}
},
series:{0:{targetAxisIndex:0},1:{targetAxisIndex:1}}
}
);
}
​

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: '$#'
}
};