Google chart "K" instead of thousands

Question

I'm using google charts tools (https://developers.google.com/chart/) for displaying data, sometimes my values are really high (100.000+).

My graphs are pretty small in dimensions and 100.000 doesn't fit in, but 100k would. Is there a way I can configure vAxis to display numbers on vAxis in "K" if there are values higher than 10k?

Answer 1

Google Visualization uses a subset of the ICU Decimal Format, which can be set either with a DataView, or with vAxis.format.

Unfortunately, that subset does not include the ability to divide by 1,000. So you will need to manipulate your data first. Let's say this is your data:

  var data = google.visualization.arrayToDataTable([
    ['x', 'Data'],
    ['A', 123456],
    ['B', 234567],
    ['C', 456789],
    ['D', 890123],
    ['E', 789012],
    ['F', 789012],
    ['G', 890123],
    ['H', 456789],
    ['I', 234567],
    ['J', 345678],
    ['K', 345678],
    ['L', 345678],
    ['M', 123456],
    ['N', 123456]
  ]);

We need to clone the data, and then divide each point by 1,000. Here is a simple way to do that:

  var formattedData = data.clone();
  for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
    var dataPoint = formattedData.getValue(i, 1);
    formattedData.setValue(i, 1, dataPoint / 1000);
  }

We can then chart this and set the format as: vAxis: {format: "#,###k"} -- but there's an issue. Now when you mouseover the series, you notice that 890,123 displays as 890.123! This is no good, so we need to fix that by adding another line to the loop:

  var formattedData = data.clone();
  for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
    var dataPoint = formattedData.getValue(i, 1);
    formattedData.setValue(i, 1, dataPoint / 1000);
    formattedData.setFormattedValue(i, 1, dataPoint.toString());
  }

This will make the data look like 890123, but plot as 890.123 so the axis looks nice. If you want to add commas, there are resources like this and this you can use if you'd like. I will not assume to know your data format, so I'll let you figure that part out on your own if you want thousands separators, or decimals, or whatever when you mouseover the chart.

Here is the final working code:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Data'],
    ['A', 123456],
    ['B', 234567],
    ['C', 456789],
    ['D', 890123],
    ['E', 789012],
    ['F', 789012],
    ['G', 890123],
    ['H', 456789],
    ['I', 234567],
    ['J', 345678],
    ['K', 345678],
    ['L', 345678],
    ['M', 123456],
    ['N', 123456]
  ]);

  // Clone data and divide by 1,000 in column 1
  var formattedData = data.clone();
  for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
    var dataPoint = formattedData.getValue(i, 1);
    formattedData.setValue(i, 1, dataPoint / 1000);
    formattedData.setFormattedValue(i, 1, dataPoint.toString());
  }

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(formattedData, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {format: "#,###k"}}
          );
}

Answer 2

Briefly,

options['vAxis']['format'] = 'short';