I know it sounds weird but this demo http://jsbin.com/ixUzURUB/1/edit I can't convert it into http://jsfiddle.net/jhb2L/ What am I doing wrong? Thanks.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
JSFiddle have problems when you add external resources that doesn't end in .js it seems. Added a ?fake=.js to the path and it worked. Also removed the window.onload = function() {}; that JSFiddle adds and now it seems to be working.
http://jsfiddle.net/jhb2L/3/
Try pasting this code it should work :
<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([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
Related
I have data in my database. Let's say that I have all these for now:
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
DataBase table:
MyDailyRoutineTable
Task Hours per Day
Work 8
Eat 2
Commute 2
Watch TV 2
Sleep 7
//Do Chores 2 //eventually added
//Exercise 1 //eventually added
I want to be able to add more data from my database if later I decide to put something like 'Do chores' and 'Exercise' I want to read all the values directly from the database which would later be (dynamically filled from data in MyDailyRoutineTable):
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7],
['Do Chores', 2],
['Exercise', 1]
instead of:
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
it should be something like:
var data = google.visualization.arrayToDataTable([
{database data}
]);
The last 2 are not accounted for in the jsfiddle. What I want to know is how to read those from a mysql database and add them to the chart.
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
Basically to achieve what you want, you will need to configure php scripts in your backend that will output data in JSON format. You can either send non-google-charts-compliant JSON, and then parse it in your front-end and build your charts, OR you can use google.visualization.arrayToDataTable() method on a google-chart compliant JSON. See link below. Having played around with google charts for quite some time, I would seriously recommend sending google-compliant JSON. Even if it's tedious and can take quite some time, you offload a lot of the calculations server-side and you gain abstraction.
Google Chart JSON format
Building array and formatting JSON for Google Charting API
I want to create a Google Pie Chart.
What I want to have is have a fancy animation on creating the chart when the page first loads. What I have tried is this:
<html>
<head>
<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([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
animation:
{
duration: 1000,
easing: 'in',
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
More specifically, it is:
animation: {
duration: 1000,
easing: 'in',
}
But it is not working.
Can anyone help me please?
animation is not supported on Pie charts
see Valid Chart Types in the table under supported-modifications
I am trying to change tooltip value in google chart. I want to show only text field inside tooltip in my chart. But when I mouse hover on my chart it shows number and percentage. More clearly, (From image) I want to show only "Sleep" not the "7(29.2%)".Please share with me if any one have any idea.
My Jsfiddle link: http://jsfiddle.net/1c3atn9z/1/
My codes are below:
<html>
<head>
<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([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
Image:
No standard way to do it, you can only choose slice text. You could do a workaround this way though:
var options = {
title: 'My Daily Activities',
is3D: true,
tooltip: { isHtml: true }
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'onmouseover', function(hover){
if(hover){
$('.google-visualization-tooltip-item:eq(1)').remove() // remove the other info
}
})
chart.draw(data, options);
Be sure to add the tooltip: { isHtml: true } for it to work
Here is working fiddle: http://jsfiddle.net/juvian/1c3atn9z/2/
I'm using the google charts for show some graphs in my rails app.
I get a code example in internet and I'm testing in my app, but I'm with some dubs and I don't know why it's not working.
In a view, I put this code below:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
This show the graph correctly, but I if I pass a variable, didn't work, like that:
<% #test = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
] %>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(<%= #test %>);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
This code don't show nothing, why?
Ps1: Sorry for English, I'm learning yet =]
this-
<% #test = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
] %>
just outputs as text into the html
if the variable is coming from the controller then;
<script type="text/javascript">
var test = <%= #test %>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(test);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
http://j1309.hizliresim.com/1f/v/t1ux0.png
Thats my chart and my code;
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
how can i make my labels like that picture. i want it shows values outside of chart
http://o1309.hizliresim.com/1f/v/t1uy7.png
Use in your options:
var options = {
title: 'My Daily Activities',
legend: {position: 'labeled'}
};
More Information here:
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart