How to use google data-table chart in vuejs project?

Question

How to use google data-table chart in vuejs project?

998 views Asked by Ashikur Rahman Rashid At 15 October 2020 at 16:40

In my vuejs project how to use google data-table chart? Google data-table chart link given below: https://developers.google.com/chart/interactive/docs/gallery/table

I can implement this chart in normal javascript code. But how to use in vuejs code.

Original Q&A

There are 1 answers

**tuhin47** · Answer 1 · 2020-10-16 16:14:51

You can use your own component. Here I have made one simple example.

Vue.component('google-data-table', {
  template: `<div id='app' ref="table_div"></div>`,
  props: {
    columns: {
      type: Array,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }

  },
  mounted() {
    google.charts.load('current', {
      'packages': ['table']
    });
    google.charts.setOnLoadCallback(this.drawTable);
  },
  methods: {
    drawTable: function() {
      var data = new google.visualization.DataTable();
      this.columns.forEach(element => {
        data.addColumn(element.type, element.title);
      });
      data.addRows(this.tableData);

      var table = new google.visualization.Table(this.$refs.table_div);

      table.draw(data, {
        showRowNumber: true,
        width: '100%',
        height: '100%'
      });
    }
  }

});

new Vue({
  el: '#app',
  data: {
    columns: [{
        type: 'string',
        title: 'Name'
      },
      {
        type: 'number',
        title: 'Salary'
      },
      {
        type: 'boolean',
        title: 'Full Time Employee'
      }
    ],
    tableData: [
      ['Mike', {
        v: 10000,
        f: '$10,000'
      }, true],
      ['Jim', {
        v: 8000,
        f: '$8,000'
      }, false],
      ['Alice', {
        v: 12500,
        f: '$12,500'
      }, true],
      ['Bob', {
        v: 7000,
        f: '$7,000'
      }, true]
    ]
  }
});

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>

<body>
  <div id="app">

    <google-data-table :columns='columns' :table-data='tableData' />

  </div>
</body>

</html>

TechQA.

How to use google data-table chart in vuejs project?

There are 1 answers

Related Questions in VUE.JS

Related Questions in VUE-COMPONENT

Related Questions in VUEX

Related Questions in GOOGLE-DEVELOPER-TOOLS

Popular Questions

Popular Tags

Trending Questions