How to format numbers in Google API Linechart?

Question

I need to format the numbers in the axis and the numbers that appear when you hover your mouse over the line chart.

Answer 1

If you need to simply format all numbers shown in the graph, in the hover and in the axis according to the locale of a country, the simplest in IMHO is to use the country code when loading the library.

E.g.:

google.charts.load('44', {packages: ['corechart', 'bar', 'sankey'], 'language': 'fr'});

That is the way I would format all numbers using space separators for thousands and a comma for the decimal place.

Answer 2

There are two steps involved. The first step is to find out what pattern you should use; the second step is to put the pattern in the proper place in your code. To make this post more beautiful, I show you step 2 and then step 1.

Step 2: Putting the pattern in your code

Here's the code:

var options = {
        hAxis: {format:'###,###'}
        vAxis: {title: 'Time', format:'0.0E00'},
    };
    var formatter1 = new google.visualization.NumberFormat({pattern:'###,###'});
    formatter1.format(dataTable, 0);
    var formatter2 = new google.visualization.NumberFormat({pattern:'0.0E00'});
    formatter2.format(dataTable, 1);
    var fchartvar = new google.visualization.LineChart(document.getElementById('fchart'));
    fchartvar.draw(dataTable, options);

vAxis: {title: 'Time', format:'0.0E00'} formats the labels on the vertical axis.

This formats the numbers you see when you hover over points on the line chart:

var formatter1 = new google.visualization.NumberFormat({pattern:'0.0E00'});
formatter1.format(dataTable, 1);

Note how (dataTable,0) formats the hAxis information while (dataTable,1) formats the vAxis information (again, which you see when you hover over the points on the line chart).

The last two lines of code:

var fchartvar = new google.visualization.LineChart(document.getElementById('fchart'));
fchartvar.draw(dataTable, options);

are for you two compare with your own chart. Replace fchartvar,dataTable and fchart by the names used in your code. If you're using something other than line chart, replace LineChart with the chart you're using.

An example of 0.0E00 is turning 1,234 into 1.2E03.

Step 1: Finding the right pattern

Google NumberFormat documentation

NumberFormat supports the following options, passed in to the constructor: (source: Google NumberFormat documentation)

decimalSymbol

• A character to use as the decimal marker. The default is a dot (.).

fractionDigits

• A number specifying how many digits to display after the decimal. The default is 2. If you specify more digits than the number contains, it will display zeros for the smaller values. Truncated values will be rounded (5 rounded up).

groupingSymbol

• A character to be used to group digits to the left of the decimal into sets of three. Default is a comma (,).

negativeColor

• The text color for negative values. No default value. Values can be any acceptable HTML color value, such as "red" or "#FF0000".

negativeParens

• A boolean, where true indicates that negative values should be surrounded by parentheses. Default is true.

pattern

• A format string. When provided, all other options are ignored, except negativeColor.

  The format string is a subset of the ICU pattern set. For instance, {pattern:'#,###%'} will result in output values "1,000%", "750%", and "50%" for values 10, 7.5, and 0.5.

prefix

• A string prefix for the value, for example "$".

suffix

• A string suffix for the value, for example "%".

ICU DecimalFormat Reference

As you might have noticed from the Google NumberFormat documentation above, you can find out more detailed information about formatting the numbers from the ICU DecimalFormat Reference. Here is some of the most important information from the ICU DecimalFormat Reference (it's in the 'middle' of the webpage):

A DecimalFormat pattern contains a postive and negative subpattern, for example, "#,##0.00;(#,##0.00)". Each subpattern has a prefix, a numeric part, and a suffix. If there is no explicit negative subpattern, the negative subpattern is the localized minus sign prefixed to the positive subpattern. That is, "0.00" alone is equivalent to "0.00;-0.00". If there is an explicit negative subpattern, it serves only to specify the negative prefix and suffix; the number of digits, minimal digits, and other characteristics are ignored in the negative subpattern. That means that "#,##0.0#;(#)" has precisely the same result as "#,##0.0#;(#,##0.0#)".

The prefixes, suffixes, and various symbols used for infinity, digits, thousands separators, decimal separators, etc. may be set to arbitrary values, and they will appear properly during formatting. However, care must be taken that the symbols and strings do not conflict, or parsing will be unreliable. For example, either the positive and negative prefixes or the suffixes must be distinct for parse() to be able to distinguish positive from negative values. Another example is that the decimal separator and thousands separator should be distinct characters, or parsing will be impossible.

The grouping separator is a character that separates clusters of integer digits to make large numbers more legible. It commonly used for thousands, but in some locales it separates ten-thousands. The grouping size is the number of digits between the grouping separators, such as 3 for "100,000,000" or 4 for "1 0000 0000". There are actually two different grouping sizes: One used for the least significant integer digits, the primary grouping size, and one used for all others, the secondary grouping size. In most locales these are the same, but sometimes they are different. For example, if the primary grouping interval is 3, and the secondary is 2, then this corresponds to the pattern "#,##,##0", and the number 123456789 is formatted as "12,34,56,789". If a pattern contains multiple grouping separators, the interval between the last one and the end of the integer defines the primary grouping size, and the interval between the last two defines the secondary grouping size. All others are ignored, so "#,##,###,####" == "###,###,####" == "##,#,###,####".

Illegal patterns, such as "#.#.#" or "#.###,###", will cause DecimalFormat to set a failing UErrorCode.