Format the value in bar chart works only for tooltips

[Jeff Poslinski]

Hi all,

I'm trying to format the value in the bar chart, so far it works only for the tooltips but not the ones displayed in the bar:

Below is my snippet:

var data = google.visualization.arrayToDataTable([

        ['Item', 'Percentage', {role: 'style'}],

        ['Item 1', 0.6721, 'color:#00CCFF'],

        ['Item 2', 0.2295, 'color:#00CCFF'],

        ['Item 3', 0.0984, 'color:#00CCFF']

      ]);

      var formatter = new google.visualization.NumberFormat({pattern: '0.00%'});

      

      var view = new google.visualization.DataView(data);

      view.setColumns([0, 1,

                       { calc: formatter.format(data, 1),

                         sourceColumn: 1,

                         type: "number",

                         role: "annotation" },

                       2]);

Any help would be greatly appreciated.

Regards,

Jeff

[Daniel LaLiberte]

The formatter only adds formatting to the data table column.  It does not return a column to be used by a calc function.

A column with the annotation role uses the *value* as a string in the annotation display.  It would make sense to extend this to also look for a formatted representation and use that instead.   

So what you want is to specify a calc function that returns the getFormattedValue() of column one for the same row.  The calc function takes a datatable and a row as input and a value is expected as output.

calc: function(dt, row) { return data.getFormattedValue(row, 1); }

See https://developers.google.com/chart/interactive/docs/reference#DataTable_getFormattedValue

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/ea794373-f975-4e1b-a577-c4e92eb678dc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Jeff Poslinski]

Hi Daniel,

Thank you for your advice.

Using your suggestion below:

calc: function(dt, row) { return dt.getFormattedValue(row, 1); }

Where should we define the format pattern ?

Thanks,

Jeff

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA

[Jeff Poslinski]

Hi Daniel,

Here's my approach to format the value which works as expected:

var formatter = new google.visualization.NumberFormat({pattern: '0.00%'});

formatter.format(data, 1);

     
var view = new google.visualization.DataView(data);

view.setColumns([0, 1,{ calc: 'stringify', sourceColumn: 1, type: 'string',role: 'annotation'}, 2]);

Not sure if this is the neatest approach. Any suggestion is welcome.

Regards,

Jeff

[Daniel LaLiberte]

The 'stringify' function also calls getFormattedValue internally, so you are doing the same thing as I suggested.  Sorry, I forgot about 'stringify'.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8db1bbf7-b6c2-4a82-9d21-38de9c0c1061%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.