nomoney4me · July 31, 2017 15:15
diff --git a/gistfile1.js b/gistfile1.js
 <!doctype html>
 <html>
  <head>
    <!-- <script src="https://unpkg.com/vue"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/vue-chartjs.full.min.js"></script>
  <head>
  <body class="container-fluid">
    <div id="ticker" class="ticker">
      <line-chart :chart-data="datacollection" :options="{ responsive: true, maintainAspectRatio: false }"></line-chart>
    </div>

    <script>
      Vue.component('line-chart', {
        extends: VueChartJs.Line,
        mixins:[VueChartJs.mixins.reactiveProp],
        props: ['chartData', 'options'],
        mounted () {
          //console.log(this.chartData)
          this.renderChart(this.chartData, this.options)
        }

      })

      var vm = new Vue({
        el:'.ticker',
        data: function() {
          return {

          }
        },
        computed: {
          datacollection: function() {
            var url = "/getGraphData"
            // question: how come this doesn't work?  I can replace "graphData" with a manual array and it works.  Is there something going on with fetch?
            fetch(url).then((data) => {
              return data.json()
            }).then((graphData) => {
              console.log(graphData)
              return {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                  {
                    label: 'Data One',
                    backgroundColor: '#f87979',
                    data: graphData
                  }
                ],
              }
            })

          }
        }
      })
    </script>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<!-- <script src="https://unpkg.com/vue"></script> -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/vue-chartjs.full.min.js"></script>
	<head>
	<body class="container-fluid">
	<div id="ticker" class="ticker">
	<line-chart :chart-data="datacollection" :options="{ responsive: true, maintainAspectRatio: false }"></line-chart>
	</div>

	<script>
	Vue.component('line-chart', {
	extends: VueChartJs.Line,
	mixins:[VueChartJs.mixins.reactiveProp],
	props: ['chartData', 'options'],
	mounted () {
	//console.log(this.chartData)
	this.renderChart(this.chartData, this.options)
	}

	})

	var vm = new Vue({
	el:'.ticker',
	data: function() {
	return {

	}
	},
	computed: {
	datacollection: function() {
	var url = "/getGraphData"
	// question: how come this doesn't work? I can replace "graphData" with a manual array and it works. Is there something going on with fetch?
	fetch(url).then((data) => {
	return data.json()
	}).then((graphData) => {
	console.log(graphData)
	return {
	labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
	datasets: [
	{
	label: 'Data One',
	backgroundColor: '#f87979',
	data: graphData
	}
	],
	}
	})

	}
	}
	})
	</script>
	</body>
	</html>