CODEWITHSUNDEEP
javascripthtmlvue.js
DrakoPD
DrakoPD

Reputation: 172

How to use Google Charts with Vue.js library?

I'm trying to make a Chart with Google Charts using Vue.js library, but I don't know how to add to the div.

Here what I'm had tried to do, this is how to add a chart with vanilla javascript (Here the code example of the documentation), I tried to adapt to vue, but nothing happenned:

google.charts.load('current', {'packages': ['corechart']});

Vue.component('line-char', {
    data: function(){
        // Create the data table.
        var data = google.visualization.arrayToDataTable([
            ['Tiempo', 'Temperatura'],
            [1,  1000],
            [2,  1170],
            [3,  660],
            [4,  1030]
        ]);

        // Set chart options
        var options = {
            'title': 'Data Line',
            'width': '100%',
            'height': 250,
            legend: { position: 'bottom' }
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    },
    template: '<div v-model="chart_div"></div>'
});

html:

<div id="component">
    <line-chart></line-chart>
</div>

Upvotes: 4

Views: 6568

Answers (3)

Benjamin Hu
Benjamin Hu

Reputation: 1

wrapper.innerHTML would let you customize the tooltip to be responsive just make sure the DOM is unique, things are properly destroyed to render on the correct component

Upvotes: 0

Anoop Thiruonam
Anoop Thiruonam

Reputation: 2872

As per an update this solution is no longer advisable

A more simple usage would be to use the vue-google-charts plugin

Example code:

  <GChart
    type="ColumnChart"
    :data="chartData"
    :options="chartOptions"
  />

 chartData: [
            ['Year', 'Sales', 'Expenses', 'Profit'],
            ['2014', 1000, 400, 200],
            ['2015', 1170, 460, 250],
            ['2016', 660, 1120, 300],
            ['2017', 1030, 540, 350],
        ],
        chartOptions: {
            chart: {
                title: 'Company Performance',
                subtitle: 'Sales, Expenses, and Profit: 2014-2017',
            },
        },

Upvotes: 1

Phil
Phil

Reputation: 164895

What you'll want to do is use a ref for your <div> and then register a callback to draw the chart in your component's mounted hook.

// Load library
google.charts.load('current', {'packages':['corechart']})

const lineChartOptions = {
  title: 'Data Line',
  width: '100%',
  height: 250,
  legend: { position: 'bottom' }
}

Vue.component('LineChart', {
  template: `<div ref="chart"></div>`, // 👈 set ref here
  data: () => ({
    headings: ['Tiempo', 'Temperatura'],
    chartData: [
      [1,  1000],
      [2,  1170],
      [3,  660],
      [4,  1030]
    ]
  }),
  methods: {
    drawChart () {
      const dataTable = google.visualization.arrayToDataTable([
        this.headings,
        ...this.chartData
      ], false) // 👈 don't forget "false" here to indicate the first row as labels

      const chart = new google.visualization.LineChart(this.$refs.chart) // 👈 use ref here
      chart.draw(dataTable, lineChartOptions)
    }
  }
  mounted () {
    // set the library loaded callback here
    google.charts.setOnLoadCallback(() => this.drawChart())    
  }
})

As mentioned by Matt, if your component's template is truly empty save for a single <div>, you can use the $el property to mount the chart without bothering with refs

Vue.component('LineChart', {
  template: `<div></div>`,
  // ...
  methods: {
    drawChart () {
      // ...
      const chart = new google.visualization.LineChart(this.$el)
      chart.draw(this.dataTable, options)
    }
  }
})

Upvotes: 8

Related Questions