how to redraw chart on window resize

[litan1106]

how to redraw chart on window resize

[haydenbbickerton]

Hmm. Good question. Right now, vue-charts doesn't expose the actual chart object or it's methods in a meaningful way, but it should.

In the meantime, you can call the drawChart() method by using the v-ref functionality. It's a bit hacky:

<vue-chart
    :columns="columns"
    :rows="rows"
    :options="options"
    v-ref:thisherechart
></vue-chart>

And then in the Vue instance:

var yoyo = new Vue({
  el: 'app',
  data: function () {
    return {
      columns: [{
        'type': 'string',
        'label': 'Year'
      }, {
        'type': 'number',
        'label': 'Sales'
      }, {
        'type': 'number',
        'label': 'Expenses'
      }],
      rows: [
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 660, 1120],
        ['2007', 1030, 540]
      ],
      options: {
        title: 'Company Performance',
        hAxis: {
          title: 'Year',
          minValue: '2004',
          maxValue: '2007'
        },
        vAxis: {
          title: '',
          minValue: 300,
          maxValue: 1200
        },
        height: 500,
        curveType: 'function'
      }
    }
  },
})

jQuery(window).resize(function () {
  yoyo.$refs.thisherechart.drawChart();
});

Thanks for bringing this to my attention, I'll try and make sure the next release has something to make tasks like this easier.

[litan1106]

I tried this method but I got an error.

Uncaught TypeError: Cannot read property 'drawChart' of undefined

[haydenbbickerton]

You have to use the Child Component Ref for the vue-charts component, then call drawChart() on it. In the example above I called it thisherechart, but you can call it whatever you want.

[lukpep]

How to achive this with single file components?

jQuery(window).resize(function () {
  this.$refs.thisherechart.drawChart();
})

I've tried using this

build.js:24454 Uncaught TypeError: Cannot read property 'thisherechart' of undefined

or $this

build.js:24454 Uncaught ReferenceError: $this is not defined

[haydenbbickerton]

In the example I gave, I assigned my Vue component to the yoyo variable by doing this:

var yoyo = new Vue({
    ...
});

And then I used the yoyo variable to call $refs below it:

jQuery(window).resize(function () {
  yoyo.$refs.thisherechart.drawChart();
});

You have to call it on the Vue instance. You should still be able to declare it within the component. Can you paste the script portion of your single file component?

[lukpep]

I don't create vue object explicitly so I cant gave it a name.
link to my component .vue file:
http://pastebin.pl/view/69bb9cb0

[haydenbbickerton]

Ahh, I see. Try putting the jQuery part inside of your ready function instead (or make a trigger resize method with it and call on ready, doesn't matter), you should be able to do it using this.$refs.whateverthenameis.drawChart().

[lukpep]

no success:

ready: function() {
    this.getChartData();
    jQuery(window).resize(function () {
      this.$refs.thisherechart.drawChart();
    })
  },

build.js:24508 Uncaught TypeError: Cannot read property 'thisherechart' of undefined

[lukpep]

ready: function() {
    this.getChartData();
    var self = this;
    jQuery(window).resize(function () {
      self.$refs.thisherechart.drawChart();
    })
  },

works fine.
It's my first ever front-end attempt and first time with java-script. Sorry for probably stupid questions ;)

[haydenbbickerton]

No, not stupid at all! Glad you got it figured out :)