Load ChartJS via VueJS - ChartJS empty and 0px dimension

Question

Alright, so I am trying to create a ChartJS instance via VueJS so that I could easily update its data via AJAX requests inside the component.

Basically it is working, the ChartJS instance gets created but it is empty and has a height and width of 0 and when I resize it via console it is still empty.

So what would be the best way of creating a "ChartJS Component" with VueJS or where is the fault in my code below?

The very basic way I want to load chart is like this.

<chart :resource="'https://httpbin.org/get'"></chart>

This is the basic component

var Vue = require('vue');

Vue.component('chart', {
    template: require('./template.html'),
    props: ['resource'],
    data: function() {
        return {
            startingData: {},
            latestLabel: {},
        }
    },
    ready: function() {
        // here I would load the js data and set the startingData
    },
});

This is the directive which I use to pass down the data from the component. I do it this way to get this.el so that I can get the Context of it

Vue.directive('loadData', function(value) {
    var startingData = {
            labels: [1, 2, 3, 4, 5, 6, 7],
            datasets: [{
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                data: [28, 48, 40, 19, 86, 27, 90]
            }]
        },
        latestLabel = startingData.labels[6];

    var liveChart = new Chart(this.el.getContext('2d')).Bar(startingData);

    setInterval(function() {
        liveChart.addData([Math.random() * 100], ++latestLabel);
        liveChart.removeData();
    }, 1000);
});

This is the template of the component

<canvas width="960" height="300" v-load-data="startingData"></canvas>

score 1 · Accepted Answer · edited May 23 '17 at 11:59

You are concerned by this issue. Your graph does not render because, as you pointed out, the graph has a height and width of 0. I had this problem while working with tabsets, and I solved it by redrawing the graph with a directive like this :

app.directive('graphCanvasRefresh', ['$compile', function($compile) {
function link(scope, elem, attrs) {

function refreshDOM() {
    var markup = '<canvas class="chart chart-pie" id="graph" data="entityGraph.data" labels="entityGraph.labels" legend="true" colours="graphColours" ></canvas>';
    var el = angular.element(markup);
    compiled = $compile(el);
    elem.html('');
    elem.append(el);
    compiled(scope);
};

// Refresh the DOM when the attribute value is changed
scope.$watch(attrs.graphCanvasRefresh, function(value) {
    refreshDOM();
});

// Clean the DOM on destroy
scope.$on('$destroy', function() {
    elem.html('');
});
};

  return  {
   link: link
 };
}]);

Hope this can help you

Load ChartJS via VueJS - ChartJS empty and 0px dimension

1 Answers1