Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doughnut-chart not getting changed according to data provided dynamically #379

Closed
harishankards opened this issue Jun 21, 2018 · 14 comments
Closed

Comments

@harishankards
Copy link

Expected Behavior

I would like to provide dynamic data to the chart which changes its view as per the data

Actual Behavior

But it doesn't change the view, even though I provide the dynamic data every time. Please refer the demo below.

Demo

https://codesandbox.io/s/y32yj8vxo1

Environment

  • vue.js version: 2.5.2
  • vue-chart.js verion: 2.8.1
  • npm version: 5.6.0
@apertureless
Copy link
Owner

apertureless commented Jun 22, 2018

Please check out the docs on reactive data

Chart.js per default is not reactive and does not reflect changes in the dataset.

I provided two helper mixin for this purpose: reactiveData and reactiveProp.

Both add a vue.js watcher to the dataset and either update or rerender the chart if the data changes.

You can also check out the examples

@harishankards
Copy link
Author

Hey @apertureless,
Thanks for the reply.
Right now my code look like this:

<script>
import { Doughnut } from 'vue-chartjs'
const { reactiveProp } = mixins //what should be the actual path I should give here

export default {
  extends: Doughnut,
  mixins: [reactiveProp],
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>

But I have a doubt, what should be the path for mixins?

@apertureless
Copy link
Owner

Well, it stands all in the Readme or the docs.

There are plenty of examples.

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

You can import the mixins object directly from vue-chartjs and then use destructing to get the reactiveProp or use the dot notatation. mixins.reactiveProp.

Like mentioned in the docs: The reactiveProp creates automatically a prop named chartData which holds the data of the chart and adds a watcher to it.

<script>
import { Doughnut, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins //what should be the actual path I should give here

export default {
  extends: Doughnut,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

@harishankards
Copy link
Author

That's really a great explanation. But still, I could not get it done.

chart.vue

<script>
import { Doughnut, mixins } from 'vue-chartjs'

export default {
  extends: Doughnut,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

and

another_component.vue

<template>
      <Chart v-if="showChart" :chartData="chartData" :options="{responsive: true, maintainAspectRatio: false}"></Chart>
</template>
<script>
export default {
data () {
return {
chartData: {
        labels: ['Upvotes', 'Shares', 'Views'],
        datasets: [
          {
            backgroundColor: [
              '#41B883',
              '#E46651',
              'blue'
            ],
            data: []
          }
        ]
      }
}
}
}
</script>

@apertureless
Copy link
Owner

You are not setting any data in your another_component.vue

@harishankards
Copy link
Author

Oops.
I've this method in my another_component.vue

showStats (project) {
      this.showChart = true
      this.chartData.datasets[0].data = []
      this.chartData.datasets[0].data = [project.upvotes.length, 2, 2]
    }

@apertureless
Copy link
Owner

Could be related to this: https://vue-chartjs.org/#/home?keyword=reac&id=limitations
And already discussed in #351

@harishankards
Copy link
Author

harishankards commented Jun 23, 2018

I understand.
I tried Vue.set, array.splice and this.

Nothing helped. @apertureless

@apertureless
Copy link
Owner

Well the problem is that you only change the data inside your dataset array.
The mixin however expect the labels to change too.

It was made with realtime data in mind. So adding new data and not modifying existing one. If you add new data you need to add new labels.

The easiest way would be to add a watcher by yourself and then rerender the chart.

<script>
import { Doughnut, mixins } from 'vue-chartjs'

export default {
  extends: Doughnut,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  watch: {
    chartData () {
      this.renderChart(this.chartData, this.options)
    }
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

@harishankards
Copy link
Author

Hey @apertureless, I understand. But adding watcher doesn't work for me. Can you check what's wrong here?
https://codesandbox.io/s/r1r0p8543m

@harishankards
Copy link
Author

Hey @apertureless, do I have got any updates, pal?

@hitautodestruct
Copy link

@harishankards Dude, the guy is not your personal code reviewer. Please ask a question on SO or be much more specific...

@harishankards
Copy link
Author

Hey @hitautodestruct, I understand this is not a personal code reviewer. Just seeking out help, as the reactive data is not working for me. That's it, pal. If you also can help, would be grateful.

@apertureless
Copy link
Owner

apertureless commented Jul 16, 2018

Well, I guess the problem is that you are mutating the data without the labels. So that watcher does not recognize it.

Your example is also quite weird. Why are you mutating the data array? Why are you not just set the new data array in a whole?

I don't really get the real-world use case for what you are doing there.

If you have fixed labels that never change you can also move the object inside your component and just pass the data[] array.

https://github.com/apertureless/npm-stats/blob/develop/src/components/BarChart.vue

And @hitautodestruct is right, as this is not a bug, you should ask on StackOverflow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants