Wsrtjtyk

So I'm pretty new to Vue.js and I'd like to display a dynamically rendered chart on a page. So far I have

/*/barChart.js

import { Bar, mixins } from 'vue-chartjs'

const { reactiveProp } = mixins



export default {

    extends: Bar,

    mixins: [reactiveProp],

    props: ['options'],

    mounted () {

        this.renderChart(this.chartData, this.options)

    },

}

And in my main Vue file

/*/stats.js

const stats = new Vue({

    el: '#app',

    components:{

        "bar-chart": barChart,

    },

    data: function () {

        return {

            chartData: {},

            charOptions: {},

        }

    },

    watch:{

        campaignIds: function(){

            this.fillInStats();

        }

    },

    methods: {

        fillInStats: function(){



        //here I'd like to push data in the chart or remove them depending on a list of Id's.

        }

    },

    //etc

}

So when I update the data "manually" (by directly setting this.chartData) there is an update but the I can't get it to work smoothly. The documentation says to use a function like

function addData(chart, label, data) {

    chart.data.labels.push(label);

    chart.data.datasets.forEach((dataset) => {

        dataset.data.push(data);

    });

    chart.update();

}

and I have no problem with getting this.chartData.labels.push(label) to work but I'm not sure how to correctly call chart.update() in my case (I'm still unfamiliar with the structure of view).

This is the HTML:

<div class="card-body">

    <bar-chart :chart-data="chartData" :options="chartOptions" :height="100"></bar-chart>

</div>

Edit

I made it work by adding

data: function () {

    return {



        chartData:{labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'], datasets: [{label: '', backgroundColor: 'white', data: [0, 0, 0, 0]}]},

        chartOptions: {scales: {yAxes: [{ticks: {beginAtZero:true}}]}},

        dataSets: ,

        //etc

    }

},

and updating data like so:

addInStats: function(id){



    let color = this.pickColor();



    let dataSet = {

        label: this.campaignsList[id].name,

        backgroundColor: color,

        data: [this.subscriberCountArray[id], this.nonSentCountArray[id], this.nonReadCountArray[id], this.readCountArray[id]]

    };



    this.dataSets.push(dataSet);



    this.chartData = {

        labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'],

        datasets: this.dataSets,

    };

},

but now, once I've added data a few times, the whole graph goes blank

It is not too clear what you want to do and why your use-case is not working, as the reactiveProp mixin should take care of updating as described in the docs.

However, you should perhaps implement your own watcher where you can run the update code. Like so:

watch: {

  chartData() {

    this.$data._chart.update();

  }

}

Basically, you can access all the methods of the chart through this.$data._chart.

Or feel free to just add this.$data._chart.update() call wherever else is more appropriate for your workflow.

_{Also, just be aware that there is a misspelling: charOptions instead of chartOptions}

So this was my solution:

import barChart from 'path/to/barChart'



const stats = new Vue({

    //

components:{

    "bar-chart": barChart,

},

data: function () {

    return {

        barChartOptions: {responsive: true, scales: {yAxes: [{ticks: {beginAtZero:true}}]}},

        barChartData: ,

        subscriberCountArray: null,

        readCountArray: null,

        colorArray: ,

    //

    }

},

methods: {

    initStats: function() {

        axios.post(

            //get the data and 



        ).then(response => {

            if(response.data.success) {



                this.campaignsList = response.data.campaignsList;



                this.subscriberCountArray = response.data.subscriberCountArray;

                this.readCountArray = response.data.readCountArray;



                let barDataSets = ;



                for(let i = 0; i < this.campaignIds.length; i++){



                    let currentId = parseInt(this.campaignIds[i]);



                    let color = '';

                    let rgba = ;



                    if(this.colorArray[currentId]){

                        color = this.colorArray[currentId];

                    }else{

                        //pickcolor

                    }



                    barDataSets.push({

                        label: this.campaignsList[currentId].name,

                        backgroundColor: color,

                        data: [this.subscriberCountArray[this.campaignsList[currentId].id], this.readCountArray[this.campaignsList[currentId].id]]

                    });



                this.barChartData = {labels: ['Destinataires', 'Lus'], datasets: barDataSets};



    },

    checkCampaign: function(id){

        if(this.campaignIds.length === 0 || !this.campaignIds.includes(id)){

            this.campaignIds.push(id);

        }else{

            this.campaignIds.splice(this.campaignIds.indexOf(id), 1);

        }

        this.initStats();

    },

    pickColor: function(interval = null, type = null, base = null){

        //

    },

},

mounted(){

    this.initStats();

}

With in the template:

<bar-chart :chart-data="barChartData" :options="barChartOptions"></bar-chart>

and in barChart.js:

import { Bar, mixins } from 'vue-chartjs'

const { reactiveProp } = mixins



export default {

    extends: Bar,

    mixins: [reactiveProp],

    props: ['options'],

    mounted () {

        this.renderBarChart();

    },

    methods: {

        renderBarChart: function(){

            this.renderChart(this.chartData, this.options);

        }

    },

    watch: {

        chartData: function () {

            this.renderBarChart();

        }

    }

}

Doesn't seem like a terribly efficient way to proceed, but that's the only way I could make dynamics stats rendering with vue work.