0

I am trying to sync my chart' array data with my firebase value. Chart getting arrays for label and data. I would like to bind this Chart data value to my firebase object. Here is normal chart creation with hard coded static values:

data()
{
return {appChart: {data: {labels: ["A"], series: [[3]]}},}
},

Now, I would like to bind this value (3) with my firebase object.. Normally I can use firebase object like this with no problem:

new Vue({
   data: () => ({ myObjA: null }),
   firebase: {
      myObjA: db.ref('myObjA'),
      asObject:true
   },
  })

But I cant bind and dynamic update this myObjA with Chart array series ‘a’ like; 

data()
{
return {appChart: {data: {labels: ["A"], series: [[myObjA]]}},}
},

How can I do that ?

user9310000
  • 45
  • 5

1 Answers1

0

You can change appChart to be computed properties:

export default {
  data: () => ({ myObjA: null }),
  firebase: {
    myObjA: db.ref('myObjA'),
    asObject:true
  },
  computed: {
    appChart() {
      return {
        data: {
          labels: ["A"], 
          series: [[this.myObjA]]
        }
      }
    }
  }
}
</script>
ittus
  • 21,730
  • 5
  • 57
  • 57
  • Thank you, when I try static value in computed (like series:[[5]]) it is working good but when I try with my object from firebase (like series:[[this.myObjA]] ) it is not getting the data.. chart was empty – user9310000 Apr 20 '19 at 08:27
  • No. when I use this.myObjA in template directly, it is binding with firebase and working fine.. But when I use it on computed, it is not updated – user9310000 Apr 20 '19 at 10:15
  • Hi, when I print to console in computed method, first it printed empty like {} then after a second, it prints {“.value”:5,”.key”:”a”} And my object in firebase: {“test”:{“a”:5}} – user9310000 Apr 20 '19 at 14:04
  • `series: []` needs an array, but as you console.log, `{“.value”:5,”.key”:”a”}` is an object. – ittus Apr 21 '19 at 01:35
  • But I am using like; series: [[this.myObjA.a]] It should work right ? – user9310000 Apr 21 '19 at 18:19
  • I think I found the issue; I am using chartist and I change chartist to another chart library. Chart is now working good. – user9310000 Apr 21 '19 at 19:34