GimmyHchs / vue-charts

Base on Vue2.0 wrapper for ChartJs. (Deprecated)
MIT License
357 stars 84 forks source link

Multiple charts with dynamic data #10

Open hotrush opened 7 years ago

hotrush commented 7 years ago

Good night, i have an issue with your awesome plugin.

<canvas id="pricesChart" count="4"></canvas>
<chartjs-line target="pricesChart" :labels="pricesChart.labels" :data="pricesChart.data.min" :bind="true"></chartjs-line>
<chartjs-line target="pricesChart" :labels="pricesChart.labels" :data="pricesChart.data.max" :bind="true"></chartjs-line>
<chartjs-line target="pricesChart" :labels="pricesChart.labels" :data="pricesChart.data.avg" :bind="true"></chartjs-line>
<chartjs-bar target="pricesChart" :labels="pricesChart.labels" :data="pricesChart.data.count" :bind="true"></chartjs-bar>
        data() {
            return {
                pricesChart: {
                    labels: [],
                    data: {
                        min: [],
                        max: [],
                        avg: [],
                        count: []
                    }
                }
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.$http.post('/api/', {})
                    .then(response => {
                        this.pricesChart.labels = _.keys(response.body.prices_chart);
                        this.pricesChart.data.min = _.map(response.body.prices_chart, 'min_price_per_day');
                        this.pricesChart.data.max = _.map(response.body.prices_chart, 'max_price_per_day');
                        this.pricesChart.data.avg = _.map(response.body.prices_chart, 'avg_price_per_day');
                        this.pricesChart.data.count = _.map(response.body.prices_chart, 'ads_count');
                    }, error => {
                        // ...
                    });
            }
        }

So, i have 4 charts in one canvas, but this code renders only one of them, do you know why?

NirvanaRSX commented 7 years ago

Problem solved?

hotrush commented 7 years ago

@NirvanaRSX don't know, i am using another package. too many bugs here

NirvanaRSX commented 7 years ago

sad

fyyyyy commented 7 years ago

Have the same issue, i would guess :bind is loosing the reference since you assign a new array instead of modifying the initially assigned array.

Rendse commented 7 years ago

Same issue here (v1.2.8), getting the following error when changing labels or pushing data:

app.a98a367….js:65077 Uncaught TypeError: Cannot read property 'parentNode' of null at Object.helpers.getMaximumWidth (app.a98a367….js:65077) at Chart.Controller.resize (app.a98a367….js:63262) at listener (app.a98a367….js:63730) at app.a98a367….js:69817

nhekkens commented 6 years ago

We planning on fixing this issue?

@hotrush what package did you go with?

hotrush commented 6 years ago

@nhekkens this one https://github.com/apertureless/vue-chartjs