VueJS - Push data into array in V-Bind

Question

I am trying to retrieve data from a list of devices and depending on the number of device, it will graph the data on the chart. The data will also be updated every one second, in other words, I would like to have the chart keep graphing the data in "real-time"

Here is my current code

index.html

<div v-for="data in devices">
    <line-chart :data="[[data.time, data.value]]"></line-chart>
</div>

script (Vue instance)

var displayDataArray = [];

var socket = io.connect();
  socket.on('stream', function (sensorData) {
    app.devices = sensorData.deviceList;
    ProcessData(app.devices);
  });

  function ProcessData(dataObject) {
    var sensorValue;
    for (sensorValue in dataObject) {
      var deviceValue = dataObject[sensorValue];
      displayDataArray.push([deviceValue.timestamp, parseInt(deviceValue.lux)]);
    }
  }

  var app = new Vue({
    el: "#app",
    data: {
      devices: {},
      chartData: displayDataArray
      },
    methods: {
      update() {
        console.log(this.devices);
      }
    }
  });

However, the data is always graphed at one single point. It is not appending onto an array. If I bind :data="chartData" in <line-chart>, it use the data on the second device (if there are two devices is being passed into the devices object) to display on both graph.

Is there a good way to implemented this functionality?

FYI, here is how the object devices looks like

devices's object Thank you for your help!

Is the chart data to be continuously appended to, without resetting? What happens if you do `app.chartData = displayDataArray` at the end of ProcessData() ? (You can do this differently, but just for debugging...) — Thejaka Maldeniya, Apr 01 '18 at 08:19
@ThejakaMaldeniya Yes, the chart data is continuously appended to. I can achieve that by binding the `:data="chartData"` since it is continuously pushed whenever the socket opens and polls the incoming data. However, the problem for using that way is if you have two charts, it use the same array for both. I am running this whole things on beaglebone so I avoid building the whole Vue App. — AlexT, Apr 01 '18 at 08:49
To clarify, do you mean to have multiple entries for `devices` in vue app, and for each device to have a separate chart? — Thejaka Maldeniya, Apr 01 '18 at 08:55
@ThejakaMaldeniya Yes, I do have multiple entries in `devices`, and yes, each device will have a separate chart. I guess the main question here is "how do we append an array in v-directive"? — AlexT, Apr 01 '18 at 09:02

Thejaka Maldeniya · Accepted Answer · 2018-04-01T09:15:58.790

0

Will something like the following suit your requirements:

var socket = io.connect();
socket.on('stream', function(sensorData) {
    app.devices = sensorData.deviceList;
});

var app = new Vue({
    el: "#app",
    data: {
        devices: {},
        chartData: {}
    },
    watch: {
        devices (newValue) {
            let chartData = this.chartData
            for(device in newValue) {
                let deviceValue = newValue[device]
                if(!chartData[device])
                    chartData[device] = []
                chartData[device].push([deviceValue.timestamp, parseInt(deviceValue.lux)])
            }
        }
    }
});

With v-for="device in chartData" ?

edited Apr 01 '18 at 09:15

answered Apr 01 '18 at 09:08

Thejaka Maldeniya

1,076
1
10
20

Thank you so much! it does give me the value of array for each separate device. However, the array is not passed into the `:data` I think it has to do something with the component. Thank you! – AlexT Apr 01 '18 at 21:15
@AlexTran, I don't know what line-chart component you're using and what format it expects the data to be in, but if the chartData[device].push() is passed a single array element in the proper format as expected by the line-chart, and you use v-for="device in chartData" and :data="device", I expect it should work... – Thejaka Maldeniya Apr 04 '18 at 06:36

VueJS - Push data into array in V-Bind

1 Answers1