Adding the £ symbol to the tooltip

[Dean Williams]

I have tried and failed

<TD colspan=2>

      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">

      google.charts.load('current', {'packages':['corechart'], 'language': 'en-gb'});

      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {

        // Some raw data (not necessarily accurate)

        var data = google.visualization.arrayToDataTable([

          <?php include("Data_06_15_6.php"); ?>

        ]);

  var formatter = new google.visualization.NumberFormat({

    prefix: '£',

    negativeParens: true

  });

        var options = {

          title : 'Totals by Paddock for <?php echo $farm_name; ?>',

          titleFontSize:30,

          fontName: 'tahoma',

          fontSize: '16',

          format: "currency",

          prefix:"£",

          width:780,

          height:520,

          vAxis: {title: '', format: '£#,##0.00;(£#,##0.00)', prefix:"£", fontSize: '24'},

          hAxis: {format: 'currency', prefix:"£", fontSize: '24'},

          seriesType: 'bars',

          //series: {5: {type: 'line'}}

        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

        chart.draw(data, options);

      }

    </script>

    <div id="chart_div"></div>

  </TD>

[Dean Williams]

[Dean Williams]

How do I format the value to be a currency £

so it reads Fertilizer £14,325.60 

[Ray Thomas]

How this works is going to depend on what your data looks like when you import it. Is it a simple value or has it already been formatted in some way?

Google Charts data tables, like most spreadsheets, can hold two values, the actual underlying value and the formatted value. The dataTable has several methods or reading and writing these values see get and set in the documentation at https://developers.google.com/chart/interactive/docs/reference#methods

The easiest method I found is to simply loop through the data and change the formatting. The data I used as an example comes from the spreadsheet at https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/#gid=299043339 and that's formatted as a number to two decimal places with the thousands comma.

The important part of the code is to loop through the cells of the data table, in my example table2, and reformat the formatting:

var totalRows = table2.getNumberOfRows(); 

var totalCols = table2.getNumberOfColumns();

for (i = 0; i < totalRows; i++) { 

   // No need to do Column 0 as that's the row label not data

   for (j = 1; j < totalCols; j++) {

      var thisValue = table2.getFormattedValue(i, j);

  thisValue = "£" + thisValue;

  table2.setFormattedValue(i, j, thisValue);

   }

}

I wrote a page to demonstrate it working at http://brisray.com/google-charts/formattips.htm

There is another way of doing this and that's by completely rewriting the tooltips - https://developers.google.com/chart/interactive/docs/customizing_tooltip_content but that's going to be a lot more work. In my simple example there are seven columns of data, using this tooltips method, another seven would have to written.