Draw asynchronous information - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Draw asynchronous information

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  v  a  2s.c om*/
         <line-chart :chart-data="chartData" :options="options"></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.Line,
  props: ["chartData", "options"],
  mixins: [VueChartJs.mixins.reactiveProp],
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
});
var vm = new Vue({
  el: ".app",
  data: {
    message: "Hello World",
    chartData: null,
    options: { responsive: true, maintainAspectRatio: false }
  },
  mounted() {
    this.sampleAsync();
  },
  methods: {
    sampleAsync() {
      setTimeout(() => {
        this.chartData = {
          labels: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July"
          ],
          datasets: [
            {
              label: "Data One",
              backgroundColor: "#f87979",
              data: [40, 39, 10, 40, 39, 80, 40]
            }
          ]
        };
      }, 1000);
    }
  }
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials