Dashboarding non device data

[Christopher_Penney]

Is there a way to dashboard non device data i.e data tables, 3rd party dbs, api services, etc?
Would like to try to do some simple business kpi displays similar to geckoboard or powerbi.

That would be a big sell, particularly if it means your customers could avoid having to pay for a separate service for the BI visualizations.

Either way, adding data tables as a dashboard source would be very useful

[Michael_Kuehl]

You actually can already do this! The Custom Chart block allows you to query and graph data table data, and in addition, you can reference external data source URIs in the chart JSON configuration as well.

[Christopher_Penney]

@Michael_Kuehl nearly every request i have is already there i just didnt look hard enough. ha. thanks!

[Eckehard_Fiedler]

Is there any way to debug the requested data in a custom dashboard? Currently we are ending up with a blank page if - whatever - is going wrong.

[JuliaKempf]

Hello!

I would recommend performing the same query as in the dashboard, but within in a workflow. You will be able look at the payload to see how the data is coming through.

Hopefully this helps,
Julia

[Eckehard_Fiedler]

Hy Julia,

a)
How to get a value from a data source in and out of a workflow

b)
How to bring the value to Vega

is there any example how to do this? Many thanks for some advice.

Best regards, Eckehard

[JuliaKempf]

Hello @Eckehard_Fiedler,

Here are some walkthroughs and examples, let me know if they are unclear in any way!

Replicating Custom Chart Block Data in a Workflow

For your first question, I use the equivalent workflow node for the query I am performing. For example, if I have a Custom Chart block with a Time Series query, like so:

I can replicate how the data will be output by using the Data: Time Series node. I set the values and parameters to be the same as my custom chart block, and am able to see on the payload how my data will be shown.

Upon inspecting my page, you can see that the data from the payload is in the same format:

Your second question has two possible paths. The first route is available if you are trying to show one value. The Vega Lite block is only able to display one query value in its current state. You will also not be able to reference multiple device attribute values, as the configuration syntax will only allow for one “name” value. Likewise, the data available for your selected attribute is limited to time and value, the name of the attribute is unaccessible.

The other option you have is to take the Experience route. Here is a great workflow by @anaptfox for working around the single query limit:

Plotting Custom Chart Data with Experience Endpoints

Start by creating a new Experience Endpoint with a Get method:

Next, create an Experience Workflow for your Endpoint. When the Endpoint is triggered, this workflow grabs three of my devices with the Device: Get Node and puts them on the payload. I have “Include the most recent composite state reported” checked on all of these, so that I can easily grab the last value and the time it was reported. This makes it easier to find those “last reported state” values you are looking for.

Here you can see what the Device: Get Node puts on the payload:

Next is a Loop Node containing a Mutate Node and an Array Node. The Mutate Node moves the values we want from compositeState to the current object and the Array Node creates an array with these values.

We conclude the workflow with the Endpoint Reply, and set the response body to the result.data payload path.

Now, we can move right along to our Custom Chart block.

This Custom Chart takes no queries, as the data will be accessed via the Endpoint. The code for Vega Lite is as follows:

  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {"url": "https://YOUR-APPLICATION-ID.onlosant.com/data?t={{block.time}}"},
  "width": {{block.width}},
  "height": {{block.height}},
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "encoding": {
    "y": {
      "field": "name",
      "type": "nominal"
    },
    "x": {
      "field": "temperature",
      "type": "quantitative"
    },
    "color": {
      "field": "name",
      "type": "nominal",
      "scale": {
        "range": [
          "#EA98D2",
          "#659CCA",
          "red"
        ]
      }
    }
  },
  "layer": [
    {
      "mark": "bar"
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "middle",
        "dx": 3
      },
      "encoding": {
        "text": {
          "field": "temperature",
          "type": "quantitative"
        }
      }
    }
  ]
}

This code calls the data with the Endpoint URL, and the {{block.time}} value allows for the value to b updated each time the dashboard is.

Let me know if you have any questions!
Julia