CODEWITHSUNDEEP
streamingvegavega-lite
Fred DENIS
Fred DENIS

Reputation: 43

Vega Vega-lite streaming

I am starting using Vega and I am now trying to stream my data to nicely refresh my graph. I followed this doc (https://vega.github.io/vega-lite/tutorials/streaming.html) with no success so far. The examples I found have values in arrays and mine are in a JSON file which is refreshed on a regular basis. I ended up with this code which properly shows my graph as I want but it does not refresh my data.

<html>
  <head>
    <title>A title</title>
    <meta charset="utf-8" />

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

    <style media="screen">
      /* Add space between Vega-Embed links  */
      .vega-actions a {
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
        <script src="https://cdn.jsdelivr.net/npm/vega-embed@5"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
var vlSpec = {
  data: {"url": "http://localhost:8123/d.json", "name":"table"},
  mark: "bar",
  "width": 1240,
  "encoding": {
    "y": {"field": "task", "type": "ordinal", "sort":"x2"},
    "x": {"field": "start", "type": "temporal", "aggregate":"sum"},
    "x2": {"field": "end", "type": "temporal"},
    "color": {"field": "status", "type": "nominal"}
  }
};
// Embed visualization and save view as window.view:
vegaEmbed('#vis', vlSpec).then(function(res) {
  window.setInterval(function() {
    var changeSet = vega
      .changeset()
      .insert()              
    res.view.change('table', changeSet).run();
  }, 1000);
});
  </script>
</body>
</html>

My issue seems to be the insert() where in the example of the doc they insert the result of a function to generate data and I should insert here my JSON file -- I tried different variations with fetch but with no success.

Any help would be appreciated.

Thanks

Upvotes: 1

Views: 682

Answers (1)

Fred DENIS
Fred DENIS

Reputation: 43

Let me answer my own question as I figured it out.

First I used jquery:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

I removed the url tag not to load the JSON file at first:

  "data": {"name":'table'},

And the VEGA streaming data from my JSON file:

vegaEmbed('#vis', vlSpec).then(function(res) {
var newdata ;
  window.setInterval(function() {
  jQuery.getJSON("http://localhost:8123/d.json", function(data) {
  newdata = data;
})
    var changeSet = vega
      .changeset()
      .remove(vega.truthy)
      .insert(newdata)
      console.log (newdata)
    res.view.change('table', changeSet).run();
  }, 1000);
});

It works like a charm !

Upvotes: 2

Related Questions