Search code examples
javascriptchartsgoogle-visualizationtreemap

showing the values in google-chart treemap

I have created a Treemap using google charts.
Here is the code:

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
  ['Global',    null,                 0,                               0],
  ['America',   'Global',             20,                               0],
  ['Europe',    'Global',             30,                               0],
  ['Asia',      'Global',             10,                               0],
  ['Australia', 'Global',             40,                               0],
  ['Africa',    'Global',             30,                               0],
]);
tree = new 
google.visualization.TreeMap(document.getElementById('chart_div'));
google.visualization.events.addListener(tree, 'select', function () {
  tree.setSelection([]);
});
tree.draw(data, {
  headerHeight: 15,
  fontColor: 'black',
  showScale: true,
  maxDepth: 2
});
}
</script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

It shows the tree map as: enter image description here

Now, I want to show the values of Market trade volume (size) as well on the treemap (without any action of the mouse). since It has only one layer so directly value can be shown without any calculation. I searched in the documentation but couldn't find anything similar.

Solution

  • a couple assumptions are made here...

    1) you do not want to show the value for Global --> Global(0)
    2) you don't want to modify the values in the data table or how it is loaded

    using object notation, we can provide the value (v:) and the formatted value (f:)

    the chart will display the formatted value, but use the value when determining tree order

    this allows us to change the display without affecting the relationships,
    in case you have data with more than one layer...

    as such, a DataView is used to modify the values
    use the setColumns method to provide a calculated column for the label 

    var view = new google.visualization.DataView(data);
view.setColumns([{
  calc: function (dt, row) {
    var rowValue;

    if (row === 0) {
      rowValue = dt.getValue(row, 0);  // value for global
    } else {
      // change display value by changing formatted value
      rowValue = {
        v: dt.getValue(row, 0),
        f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
      };
    }

    return rowValue;
  },
  label: data.getColumnLabel(0),
  type: data.getColumnType(0)
}, 1, 2, 3]);

    see following working snippet... 

    google.charts.load('current', {
  packages: ['treemap']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
    ['Global',    null,                 0,                                0],
    ['America',   'Global',             20,                               0],
    ['Europe',    'Global',             30,                               0],
    ['Asia',      'Global',             10,                               0],
    ['Australia', 'Global',             40,                               0],
    ['Africa',    'Global',             30,                               0],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      var rowValue;

      if (row === 0) {
        rowValue = dt.getValue(row, 0);  // value for global
      } else {
        // change display value by changing formatted value
        rowValue = {
          v: dt.getValue(row, 0),
          f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
        };
      }

      return rowValue;
    },
    label: data.getColumnLabel(0),
    type: data.getColumnType(0)
  }, 1, 2, 3]);

  var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
  google.visualization.events.addListener(tree, 'select', function () {
    tree.setSelection([]);
  });
  tree.draw(view, {
    headerHeight: 15,
    fontColor: 'black',
    showScale: true,
    maxDepth: 2
  });
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>