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
Related
I have seen a lot of answers on the web for this question but everybody have answered in a different way. They have answered with examples of code 90+ lines of code so it's hard to understand the method for applying formats. Can somebody please explain the method of applying formats in google charts and there are different methods for different types of charts? I need to apply the formats on bar charts and donut charts. I want to change format to currency and decimals.
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Marketplaces', 'Number Of Orders','Value of Order'],
var chart = new google.visualization.PieChart(document.getElementById('sales_total_quantity'));
chart.draw(data, options);
}
in order to format the chart values, as shown when the bar or pie slice is hovered,
you need to apply a format to the data table.
you can use google's number formatter.
var patternCurrency = '$#,##0.00';
// format third column of data table
var formatCurrency = new google.visualization.NumberFormat({
pattern: patternCurrency
});
formatCurrency.format(data, 2);
if you also want the y-axis of the bar chart to show as currency,
you need to use config option --> vAxis.format
var optionsBar = {
// format y-axis
vAxis: {
format: patternCurrency
}
};
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Marketplaces', 'Number Of Orders', 'Value of Order'],
['A', 10, 100.11],
['B', 20, 200.22],
['C', 30, 300.33],
]);
var patternCurrency = '$#,##0.00';
// format third column of data table
var formatCurrency = new google.visualization.NumberFormat({
pattern: patternCurrency
});
formatCurrency.format(data, 2);
var optionsBar = {
tooltip: {
trigger: 'both'
},
// format y-axis
vAxis: {
format: patternCurrency
}
};
var chartBar = new google.visualization.ColumnChart(document.getElementById('chart-bar'));
google.visualization.events.addListener(chartBar, 'ready', function () {
// show tooltip
chartBar.setSelection([{column: 2, row: 0}]);
});
chartBar.draw(data, optionsBar);
var optionsPie = {
height: 300,
pieHole: 0.2
};
var chartPie = new google.visualization.PieChart(document.getElementById('chart-pie'));
chartPie.draw(data, optionsPie);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-bar"></div>
<div id="chart-pie"></div>
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
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>
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