Answer a 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.

Answers

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>