Is Google Charts tree map supported in angular-google-chart?

Question

I am using angular-google-chart as part of a MEAN stack. I would like to add a Google Charts tree map, but I don't get anything on the page.

I tried the following:

     chart: {
      'type': 'TreeMap',
      'displayed': true,
      'data': {
        'cols': [
          {
            'id': 'sitename'
          },{
            'id': 'quantity'
          },{
            'id': 'state'
          }
        ],
        'rows': [
          {
            'c': [
               {
                'v': 'Section 1'
              },{
                'v': '50000'
              },{
                'v': '2'
              }
            ]
          },{
            'c': [
               {
                'v': 'Section 2'
              },{
                'v': '2500'
              },{
                'v': '0'
              }
            ]
          }
        ]
      },
      'options': {
        backgroundColor: { fill:'transparent' }
      },
    formatters: {}
    }

Any thoughts?

Answer 1

Found out that treemap requires a parent column and a parent row. The following example resolved the issue"

myChart = {
  type: 'TreeMap',
  displayed: true,
  data: {
    cols: [{
      id: 'sitename',
      type: 'string'
    }, {
      id: 'parent',
      type: 'string'
    }, {
      id: 'quantity',
      type: 'number'
    }, {
      id: 'state',
      type: 'number'
    }],
    rows: [
      {
      c: [{
        v:'all'
      }, {
        v:null
      }, {
        v:0
      }, {
        v:0
      }]
    }, {
      c: [{
        v: 'Segment 1'
      }, {
        v: 'all'
      }, {
        v: 50000
      }, {
        v: 3
      }]
    }, {
      c: [{
        v: 'Segment 2'
      }, {
        v: 'all'
      }, {
        v: 2500
      }, {
        v: 0
      }]
    }]
  },
  options: {
    backgroundColor: {
      fill: 'transparent'
    },
    minColor: '#f00',
    midColor: '#ddd',
    maxColor: '#0d0',
    noColor: '#FF0000',
    fontColor: 'black',
    showScale: true,
    showTooltips: false
  }
}

Also setting the 4th column to null will pass the color set in noColor. Got help from Balrog30 here:

https://github.com/angular-google-chart/angular-google-chart/issues/168