CODEWITHSUNDEEP
javascriptvue.jsgoogle-visualization
Rob
Rob

Reputation: 178

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

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.

Upvotes: 3

Views: 2861

Answers (2)

themrflibble
themrflibble

Reputation: 313

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.

Upvotes: 1

Rob
Rob

Reputation: 178

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>

Upvotes: 5

Related Questions