Get data from JSON for chart.js and vue.js - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Data

Description

Get data from JSON for chart.js and vue.js

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>vue-chartjs v3</title> 
   </head> 
   <body translate="no"> 
      <div class="app">
          {{ message }} // ww  w.j a  va  2  s  .  co m
         <line-chart></line-chart> 
      </div> 
      <script src="https://unpkg.com/vue"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
      <script src="https://unpkg.com/vue-chartjs@3.0.1-rc2/dist/vue-chartjs.js"></script> 
      <script>
Vue.component('line-chart', {
  extends: VueChartJs.Bar,
  mixins: [VueChartJs.mixins.reactiveData],
  data: function() {
    return {
      chartData: {
        labels: [],
        datasets: [
          {
            label: 'cancelled',
            backgroundColor: 'red',
            data: []
          },
          {
            label: 'reserved',
            backgroundColor: 'blue',
            data: []
          },
          {
            label: 'delivered',
            backgroundColor: 'green',
            data: []
          }
        ]
      }
    }
  },
  mounted () {
    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
  },
  created() {
    var self = this;
    setTimeout(function(){
      self.chartData = {
        labels: ['a', 'b', 'c'],
        datasets: [
          {
            label: 'cancelled',
            backgroundColor: 'red',
            data: [1, 2, 3]
          },
          {
            label: 'reserved',
            backgroundColor: 'blue',
            data: [4, 5, 6]
          },
          {
            label: 'delivered',
            backgroundColor: 'green',
            data: [7, 8, 9]
          }
        ]
      }
    }, 2000)
  }
})
var vm = new Vue({
  el: '.app',
  data: {
    message: 'Hello World'
  }
})
    
      </script>  
   </body>
</html>

Related Tutorials