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
Related
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 Gwt Combo Chart, How can I describe java script code in java. I got my result in JS, but I need the result in Java, here my JS code:
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Month','Income', 'Expense','Average'],
['Dec', 100, 200, 150],
['Jan', 400, 100, 250],
['Feb', 150, 350, 250]
]);
var options = {
seriesType: 'bars',
series: {2: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
This is non GWT chart. As I can see - you need some kind of wrapper for that. There is a library for that. It's not maintained now, but still working well enough. Also you can check this topic.
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
How do I set chartArea opacity? Here is a piece of my code... any ideas would be helpful. Thanks!
// Column Chart
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'In Millions'],
['2010', 178.7],
['2011', 211.693],
['2012', 199.3]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"",
width:400, height:400,
colors:['#89a7bf', '#b19237', '#698322', '#bf855d', '#196364', '#CCCCCC', '#D64646', '#8E468E'],
legend: {position: 'bottom', width:"250", textStyle: {fontSize: 10}},
hAxis: {title: "Year"}}
);
}
google.setOnLoadCallback(drawVisualization);
I'm sorry, the option areaOpacity is only available in the following charts:
Visualization: Geochart
Visualization: Area Chart
Visualization: Combo Chart
Visualization: Bubble Chart
Visualization: Motion Chart
Visualization: Stepped Area Chart
For the above charts, google says:
The default opacity of the colored area under an area chart series,
where 0.0 is fully transparent and 1.0 is fully opaque. To specify
opacity for an individual series, set the areaOpacity value in the
series property.