Friday, 15 October 2021

Display json data on vuejs chartjs

I would like to read a json file and plot the data on a Chartjs using VueJs.

I was able to display some data but not from a Json file.

So far I have a vue.app looking like this:

export default {
  name: 'app',
  data () {
    return {
      labelschart: [],
      datachart: [],
      testLabels: ['10/01/2017 02:25:34', '11/01/2017 02:25:34', '12/01/2017 02:25:34', '13/01/2017 02:25:34', '14/01/2017 02:25:34'],
      testData: [93.5, 93.4, 93.3, 93.4, 93.5]

...

computed: {
    lineData () {
      return {
        labels: this.testLabels,
        datasets: [
          {
            label: 'Instrument',
            backgroundColor: '#36A2EB',
            data: this.testData,
            fill: 'False',
            borderColor: 'blue'
          }
        ]
      }
    }

my linechart.vue is this:

<script>
import { Line, mixins } from 'vue-chartjs'

export default Line.extend({
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
})
</script>

this is the tag:

<line-chart class="card-content" :chartData="lineData" :options="options"></line-chart>

How can I fill the labelschart and datachart from a json file?

Thanks,



from Display json data on vuejs chartjs

No comments:

Post a Comment