Google Pie Charts Label - javascript

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

Related

What should I adjust in google charts code to get rid of some properties? (javascript)

What should I change in google charts code example to get rid of all slice % and leave only % for one slice, and also the column that shows what each colour represents?
Link to google chart - https://developers.google.com/chart/interactive/docs/gallery/piechart#donut
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.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',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
</body>
</html>
I only want the values circled in the image below:

Try changing options to:
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
slices: {
2: { textStyle : {color:'transparent'} },
3: { textStyle : {color:'transparent'} },
4: { textStyle : {color:'transparent'} },
5: { textStyle : {color:'transparent'} },
}
};
This will set slices 2,3,4,5 to a transparent text colour.
Adapted from: https://stackoverflow.com/a/27010671/608312

#JakeSteam this is the code I have so far.. I could 'make transparent' lebel for 'others' but in this case I would like to get rid of '%' so only slice keeps the value and the colour.
<html>
<head>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Metric', 'Score', 'Site'],
['Uniqueness', 6.178, 'https://www.google.com/'],
['', 93.82, 'https://www.bing.com/']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
legend: 'none',
title: 'Unique Identifiability',
pieHole: 0.6,
colors: ['#EE7023', '#808080']
};
var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
window.open(data.getValue(selection[0].row, 2), '_blank');
console.log(data.getValue(selection[0].row, 2));
}
});

Google PieChart - Adding Animation on Creation

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

How to remove number and percentage from tooltip in google chart?

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/

Rails + Javascript + Graph - Javascript doesn't work if I use a variable

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>

Can't convert jsbin demo into fiddle

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>

Categories

Resources