"Chart.js Line Graph" is not rendering using dynamic JSON data from a REST API Service endpoint

Greetings All,

I’m fairly new to “JavaScript” and “Vue.js” and am attempting to render a “Line Graph”.

The following tutorial was quite simple and worked well for me because it uses static “ChartData” in an array;

https://www.youtube.com/watch?v=vIxaVlHdpJU

However, when attempting to use dynamic JSON data from the following endpoint, I can’t seem to get it to work;

https://my-json-server.typicode.com/antoniolans/monitur/linegraphdata

Here’s my code;

main.js

import Vue from 'vue'

import App from './App.vue'

import Chartkick from 'vue-chartkick'

import Chart from 'chart.js'

Vue.use(Chartkick.use(Chart))

Vue.config.productionTip = false

new Vue({

  render: h => h(App),

}).$mount('#app')

App.vue

<template>
 <div id="app">

    <line-chart :data="result"></line-chart>

  </div>
</template>

<script>

export default {

  name: "App",

  request(){

    fetch("https://my-json-server.typicode.com/antoniolans/monitur/linegraphdata")

    .then(function(response){

        return response.json()

    })

    .then((response) => {

        var result = document.getElementById('result')

        var item = ''

        console.log(response)

        response.forEach(element => {

            // item = "Day: " + element.day + "," + "Temperature: " + element.temperature + ",";
            item = element.day + ":  " + element.temperature + ",";

            result.append(item);
        }

    )

    });

}}

</script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;
}

</style>

  function newFunction(result,item) {

    result.append(item);

  }

I’m using “Visual Studio Code”. Throughout my many attempts of trail and error, “Visual Studio Code” recommended the creation of that " function newFunction(result,item)" method, which I’m sure I’m not using properly.

Any assistance would be greatly appreciated !

Thanks in advance !

Respectfully,
Antonio

From I see in vue-chartkick they support two types of data is an array in array and object but the response that you got is an object of the array. The solution is to convert the response data to these two types.

Greetings rootblack45,

Firstly, how are you ? I hope you and your loved ones are all doing extremely well !

Secondly, you are absolutely correct ! Your solution works flawlessly !

MANY, MANY, MANY THANKS FOR YOUR KIND AND AWESOME ASSISTANCE !

Have a wonderful day !

Warmest Regards -and- The Utmost Respect,
Antonio