Vega Lite Custom Charts


#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