Show different suffix in Google Piechart

Question

I have a piechart showing the result the total bandwidth of uplink/downlink.

Right now, they suffix is GB.

I struggling trying to display their suffix different. Example,

Downlink in GB
Uplink in KB.

I have

<script>

google.setOnLoadCallback(drawChart);
function drawChart() {

  console.log(color['downlink']);

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Bandwith'],
    ['Downlink', ({{$t_down_bytes}})],
    ['Uplink', ({{$t_up_bytes}})]
  ]);

  var options = {
    legend: 'buttom',
    pieSliceText: 'value', // text | none
    title: 'Total Bandwith Usage',
    colors: [color['downlink'], color['uplink']],
    width:'100%',
    height: 400,
    slices: {
      1: {offset: 0.1}
    },

  };

  var formatter = new google.visualization.NumberFormat({
    fractionDigits:2,
    suffix: ' GB'
  });

  formatter.format(data, 1);

  var chart = new google.visualization.PieChart(document.getElementById('private'));
  chart.draw(data, options);
}

</script>

I can someone can shed some light on this.

Any hints / suggestions on this will be much appreciated !

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

One way is just doing it yourself: (Correct way to convert size in bytes to KB, MB, GB in Javascript might help)

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Bandwith'],
      ['Downlink', {v:6.4672328, f:"6.46 GB"}],
      ['Uplink', {v:9.40213213, f:"9.40 KB"}]
    ]);

Note that v is the "real" value google uses to draw and f is the formatted value it will show

If you want to keep your google formatter, another way is to add this line after your formatter.format(data, 1);

data.setFormattedValue(1,1,data.getFormattedValue(1,1).replace("GB","KB"))

Which sets the formattedValue of row 1, column 1

Update taking into account you want to use a mix of both:

var data = google.visualization.arrayToDataTable([
  ['Task', 'Bandwith'],
  ['Downlink', $t_down_bytes],
  ['Uplink', $t_up_bytes],
 ]);

var formatter = new google.visualization.NumberFormat({
    fractionDigits:2
});

formatter.format(data, 1);

data.setFormattedValue(0,1,data.getFormattedValue(0,1) + ' {{$t_down_bytes_suffix}}')

data.setFormattedValue(1,1,data.getFormattedValue(1,1) + ' {{$t_up_bytes_suffix}}')

For more info on setFormattedValue and getFormattedValue check

Google Datatable Documentation

edited May 23 '17 at 12:15

Community

1
1

answered Dec 23 '15 at 17:47

juvian

15,875
2
37
38

Thanks, I'll try it now. – code-8 Dec 23 '15 at 17:55
What is this `replace("GB","KB")` do ? – code-8 Dec 23 '15 at 17:55
Well, `formatter.format(data, 1);` sets your formattedValue of your uplink value to '9.40 GB', so I get that value with `data.getFormattedValue(1,1)` and then replace the 'GB' with 'KB' – juvian Dec 23 '15 at 17:58
What if I have `MB`, or `B` ? – code-8 Dec 23 '15 at 18:01
I'm afraid that the `replace()` won't be the solution. – code-8 Dec 23 '15 at 18:01
Then I recommend the first solution, set it yourself according to your need on each cell – juvian Dec 23 '15 at 18:02
Sure, I'll use that then. – code-8 Dec 23 '15 at 18:04
Do you mind take a quick look to my updated code ? I followed your instruction, and still couldn't get the suffix to display. – code-8 Dec 23 '15 at 18:13
Yeah you need to remove the formatter, if not google formatter is overriding the custom values that you set – juvian Dec 23 '15 at 18:14
I still want to keep my `fractionDigits:2`, the rest I can ditch it. – code-8 Dec 23 '15 at 18:15
I update my post showing all the possible try/result that I did/got. – code-8 Dec 23 '15 at 18:18
Have updated my answer. Also, just adding your latest try is enough, no need to go over all of them – juvian Dec 23 '15 at 18:22
Okay. I'll fix my post. – code-8 Dec 23 '15 at 18:23
Got it. You may want to explain this `data.setFormattedValue(0,1,data.getFormattedValue(0,1)` . If you want. Thanks for your help mate. :) – code-8 Dec 23 '15 at 18:26

Show different suffix in Google Piechart

1 Answers1