After following the instructions for using the vue-google-charts plugin here: https://www.npmjs.com/package/vue-google-charts, I wanted to create an organization chart as shown in the example provided by Google Charts here: https://developers.google.com/chart/interactive/docs/gallery/orgchart.
I realized that I needed to use the onChartReady() method, but I was unsure how to implement it specifically for 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 attempting to run the code above, I encountered a blank webpage with an error stating "Unhandled promise rejection TypeError: "google.visualization[type] is not a constructor". It seems like I need to enter something into google.visualization.OrgChart(), but I'm not entirely sure what is missing based on the provided code.