[Solved] On/Off - green/Red

Seen some of your example graph of on/off status with just green/red blocks filling the graph. Which block/configuration was used?

I think you are referring to the Indicator Block - you can customize the color and text based on various expressions you provide.

No it was shown in a historical graph, to easily see when a machine had been on or off

Can you provide a link to where you saw this? We’d be happy to elaborate on its configuration if we know specifically which graph you’re talking about. Thanks.

I’m having a hard time finding it now. I know it was in a slide that Taron showed from a plant.

Was it this?

Yes!

Is it just a scale of 0 to 1 or something?

That’s driven by a currentStatus string attribute on the device. Each status value is then represented as a color on that chart. The available status strings are “alarm”, “cutting”, “notCutting”, “stopped”.

The status is read from the device (CNC machine for this example) on a fixed 1 minute interval:

A custom chart is then used to render it horizontally like that. Each graph is 24 hours. Each vertical bar represents 5 minutes.

Here’s the complete Vega configuration:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": {{block.width}},
  "height": {{block.height}},
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "data": {
    "name": "time-series-0"
  },
  "mark": {
    "type": "bar"
  },
  "config": {
    "axis": {
      "labels": false,
      "domain": false,
      "ticks": false,
      "grid": false
    },
    "view": {
      "fill": "transparent",
      "stroke": "transparent"
    },
    "scale": {
      "bandPaddingInner": 0
    }
  },
  "encoding": {
    "x": {
      "field": "time",
      "type": "ordinal",
      "axis": null
    },
    "y": {
      "field": "value",
      "type": "ordinal",
      "scale": {
        "domain": []
      },
      "axis": null
    },
    "color": {
      "field": "value", "type": "ordinal",
      "legend": null,
      "scale": {
        "domain": ["alarm","cutting","notCutting","stopped"],
        "range": ["#BD0000","#8DB319","#29ABE2","#B3B3B3"]
      }
    }
  }
}

The status strings are essentially arbitrary, so you can set those to whatever you want and then change the Vega config to visualize them appropriately.

Resurrecting a dead thread.

I cannot get the above to work. It doesn’t throw any errors, but also doesn’t render any data.

Does the information have to be on a regular interval?
Does it have to be a string?

I used this code snippet to see if it works, and it does with hardcoded data, but not when I try to reference my time series data

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"state": 0, "time": "2019-10-01"},
      {"state": 2, "time": "2019-10-02"},
      {"state": 0, "time": "2019-10-03"},
      {"state": 1, "time": "2019-10-04"},
      {"state": 0, "time": "2019-10-05"},
      {"state": 0, "time": "2019-10-06"},
      {"state": 1, "time": "2019-10-07"}
    ]
  },
  "mark": "bar",
  "encoding": {"x": {"field": "time"}, "color": {"field": "state"}},
  "config": {
    "axis": {"labels": true, "domain": true, "ticks": false, "grid": false},
    "view": {"fill": "transparent", "stroke": "transparent"},
    "scale": {"bandPaddingInner": 0}
  }
}

Welcome to the Losant Forums, Gene!

Gene Parmesan

I plugged your sample in and see it painting a chart as well, so some questions to get to the bottom of this …

  • What does your configuration look like for block’s data query? A screenshot will do.
  • Are you sure that your query is returning data? You can open your browser’s Network tab and find the request to https://api.losant.com/dashboards/YOUR_dashboard_ID/data while on the block editor screen and view the response. A screenshot of an example that is not returning data is below.
  • What configuration are you applying in your actual block config (not the sample you’ve provided here)?

Always nice to meet a fan haha.

I do have an empty dataset coming back from the API post request, like you’ve shown.

My dataset query looks like:

My block config is:

{
  "data": {
    "name": "time-series-0"
  },
  "mark": "bar",
  "encoding": {"x": {"field": "time"}, "color": {"field": "value"}},
  "config": {
    "axis": {"labels": true, "domain": true, "ticks": false, "grid": false},
    "view": {"fill": "transparent", "stroke": "transparent"},
    "scale": {"bandPaddingInner": 0}
  }
}

I also tried with the original (I only have 2 states and they are enumerated 0,1)

{
  "width": {{block.width}},
  "height": {{block.height}},
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "data": {
    "name": "time-series-0"
  },
  "mark": {
    "type": "bar"
  },
  "config": {
    "axis": {
      "labels": false,
      "domain": false,
      "ticks": false,
      "grid": false
    },
    "view": {
      "fill": "transparent",
      "stroke": "transparent"
    },
    "scale": {
      "bandPaddingInner": 0
    }
  },
  "encoding": {
    "x": {
      "field": "time",
      "type": "ordinal",
      "axis": null
    },
    "y": {
      "field": "value",
      "type": "ordinal",
      "scale": {
        "domain": []
      },
      "axis": null
    },
    "color": {
      "field": "value", "type": "ordinal",
      "legend": null,
      "scale": {
        "domain": [0,1],
        "range": ["#BD0000","#8DB319"]
      }
    }
  }
}


Yesterday I had polled and reported the state every second for a couple hours, but then reduced it to 1/hour (to save payloads while I’m demoing). So my dataset is going to be a little out of whack and not on a normal interval.

Well there’s your problem right there. Does the device you’ve selected have a number-type or boolean-type attribute attribute called “state”? And if so, has that attribute reported any values in the last 24 hours?

An easy way to check this is to visit the detail page for your “demoRouter” device and check the “Data” tab.

Ah Excellent!

Looks like the attributes are case sensitive.

I had state, but was writing to State!

Thank you for the quick help

1 Like