Vega Lite Custom Charts

Help
1

Hi I noticed Vega Lite based custom charts today - looks promising.

However following your online docs, I can’t get the simplest example to work.

Basically copied the example and set up a time series over Amps.

However I just get “Invalid” indicator with no additional details.

Am I hopping in too early :wink:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": {{block.width}},
  "height": {{block.height}},
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "description": "AMPS Over Time.",
  "data": "time-series-0",
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "time",
      "type": "temporal",
      "timeUnit": "minutes"
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "axis": {"title": "Amps"}
    }
  }
}

Also it seems the code hilighting can’t deal with {{handlebars}} so it’s difficult to see how that would work.
You seem to use handlebars for things like {{block.width}} but not for the time-series-0

Look forward to this feature :wink:

T

2

Managed to get a valid schema but nothing displays. The same query in a Timeseries Graph has data so I know that bit is correct.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": {{block.width}},
  "height": {{block.height}},
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "data": {
    "values": "time-series-0"
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "time", "type": "temporal", "timeUnit": "minutes"},
    "y": {"field": "value","type": "quantitative","axis": {"title": "Level"}}
  }
}
3

Ok I didn’t follow the Losant docs as it does clearly uses"data": {“name”: “time-series-0”}

That was what was confusing me, as all the Vega examples use “data”: {“values”: []"}

making progress :wink:

T

4

Sounds like you figured it out! It is definitely a more complicated dashboard block, so we will be improving our documentation over time. There should also be a blog post coming out today or tomorrow with more examples. You have any other questions about it so far?

5

Not at this point.

I figured it was worth doing the train of thought posts, as it’s very easy to miss fine detail especially when one transposes the Vega docs, to your examples. Hope you didn;t mind.

The first thing that threw me was your mixing {{block.width}} with “time-series-0” for value subsitutions - so spent some time working checking that “time-series-0” wasn’t a typo :wink:

Also this statement in the top of the add widget screen through me - " add in your Vega-Lite spec here. Losant will append the data from each query built above to your spec under the datasets property."

What is the datasets property mentioned here?

6

Datasets are a Vega-Lite concept for specifying named and re-usable data sources (instead of the typical way of dumping your data inline on the data object). Essentially Losant is automatically adding the query results to the datasets object, which is then accessible by name elsewhere in your config.

"datasets": {
  "time-series-0": [{ "time": "...", "value": 000}, { ... } ]
},
"data": {
  "name": "your-variable-name"
}
7

Hello,

thanks for providing the great new feature.

My device has more then one field (e.g. field1 and field2). I would like to create a scatter chart (field1: X-achsis, field2: Y-achsis)

I could create a second time-series (time-series-1), but how to use this in the Vega-Lite structure.

Any help to solve this ?

Regards
Holger

8

You might be able to get what you’re looking for by building two different time series data sources and then using Vega-Lite’s Lookup Transform feature to merge them together.

From there, you should be able to use one of their many scatterplot examples to get the graph you’re looking for.

If you do get this figured out, please post the block configuration here as I’m sure many of our other users would love to also paint such a graph!

9

Thanks for the hint. I will try this, an post the result.

For now I found an easy work a round.

I created a table and send my values in the device workflow to the table. When I use the table in Vega-Lite as data source, I have access to all fields as required. Works perfectly.

Currently I try to figure out, to limit the time range based on an user interaction.

Regards
Holger

10

Hi Dylan

I am really struggling working out how to apply the lookup transform to visualize to separate time series queries as the X and Y values of a scatter plot.

Any hints or examples ?

T

11

I admit it took me a while but I finally figured this out.

Here I’ve configured a custom chart with two time series queries for the temperature in Boston and the temperature in Cincinnati.

43%20AM
Screen Shot 2018-12-01 at 11.56.43 AM.png1248×1070 55.2 KB

Then I set my Vega-Lite spec to the following …

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": {{block.width}},
  "height": {{block.height}},
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "data": {
      "name": "boston"
  },
  "transform": [{
    "lookup": "time",
    "from": {
      "data": {"name": "cincinnati"},
      "key": "time",
      "fields": ["value"]
    },
    "as": ["cincinnatiTemp"]
  }],
"mark": "point",
  "encoding": {
    "x": {
      "field": "value",
      "type": "quantitative",
      "scale": { "domain": [30, 60] }
    },
    "y": {
      "field": "cincinnatiTemp",
      "type": "quantitative",
      "scale": { "domain": [30, 60] }
    }
  }
}

Which results in this scatterplot comparing Boston temperature vs. Cincinnati temperature.

47%20AM
Screen Shot 2018-12-01 at 11.56.47 AM.png892×680 36.6 KB

Inline are some comments for parts of the spec above to better explain what’s going on …

{

  "data": {
      "name": "boston" // our primary data source, onto which we will add our other values. either query can be the primary, and we treat the other as the secondary
  },
  "transform": [{
    "lookup": "time", // the key to look up against in the primary data source. for comparing two time series queries in losant, you'll probably never change this. the value of this must match the value of from.key in the secondary data source to successfully match. i.e. if we have an entry for time 1234567890 in the primary source but not the secondary, we won't be able to plot the comparison
    "from": {
      "data": {"name": "cincinnati"}, // referencing our secondary data source, which is the second time series query we configured
      "key": "time", // the key to look up against in the primary data source. for comparing two time series queries in losant, you'll probably never change this
      "fields": ["value"] // we include this because we only want this property and not the whole object
    },
    "as": ["cincinnatiTemp"]  // matched by index against from.fields above, this is what we want to call the property we're appending to our primary data source
  }],
"mark": "point",
  "encoding": {
    "x": {
      "field": "value", // this is the name of the property on the primary data source, which we did not transform
      "type": "quantitative",
      "scale": { "domain": [30, 60] }  // not necessary, but included to make the graph prettier
    },
    "y": {
      "field": "cincinnatiTemp", // this is the name of the property to which we mapped our secondary data above
      "type": "quantitative",
      "scale": { "domain": [30, 60] } // not necessary, but included to make the graph prettier
    }
  }
}
1 Like
12

That example is perfect. I thought a transform was required, but was unsure how to approach.
There is a bit of magic in the Vega-Lite approach an some things are implied and not clear in the examples.

Thanks again for your help

T