How to create an organization chart using vue-google-charts

Question

Followed instructions for using vue-google-charts plugin : https://www.npmjs.com/package/vue-google-charts

Want to create an organization chart : https://developers.google.com/chart/interactive/docs/gallery/orgchart

Figured I had to use onChartReady() but not sure how to do it with organization charts.

<template >
  <div class="container">
    <GChart
      type="OrgChart"
      :data="chartData"
      @ready="onChartReady"
    />
  </div>
</template>

<script>
import { GChart } from 'vue-google-charts'


  export default {
    components: {
      GChart
    },
    data () {
      return {
              // Array will be automatically processed with visualization.arrayToDataTable function
        chartData: [
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ],
        options: {allowHtml : true}
      }
    },
    methods: {
          onChartReady (chart, google) {
            var chart = new google.visualization.OrgChart();
            chart.draw(this.chartData, this.options)
          }
      }
  }

</script>

When I run the following code I just get a blank web page with an error saying "Unhandled promise rejection TypeError: "google.visualization[type] is not a constructor".

Think I need to enter something into google.visualization.OrgChart(); but not sure what from the code I have.

Answer 1

To anyone else who is interested in using google charts and the organization chart package. Thanks to WhiteHat for focusing my attention on google charts packages.

You need to use :settings then pass in the orgchart package along with a callback function that calls drawChart(). vue-google-charts has more info on this. So does Google docs on Load the Libraries . Use the following code below to get started.

<template >
  <div class="container">
    <div id="tree">
    <GChart
      :settings="{ packages: ['orgchart'], callback: ()=>{this.drawChart()} }"
      type="OrgChart"
      :data="chartData"

    />
    </div>
  </div>
</template>

<script>
import { GChart } from 'vue-google-charts'


  export default {
    components: {
      GChart
    },
    data () {
      return {
              // Array will be automatically processed with visualization.arrayToDataTable function
        chartData: null
      }
    },
    methods: {
          drawChart() {
            this.chartData = new google.visualization.DataTable()
            this.chartData.addColumn('string', 'Name')
            this.chartData.addColumn('string', 'Manager')
            this.chartData.addColumn('string', 'ToolTip')

            // For each orgchart box, provide the name, manager, and tooltip to show.
            this.chartData.addRows([
              [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
              '', 'The President'],
              [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
              'Mike', 'VP'],
              ['Alice', 'Mike', ''],
              ['Bob', 'Jim', 'Bob Sponge'],
              ['Carol', 'Bob', '']
            ])

                // Create the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('tree'));
            // Draw the chart, setting the allowHtml option to true for the tooltips.
            chart.draw(this.chartData, {allowHtml:true});

          }
      },

  }

</script>

<style>
  table {
      border-collapse: inherit;
      border-spacing: 0;
  }
</style>

Answer 2

I have been using the same Vue package and having trouble setting it up, after quite a bit of trial and error, the vast majority of Charts can be loaded in the following manner...

In the <template>

<GChart
  type="Table"
  :data="chartData"
  :options="chartOptions"
  :settings="{ packages: ['bar', 'corechart', 'table'] }"
  />

The type is where you give the Type of Chart you want (ColumnChart, LineChart, Table).

Doing it this way means the only code you need in Vue's data() is chartData: null where you use axios to retrieve it.

I found this the method with the least extra code.