Vega graph problem

Help
1

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.

{

  "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.

{

  "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"}}

    

}
3

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

5

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.

7

@Lars_Andersson,

I got this configuration to work:

{
  "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 to help me debug this, as well as read through the Vega documentation.

Let me know if this helps.

Thank you,
Heath

9

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.