Develop Reference

Google Charts data from Google Spreadsheet

I want to create a timeline chart by using Google Spreadsheet. I have written the datas in a spreadsheet although when i try to run it, doesnt work.
Here is my jsfiddle
I want my spreadsheet to be pulled as data, i have made a spreadsheet although from the google dev links i followed, mine doesnt work.
Also here is the code
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="chart_div" style="height: 400px; width: 800px;"></div>
<script type="text/javascript"> </script>
google.charts.load('current', {
packages: ['timeline']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1RslSoJjk25ZbBwitHnY16VI39dWRK8OkkfnCv-ubUqY/edit?usp=sharing");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var container = document.getElementById('timechart');
var chart = new google.visualization.Timeline(container);
var options = {
//1st is (G4.5), 2nd is (G2), 3rd is, (G3), 4th is (G3.1), 5th is (G3.2)
//!!ONLY WHEN THERE ARE 5 BARS, OTHERWISE IT MIgHT CHANGE!!
colors: ['#113477', '#C0C0C0', '#adc6e5', '#72aae4', '#518cc2', '#4A7FB0'],
timeline: {
rowLabelStyle: {
fontName: 'Arial',
fontSize: 20,
color: '#0000'
},
barLabelStyle: {
fontName: 'Times New Roman',
fontSize: 22
}
},
'width': 2650,
'height': 900,
avoidOverlappingGridLines: false,
alternatingRowStyle: false,
backgroundColor: '#FFFFFF'
};
chart.draw(data, options);
}

Google Visualization Pie Chart text anchor issue and text cut off

I am using google pie charts, all is working fine but legend label on right side is cut off.
there is also no option in google API to control these labels. here is documentations
https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options
for whiteHat
please see here are images..
1st with hide div
and a div not hide...

the legend would normally wrap, see following working snippet,
using the options shown in the attached image
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var data = google.visualization.arrayToDataTable([
['Education', 'People'],
['less than high school', 10],
['high school', 10],
['college associate', 10],
]);
var options = {
width: '470',
height: '450',
chartArea: {
width: '80%',
height: '80%',
left: 100,
},
pieSliceTextStyle: {
color: 'white',
fontSize: '17.5'
},
colors: ['#90c458', '#ff7f66', '#ffce55', '#52c2e8']
};
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google pie chart single value

I am using a Google Pie Chart and have a problem modifying it. After many complicated calculations I get a percentage value, say 67%. I want that single percentage value to be shown in pie/donut chart.
My HTML code is
<div id="chart_div"></div>
My Javascript code is
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Value'],
['Foo', 67]
]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
pieHole: 0.5,
pieSliceTextStyle: {
color: '#000000'
}
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
You can have a look here http://jsfiddle.net/asgallant/mx03tcx5/
How do I make the graph cover up only 67% of the pie instead of 100%, since I am only providing a single value. Is there any other way to achieve this..

add this
slices: {
1: { color: 'transparent', textStyle : {color:'transparent'} }
}
to the same scope with pieSliceTextStyle. And
add
['', 33]
after ['Foo', 67].
For more info you can check this : Google Developers
After modification :
chart.draw(data, {
height: 400,
width: 600,
pieHole: 0.5,
pieSliceTextStyle: {
color: '#000000'
},
slices: {
1: { color: 'transparent', textStyle : {color:'transparent'} }
}
});
var data = google.visualization.arrayToDataTable([
['Category', 'Value'],
['Foo', 67],
['', 33]
]);
if you want to check it in jsfiddle http://jsfiddle.net/4oxbnmqr/

IE8 error on GoogleChart redraw function

I am using the Google Charts API to draw several ComboCharts utilizing the arrayToDataTable routine. Everything loads fine but an error occurs (in IE8 only) if I try to redraw any of the charts.
I first noticed this when triggering a redraw of the charts using JQuery's $( window ).resize but the issue is present even if I just execute two back-to-back chart.draw functions.
Any ideas...
What is causing this error?
How can I fix it?
Script Error from IE8 (repeated multiple times):
format+en,default+en,ui+en,corechart+en.I.js
Here is sample code that will reproduce the error in IE8. Resize the window to trigger the error:
<html>
<head>
<title>Graph Test</title>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var opt = {
legend: { position: 'none' },
axisTitlesPosition: 'none',
enableInteractivity: 'false',
hAxis: {textPosition: 'none'},
vAxis: {textPosition: 'none', maxValue: 11, minValue: 6, gridlines: {color: 'transparent'}, baselineColor: 'transparent'},
lineWidth: 1,
bar: {groupWidth:'75%'},
seriesType: "bars",
series: {1: {type: "line"}},
chartArea: {'width': '90%', 'height': '90%'},
colors: ['#4D8C8C', '#a7a7a7'],
backgroundColor: '#d3eeee'
}
var myArray = [
['ID', 'Value', {role: 'style'}, 'Rec', {role: 'certainty'}],
[1, 8, '#FF0000', 10, false],
[2, 7, '#FF0000', 10, false],
[2, 10, '#FF0000', 10, false]
];
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){drawChart(myArray,opt)});
function drawChart(arr,opt) {
data = google.visualization.arrayToDataTable(arr);
chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, opt);
}
$(document).ready(function() {
$( window ).resize(function() {
drawChart(myArray,opt);
});
});
</script>
</head>
<body>
<div id="chart_div" style="width: auto; height: 50px;"></div>
</body>
</html>

Instead of creating a new chart object each time, try redrawing the existing one:
function drawChart(arr,opt) {
data = google.visualization.arrayToDataTable(arr);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, opt);
$( window ).resize(function() {
chart.draw(data, opt);
});
}

Google Chart Bar Blue to White

I' am using Google Chart. I was searching on Google and found some API options to set in to get the color of the bar from default blue to white. This is what I have added into the option parameters:
Someone said that this will only work if you want more then one color of bars
colors: '#FFF'
This is also what I tried. Saw this somewhere so thought to apply it.
color: '#FFF'
For some reason its not working as wanted. Here's my javascript code in placed.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Current Demand'],
<?php echo $data; ?>
]);
var options = {
width: 350,
height: 261,
isStacked: true,
legend: 'none',
backgroundColor: {
fill:'transparent'
},
hAxis: {
title: '',
titleTextStyle: {color: 'white'
},
colors: '#FFF'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Am I missing something?

Colors need to be put into a javascript array.
colors: ['#fff']