Vuejs and Easy Pie Chart problem

Hey guys,

I am trying to implementing Easy Pie Chart (http://rendro.github.io/easy-pie-chart/) in one of my projects but I faced a confusing problem!

Here is the scenario:

I pull up my data from database via a Laravel api I wrote and fetch to the view by vuejs method as follow:

JS file:

fetchData: function() {
            this.$http.get('/api/v1/', function(data) {
                this.$set('data', data);
            });

And there is another method in order to instantiate the Easy Pie Chart:


drawCharts: function() {
            $('.chart-dashboard').easyPieChart({
                easing: 'easeOutElastic',
                barColor: '#69c',
                trackColor: '#ace',
                scaleColor: false,
                lineWidth: 20,
                trackWidth: 16,
                lineCap: 'butt',
                animate: false
            });

At the end, when the DOM is ready I call both methods:

 ready: function() {
        this.fetchData();
        this.refreshData();
    }

I will have all my data on the view page except the charts! However, if I call the drawCharts method on something like v-on click on a button it would render the charts!

Screenshot when page loads: http://postimg.org/image/egstvsvqn/

Screenshot when I call the method with v-on: http://postimg.org/image/vl91wg91b/

Does any of you guys see something that I'm missing causing this problem?

thomaskim

10 years ago

Level 41

It's probably because you're drawing the chart before the data is actually fetched. You should draw the chart after the data is fetched. So, I would remove drawCharts from the ready function and change the fetchData function to something like this...

fetchData: function() {
    this.$http.get('/api/v1/', function(data) {
        this.$set('data', data);
        this.drawCharts();
    });
}

hughsaffar

10 years ago

Level 21

@thomaskim That was my first guess too! But it was not that! I event tried to trigger the method by jQuery but get the same result!

What I experience is the method is not working when the DOM element is in v-repeat element.

thomaskim

10 years ago

Best Answer

Level 41

@hughsaffar Try doing something like this then.

fetchData: function() {
    this.$http.get('/api/v1/', function(data) {
        this.$set('data', data);
        this.$nextTick(function() {
             this.drawCharts();
        });
    });
}

Documentation on nextTick here: http://vuejs.org/api/global-api.html

hughsaffar

10 years ago

Level 21

@thomaskim Worked man! Thanks for your help :)

1 like

Please or to participate in this conversation.