# Vega graph problem

**URL:** <https://forums.losant.com/t/vega-graph-problem/4005>\
**Category:** Help\
**Tags:** dashboard\
**Created:** [August 16, 2021, 7:17pm UTC](https://forums.losant.com/t/vega-graph-problem/4005 "2021-08-16T19:17:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\
**Post date:** [August 16, 2021, 7:17pm UTC](https://forums.losant.com/t/vega-graph-problem/4005/1 "2021-08-16T19:17:33Z")

</div>

I’m testing some data in a Vega Lite chart, that works in Vegas online editor but not in the Losant spec editor. I just want to bin some data. The first spec is working, the second is not.

**Spec1.**

```auto
{

  "width": {{block.width}},

  "height": {{block.height}},

  "autosize": {

    "type": "fit",

    "contains": "padding"

  },

      

  "description": "A simple time series chart.",

  "data": {

    "values": [

      {"a": "C", "b": 2},

      {"a": "C", "b": 2},

      {"a": "C", "b": 3},

      {"a": "D", "b": 3},

      {"a": "D", "b": 5},

      {"a": "D", "b": 5},

      {"a": "E", "b": 5},

      {"a": "E", "b": 8},

      {"a": "E", "b": 9}

    ]

  },

  "mark": "point",

  "encoding": {

    "x": { "field": "a", "type": "ordinal" },

    "y": { "field": "b", "type": "ordinal" }

      }

    

}

```

**Spec 2.**

```auto
{

  "width": {{block.width}},

  "height": {{block.height}},

  "autosize": {

    "type": "fit",

    "contains": "padding"

  },

      

  "description": "A simple time series chart.",

  "data": {

    "values": [

      {"a": "C", "b": 2},

      {"a": "C", "b": 2},

      {"a": "C", "b": 3},

      {"a": "D", "b": 3},

      {"a": "D", "b": 5},

      {"a": "D", "b": 5},

      {"a": "E", "b": 5},

      {"a": "E", "b": 8},

      {"a": "E", "b": 9}

    ]

  }"mark": "bar",

  "encoding": {

    "x": {"bin":{"binned": true, "step": 1},"field": "b"}

  , "y": {"aggregate": "count"}}

    

}

```

---

<div class="post-metadata">

**Author:** ![Heath](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/heath/32/3036_2.png) [@Heath](https://forums.losant.com/u/Heath)\
**Post date:** [August 16, 2021, 8:24pm UTC](https://forums.losant.com/t/vega-graph-problem/4005/3 "2021-08-16T20:24:06Z")

</div>

Hey @Lars_Andersson,

Would you be able to give me more information on:

> The first spec is working, the second is not.

Are you seeing an error? Would you be able to include a screenshot of that error if so?

Taking a closer look at the code you sent along, in Spec 2 it looks like you’re missing a comma right before `"mark": "bar",`

Is that a copy/paste error?

Thank you,  
Heath

---

<div class="post-metadata">

**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\
**Post date:** [August 16, 2021, 8:41pm UTC](https://forums.losant.com/t/vega-graph-problem/4005/5 "2021-08-16T20:41:01Z")

</div>

The first spec is working, meaning it’s not the data set that is wrong since it’s the same in both specs.  
The second spec does not give me an error other than showing “Invalid Vega-Lite v3 config”.

The missing comma was just a copy /paste error. It’s there.

---

<div class="post-metadata">

**Author:** ![Heath](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/heath/32/3036_2.png) [@Heath](https://forums.losant.com/u/Heath)\
**Post date:** [August 17, 2021, 1:48pm UTC](https://forums.losant.com/t/vega-graph-problem/4005/7 "2021-08-17T13:48:03Z")

</div>

@Lars_Andersson,

I got this configuration to work:

```auto
{
  "width": {{block.width}},
  "height": {{block.height}},
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "description": "A simple time series bar chart.",
  "data": {
    "values": [
      {"a": "C", "b": 2},
      {"a": "C", "b": 2},
      {"a": "C", "b": 3},
      {"a": "D", "b": 3},
      {"a": "D", "b": 5},
      {"a": "D", "b": 5},
      {"a": "E", "b": 5},
      {"a": "E", "b": 8},
      {"a": "E", "b": 9}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "type": "ordinal",
      "bin": true,
      "field": "b"
    },
    "y": {"aggregate": "count", "type": "ordinal"}
  }
}

```

You had a few things going on:

- `"binned": true` was unnecessary.
- `"step": 1` is invalid in vega-lite v3
- x and y axis `types` were required

I used the [Vega Editor](https://vega.github.io/editor/#/) to help me debug this, as well as read through the Vega [documentation](https://vega.github.io/vega-lite/docs/mark.html#mark-def).

Let me know if this helps.

Thank you,  
Heath

---

<div class="post-metadata">

**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\
**Post date:** [August 17, 2021, 2:01pm UTC](https://forums.losant.com/t/vega-graph-problem/4005/9 "2021-08-17T14:01:12Z")

</div>

Yes, I figured out that the ntypes was required.  
But meanwhile I got it to work using “binned”: true and “step”:1. (using Lite v3)

I wanted to see each integer as a bin.