1 year ago

In a complete mess with Vue and Charts.js

Posted 1 year ago by TimeSocks

Hi folks,

I am getting myself in a complete mess trying to put together a simple chart for a weather station I am putting together. The idea is that a wifi enabled micro-controller will, via a Python script, populate an SQLite database with temperature, humidity, and pressure data. That part is all set up. For the moment I have test data in the database.

I have set up a Laravel app and am trying to follow along with the Vue/Charts.js series here on Laracasts, but it's muddied slightly by a different version of Vue being used, and the fact that I'm a moron. Vue has too many damned curly brackets for my liking.

Anyway. I have an API route set up that, at the moment, grabs my dummy temperature data and returns it like this:


The idea being that my chart will display the last 24 hours of data, recorded once per hour.

However, this is as far as I can get. I have no idea how to get the data where it needs to go in my Graph component.:

    <canvas width="300" height="300" ref="chart"></canvas>

    export default {
        props: ['url'],
        mounted() {
            console.log('Graph component mounted.')
            var context = this.$refs.chart.getContext('2d');
                .then(response => {

                  var data = {
                                labels: Object.keys(response.data),
                                datasets: [{
                                             label: 'My First dataset',
                                             data: [
                                                       Object.keys(response.data).map(key => response.data[key])
                                    fill: false,
                  new Chart(context, { type: "line", data: data });

(url is a prop passed in the view - ideally I'd like to be able to reuse the chart for humidity and pressure simply by hitting a different API route to grab the relevant set of data)

This just descends into a mess of 'unexpected token' errors and I have no idea how to fix it. Help, please and thank you!

Please sign in or create an account to participate in this conversation.