The legend on Google charts are appearing vertical when positioned on the right side.
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.5,
};
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>
But, when we position it at the top or bottom, the legends are in single line (horizontal). I tried using CSS to affect that style, but no luck. Need a solution for this. I want to make the legends appear vertical when positioned at the bottom.
I tried alignment: center too. Didn't work!!!
legend: 'bottom', alignment: 'center',
Here is the fiddle for you
Related
I am using a GEO chart from the google API.
I needed to know if the colour of the country boundaries can be changed or not?, which might help me distinguish the countries better depending on the fill colour i selected for the graph.
there are no config options for changing the border color,
but you can change manually, on the chart's 'ready' event.
each country will be drawn with a <path> element.
each <path> element will have a stroke attribute,
which is the border color.
var countries = container.getElementsByTagName('path');
Array.prototype.forEach.call(countries, function(path) {
path.setAttribute('stroke', 'red');
});
see following working snippet...
google.charts.load('current', {
packages: ['geochart'],
mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.GeoChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var countries = container.getElementsByTagName('path');
Array.prototype.forEach.call(countries, function(path) {
path.setAttribute('stroke', 'red');
});
});
chart.draw(data, {
legend: 'none'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
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>
I've look over all the documentation and i cannot find where is specifically documents what type of data to pass to the pie chart to show what slice of a percentage is an amount that still needs work done when considering the pie is a whole of 100%.
Lets say we've got these following task.
1. Database
2. Front end
3. Web Design
Database is 45% done
Front end is 35% done
Web Design is 60 percent done.
I am able to pass percentages and decimals to the data table but I am getting lost when they're passing in number of 1, 3, 2 and so on.
The goal is for investors to see the amount of work left to do in the pie chart, how should i do this by working with decimals or percentages?
I might not be asking the correctly because if the amount of work left to be done when starting at 100% would not work.
How is it that i can display to the investor based on about 10 slices that make up 100% of the work to do, and what data should i pass to this type of pie?
<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([
['Language', 'Speakers (in millions)'],
['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
]);
var options = {
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: { 4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
So, once again i would like to use a pie chart for investors to look at to see an amount of work done.
Here is my fiddler.
Check Fiddler
Pass a variable into the pie chart's data section that represents work not yet completed. You could hardcode this yourself, or use a value that is calculated by subtracting completed work from the total.
E.g.
Database = 45;
Backend = 35;
Web Design = 60;
Work Remaining = 300 - [Database + Backend + Web Design];
You could have its colour in the pie chart set to grey, and leave its name blank.
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart('Database', 45);
drawChart('Front-end', 35);
drawChart('Web Design', 60);
},
packages:['corechart']
});
function drawChart(task, complete) {
var data = google.visualization.arrayToDataTable([
['Task', task],
['Complete', complete],
['Remaining', 100 - complete]
]);
var options = {
title: task,
pieHole: 0.3
};
var container = document.body.appendChild(document.createElement('div'));
var chart = new google.visualization.PieChart(container);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
I'm using the Google Visualisation Material Chart...
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#Material
....and in my example...
http://jsfiddle.net/ETFairfax/78595a3h/
...the Tooltips are rounding the bar values rather than just displaying the values as they are.
I've tried customising the tooltips as documented here : https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content but still no joy.
The documentation does say...
"The Material Charts are in beta."
so maybe I'm fighting a lost cause.
My question:
Does anyone know how to stop the tooltips from rounding?
Any help appreciated.
HTML
<div id="chart_div" style="width: 900px; height: 500px;"></div>
JS Code:
google.load("visualization", "1.1", {
packages: ["bar"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8.5], // Tooltip says 8.5. CORRECT
['Eat', 11.5], // Tooltip says 12 - INCORRECT
['Commute', 2],// Tooltip says 2 - CORRECT
['Watch TV', 0.28],// Tooltip says 0.28 - CORRECT
['Sleep', 7.28] // Tooltip says 7.3 - INCORRECT
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
You must specify a different format:
var options = {
title: 'My Daily Activities',
vAxis : {
format: 'decimal'
}
}
Answer can be found in this link:
here
I want to put google gauge in vertical alignment. This is my javascript code (it's copy paste from google playground)
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('menu2'));
chart.draw(data, options);
}
</script>
And this is my html div
<div id="menu2"></div>
and css
#menu2
{
background-color:#FFD700;
height:570px;
width:150px;
float:right;
}
any idea?
I just added inline style to div in which gauge will load. Ans removed all width height options from script given my google.
Here is the fiddle: http://jsfiddle.net/NB3Eg/
You can play with its html & css here https://code.google.com/apis/ajax/playground/?type=visualization#gauge