Creating a canvas component with Vue and chart.js results in blank screen

Hi there

I am attempting to follow the Charting and You: A Graph Vue Component video. I can get my chart displaying no problem using just javascript and html. However when I try to put Vue into the mix I am just getting a blank screen.

Here is my view code:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>

        <div class="container">
            <graph></graph>
        </div>

        <script src="/js/graphs.js"></script>

    </body>
</html>

And my webpack.mix.js

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/graphs.js', 'public/js')
   .less('resources/assets/less/app.less', 'public/css');

My resources/assets/js/graphs.js:

import Vue from 'vue';
import Graph from './components/Graph'

new Vue({
    el: '.container',

    components: { 
        Graph 
    }
});

And finally my ./components/Graph.js


import Chart from 'chart.js';

export default {
    template: '<canvas width="600" height="400" id="myChart"></canvas>',

    ready() {
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "2015",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                }
            ]
        };

        var context = document.getElementById('myChart').getContext('2d');

        var myLineChart = new Chart(context, {
            type: 'line',
            data: data,
            options: {
                title: {
                    display: true,
                    text: 'Test Chart'
                }
            }
        });
    }
}

When I run npm run dev everything compiles nicely. And I am receiving no errors in my dev tools Console. Under my vue-devtools screen I can see < Root > then < Graph > == $vm0, when I select < Graph > I then see: This instance has no reactive state.

Package.json

{
  "private": true,
  "scripts": {
    "dev": "node ./node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node ./node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node ./node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node ./node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.7.2",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "chart.js": "^2.5.0",
    "vue": "^2.2.1",
    "vue-template-compiler": "^2.2.1"
  }
}

Any suggestions on what I may have missed would be most appreciated! Thanks Luke

lanzalf

9 years ago

Best Answer

Level 5

If anyone comes across the same issue as me where their chart is not displaying, this fixed it for me:

http://stackoverflow.com/questions/40209443/vue-js-ready-function-is-not-triggered

The issue was that the component ready() function is no longer used in Vue 2.0 or greater, try using mounted() instead :)

2 likes

Robbus

8 years ago

Level 4

Thanks dude, this helped me out:)

Omda

6 years ago

Level 1

@lanzalf thanks a lot you save my day...

darrenhusa

6 years ago

Level 27

Hello,

Like lanzalf, I am attempting to follow the Charting and You: A Graph Vue Component video. I can get the chart to work using a chart.js CDN and javascript in the public directory.

However when I try to create the Graph component version, it does not work. npm run dev does compile the javascript into the public directory.

I am using php v 7.3.5, laravel 7.0 (with laravel/ui package and the vue preset), chart.js (current), vue (current) on mac os x.

I also tried the suggestion of using mounted() instead of ready() inside the Graph code.
I think the problem may be the correct syntax of how to import Chart in resources/js/app.js
I have tried

import Graph from './components/Graph'; and require('./components/Graph');

I have also tried to rename Graph.js to Graph.vue in the resources/js/components folder.

I know Vue works because I added code from the vuecasts.com tutorials at least up to the end of video 4 (Vue Event Listeners). However, I am using a Vue.js CDN in welcome.blade.php

Any suggestions on how to take the next step, but with "current" versions? Any help is greatly appreciated.

Please or to participate in this conversation.