title: How to get data from JSON for chart.js, using vue.js
body: <p>all.</p>
  
  <p>I want to build charts from my JSON data, but can not understand how do it.
  Data fetch('receive'), and build table. It is OK</p>
  
  <pre><code>var ordersTable = Vue.component('orders-table', {
      template: ` 
      &lt;div&gt;
            &lt;table class="table table-bordered"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;orderdate&lt;/th&gt;
                &lt;th&gt;cancelled&lt;/th&gt;
                &lt;th&gt;reserved&lt;/th&gt;
                &lt;th&gt;delivered&lt;/th&gt;
                &lt;th&gt;ordersumm&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr v-for="column in orders"&gt;
                &lt;td&gt;{{column.orderdate}}&lt;/td&gt;
                &lt;td&gt;{{column.cancelled}}&lt;/td&gt;
                &lt;td&gt;{{column.reserved}}&lt;/td&gt;
                &lt;td&gt;{{column.delivered}}&lt;/td&gt;
                &lt;td&gt;{{column.ordersumm}}&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
          `, 
  
    data: function ()  {
      return {
        orders: []
      }
    },
    created:function() {
      fetch('/receive/')    
      .then(res =&gt; res.json())
      .then(res =&gt; {
        this.orders = res;
        });
    },
  });
  </code></pre>
  
  <p>I try to build charts with orderdate Labels, and 3 Datasets: cancelled, reserved, delivered. 
  Like this:
  <a href="https://i.stack.imgur.com/SqZDh.png" rel="nofollow noreferrer">enter image description here</a>
  How i can do it? Labels and data must fill from fetch. My not working code:</p>
  
  <pre><code>var orderChart = Vue.component('order-chart', {
    extends: VueChartJs.Bar,
    mounted () {
      this.renderChart({
        labels: [],
        datasets: [
          {
            label: 'cancelled',
            backgroundColor: 'red',
            data: []
          },
          {
            label: 'reserved',
            backgroundColor: 'blue',
            data: []
          },
          {
            label: 'delivered',
            backgroundColor: 'green',
            data: []
          }
        ]
      }, {responsive: true, maintainAspectRatio: false})}
    ,
    data: function ()  {
      return {
        orders: []
      }
    },
    created:function() {
      fetch('/receive/')    
      .then(res =&gt; res.json())
      .then(res =&gt; {
        this.orders = res;
        });
    },
  })
  </code></pre>