How to Style the Google Charts

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

Answers (1)

WhiteHat
WhiteHat

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

Related Questions