Reputation: 6741
I am attempting to add and lightly style items to the Gauge Chart from Google Charts but I cannot find anything that has any documentation about this.
Can someone give me a link on how to style this Gauge Chart.
Basically the last think I need to do is add a K at the very bottom of my Gauge.
Example is shows numbers at the bottom so I am representing dollars so I am appending a K at the end of the number when the Gauge loads.
I know this can be done through CSS3 along and JS but I am have Issues with one lonely item.
It is the bottom most number, AKA
Here is the code:
google.charts.load('current', { 'packages': ['corechart', 'timeline', 'gauge'] });
google.charts.setOnLoadCallback(drawGaugeAmountReceivedChart);
function drawGaugeAmountReceivedChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Invested', 285]
]);
var options = {
width: 1000, height: 480,
redFrom: 125, redTo: 285,
yellowFrom: 40, yellowTo: 125,
min: 0,
max: 285,
minorTicks: 20
};
var chart = new google.visualization.Gauge(document.getElementById('gaugeAmountReceivedChart'));
chart.draw(data, options);
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
var txtElements = document.getElementById('gaugeAmountReceivedChart').getElementsByTagName('text');
for (var i = 0; i < txtElements.length; i++) {
if (txtElements[i].hasAttribute('text-anchor')) {
var xx = txtElements[i].getAttribute('text-anchor');
switch (xx) {
case 'start':
txtElements[i].textContent = 0 + 'k';
break;
case 'middle':
//tied everything in the book
break;
case 'end':
txtElements[i].textContent = 285 + 'k';
break;
};
};
}
chart.draw(data, options);
};
HTML
<div id="gaugeAmountReceivedChart" style="float:left; width: 1000px; height:500px;"></div>
To make things even better if this chart had tool tips and a legend. Anyone with experience with this would be awesome!
Or maybe someone has a different chart recommendation for me?
Upvotes: 2
Views: 831
Reputation: 61212
use object notation to provide initial value...
{v: 285, f: '285k'}
use setCell
to provide new value / formatted value,
see following working snippet...
google.charts.load('current', {
callback: drawGaugeAmountReceivedChart,
packages: ['corechart', 'timeline', 'gauge']
});
function drawGaugeAmountReceivedChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Invested', {v: 285, f: '285k'}] // <-- use object notation to provide formatted value
]);
var options = {
width: 1000, height: 480,
redFrom: 125, redTo: 285,
yellowFrom: 40, yellowTo: 125,
min: 0,
max: 285,
minorTicks: 20
};
var chart = new google.visualization.Gauge(document.getElementById('gaugeAmountReceivedChart'));
chart.draw(data, options);
// use setCell to provide formatted value
data.setCell(0, 1, 40 + Math.round(60 * Math.random()), (40 + Math.round(60 * Math.random())) + 'k');
var txtElements = document.getElementById('gaugeAmountReceivedChart').getElementsByTagName('text');
for (var i = 0; i < txtElements.length; i++) {
if (txtElements[i].hasAttribute('text-anchor')) {
var xx = txtElements[i].getAttribute('text-anchor');
switch (xx) {
case 'start':
txtElements[i].textContent = 0 + 'k';
break;
case 'middle':
//tied everything in the book
break;
case 'end':
txtElements[i].textContent = 285 + 'k';
break;
};
};
}
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="gaugeAmountReceivedChart"></div>
Upvotes: 1