Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Formatting google charts programmatically

Using the following code how can I set the formatting so that CurrencyValue1 and CurrencyValue2 is shown with a dollar (as a currency value) in the chart?

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'CurrencyValue1');
    data.addColumn('number', 'CurrencyValue2');

    data.addRows(1);
    data.setValue(0, 0, new Date(2011, 8, 12));
    data.setValue(0, 1, 300.0000);
    data.setValue(0, 2, 759.1707);

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

    chart.draw(data, { width: 660, height: 470, title: 'Heading', is3D: true, backgroundColor: '#f5f3e5' });
}
like image 259
Maxim Gershkovich Avatar asked Sep 04 '11 10:09

Maxim Gershkovich


People also ask

How do you change the width and height of a Google Chart?

One very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container <div> element, or in the chart options. If you specify the size in both locations, the chart will generally defer to the size specified in the HTML.


2 Answers

see documentation: http://code.google.com/intl/cs-CZ/apis/chart/interactive/docs/reference.html#numberformatter

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'CurrencyValue1');
data.addColumn('number', 'CurrencyValue2');

var formatter = new google.visualization.NumberFormat(
      {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1);
formatter.format(data, 2);

This will format columns two and three like money (prefixed with dollar sign like "$15.00")

like image 154
Marek Sebera Avatar answered Nov 07 '22 21:11

Marek Sebera


This is perfect format to Brazilian currency:

  var formatter = new google.visualization.NumberFormat({decimalSymbol: ',',groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$ '});
  formatter.format(data, 1);

Works fine whit dollar also, some change the R$ to $

10500.5 stay 10.500,50, more prefix

10500 stay 10.500,00, more prefix

like image 29
overallduka Avatar answered Nov 07 '22 19:11

overallduka