TimeSocks
441
4
Vue

In a complete mess with Vue and Charts.js

Posted 5 months 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:

[{"hour":"2206","temperature":"12"},{"hour":"2206","temperature":"13"},{"hour":"2206","temperature":"5"},{"hour":"2206","temperature":"8"},{"hour":"2207","temperature":"11"},{"hour":"2207","temperature":"10"}]

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.:

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

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

                  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 });
                })
        }
    }
</script>

(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.