Instantly share code, notes, and snippets.

@JeffreyWay /Graph.js Secret
Last active Mar 3, 2017

Embed
What would you like to do?
import Chart from 'chart.js';
export default {
template: '<canvas width="600" height="400"></canvas>',
props: {
labels: {},
values: {},
color: {
default: 'rgba(220,220,220,0.2)'
}
},
ready() {
var data = {
labels: this.labels,
datasets: [
{
fillColor: this.color,
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: this.values
},
]
};
new Chart(
this.$el.getContext('2d')
).Line(data);
}
}
import Vue from 'vue';
import Graph from './components/Graph';
new Vue({
el: 'body',
components: { Graph }
});
<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
</head>
<body>
<div class="container">
<graph :labels="['January', 'February', 'March']"
:values="[10, 42, 4]"
color="blue"
></graph>
</div>
<div class="container">
<graph :labels="['April', 'May', 'June']"
:values="[100, 420, 99]"
color="red"
></graph>
</div>
<script src="/js/main.js"></script>
</body>
</html>
@ChristopherDosin

This comment has been minimized.

ChristopherDosin commented May 21, 2016

I got the error app.js:43519Uncaught TypeError: (intermediate value).Line is not a function
So i had to change Line 31-33 to

        new Chart( this.$el.getContext('2d'), {
            type: "line",
            data: data
        });

which solves the error

@babadee08

This comment has been minimized.

babadee08 commented Oct 3, 2016

I'm assuming the code is a bit dated you can also try this in case you run into some weird error or just lookup the Chart.js documentation.
var context = this.$el.getContext('2d');
new Chart.Line(context, {data:data});

@kofoedandreas

This comment has been minimized.

kofoedandreas commented Nov 9, 2016

Hi Jeffrey,

I have copied your files 1:1, but the graphs are not drawn.

I have changed Import Vue from 'vue'; to import Vue from 'vue/dist/vue.js'; in order to reference properly.

Do you know if these lines of codes are outdated?

Thanks!

@nezaboravi

This comment has been minimized.

nezaboravi commented Mar 3, 2017

@kofoedandreas it does not matter how you import or include vue.js as long as its included.
new Chart() is changed on Chart.js side therefore Jeffery code is outdated
This is how youshould init it now with 2.5 version of Chart.js
let myChart = new Chart(this.$el.getContext('2d'), {
type: 'line',
data: data
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment