0

I have a SharePoint list and I'm trying to visualize the data using Vue-chartjs. When I do so, all I get is a canvas with a grid and not chart being rendered. Any ideas? Any help would be much appreciated. Below is my code: HTML

    <v-content>
      <v-container class="grey lighten-5" fluid>
        <v-row dense>
          <v-col cols="sm">
            <v-card class="pa-2" outlined tile raised>
              <my-line-chart :line-data="ChartConfig" :chart-options="options"></my-line-chart>
            </v-card>
          </v-col>
          <v-col cols="sm">
            <v-card class="pa-2" outlined tile raised>
              <my-bar-chart :bar-data="ChartConfig" :chart-options="options"></my-bar-chart>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-content>

JS (Line chart component)

Vue.component('my-line-chart', {
    extends: VueChartJs.Line,
    props: ['lineData', 'chartOptions'],
    mounted: function () {
        this.renderChart(this.lineData, this.chartOptions);
    }
})

JS (Bar chart component)

Vue.component('my-bar-chart', {
    extends: VueChartJs.Bar,
    props: ['barData', 'chartOptions'],
    mounted: function () {
        this.renderChart(this.barData, this.chartOptions);
    }
})

JS (Vue instance)

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    ChartConfig: {
      labels: [],
      datasets: [
        {
          data: [],
          backgroundColor: '#3498db',
          borderColor: 'rgba(136,136,136,0.5)',
          label: "2013"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      hover: {
        mode: 'nearest',
        intersect: true
      },
      scales: {
        xAxes: [{
          display: true,
          categoryPercentage: 0.5,
          scaleLabel: {
            display: true,
            labelString: 'Month'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Value'
          }
        }]
      }
    },
    iceCream: [],
    drawer: false
  },
  created: function () {
    this.getListData();
  },
  methods: {
    getListData: function () {
      var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('popular ice cream')/items";

      this.status = "getting data...";
      var that = this;
      axios.get(endPointUrl).then(function (response) {
        that.getChartData(response.data.value);
      })
        .catch(function (error) {
          console.log(error);
        })
    },
    getChartData: function (chartData) {
      console.log(chartData);
      for (var i = 0; i < chartData.length; i++) {
        this.ChartConfig.labels.push(chartData[i].Flavor)
      }

      for (var i = 0; i < chartData.length; i++) {
        this.ChartConfig.datasets[0].data.push(chartData[i].Vote)
      }
    }
  }
});


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.