# Time Series Graph

**URL:** <https://forums.losant.com/t/time-series-graph/4726>\
**Category:** Help\
**Tags:** dashboard\
**Created:** [September 12, 2022, 4:49pm UTC](https://forums.losant.com/t/time-series-graph/4726 "2022-09-12T16:49:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Maximiliano\_Gibert](https://avatars.discourse-cdn.com/v4/letter/m/a88e57/32.png) [@Maximiliano\_Gibert](https://forums.losant.com/u/Maximiliano_Gibert)\
**Post date:** [September 12, 2022, 4:49pm UTC](https://forums.losant.com/t/time-series-graph/4726/1 "2022-09-12T16:49:51Z")

</div>

Hi…Im trying to use this kind of dashboard with a string attribute´s tag.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/9/9ab11fbd0e569ed9d955513b1b6fd40f69c7ac59.png)

The red box is something I took on internet…when you have “string” values to will able to show on the dash use that. In fact I dont know why.

I want to use this kind of block to show the 3 different values of this attribute by the time. Something like that…

 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/6/6aee5806a69e5b8f16061d660d92dcbaf9461033.png)

but when a change the Resolution I have this…

 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/6/6f9efc64a397af35795ff1ad06e425b5ba47e0be.png)

it is as if it were adding up…I hope you understand what I try to say.

---

<div class="post-metadata">

**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\
**Post date:** [September 12, 2022, 5:43pm UTC](https://forums.losant.com/t/time-series-graph/4726/2 "2022-09-12T17:43:08Z")

</div>

The type of graph you’re building cannot be done using the built-in Time Series Block. It can, however, be done using the [Custom Chart Block](https://docs.losant.com/dashboards/blocks/custom-chart/). Here’s an example:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/1/17474253c8effa35a810185093f92573611c23e0.png)

Here is the query:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/5/5c6411bb66774670ee15b6b3d76d6a1d47ac1348.png)

The `currentStatus` attribute is a string, just like your example.

Here is the Vega configuration:

```auto
{
  "$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"]
      }
    }
  }
}

```

You’ll need to change the `domain` and `range` properties to match your string values and desired colors. Hopefully this helps point you in the right direction!