CODEWITHSUNDEEP
javascriptchartsvega-litevega
nifeco
nifeco

Reputation: 211

Vega lite: How to match speific y-axis field with x axis labels?

My data is in the following structure:

[
  {
    "pre_120": 0,
    "pre_90": 0,
    "pre_60": 0,
    "post_60": 100,
    "post_90": 150,
    "post_120": 200,
    "type": "Mango"
  },
  {
    "pre_120": 0,
    "pre_90": 0,
    "pre_60": 0,
    "post_60": 90,
    "post_90": 140,
    "post_120": 190,
    "type": "Apple"
  }]

Here I want to plot 2 lines in the chart, for each type i.e. 'Apple' and 'Mango'.

The x axis is fixed : ["Pre 120", "Pre 90", "Pre 60", "0", "Post 60", "Post 90", "Post 120"]

For the Y axis, I wanted to plot the specifics fields with the x-axis labels.

Example, for 'Mango', the first point for the line starting should be using field value "pre_120" to be plotted on the chart wrt "Pre 120" label present on the x-axis, "pre_90" field value to be matched with "Pre 90" label on the x-axis and so on till one line is formed for one row.

I have attached the link to the editor where I have made the framework but cannot understand how to use the y axis values.

https://vega.github.io/editor/#/gist/5dc4bc6633fa2496cd3c79af6fd65a3f/chart_issue2.json

Below is the expected chart

Expected resultant chart

Upvotes: 0

Views: 273

Answers (1)

davidebacci
davidebacci

Reputation: 30174

enter image description here

{
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "width": 800,
      "height": 200,
      "data": {
        "values": [
          {
            "pre_120": 0,
            "pre_90": 0,
            "pre_60": 0,
            "post_60": 100,
            "post_90": 150,
            "post_120": 200,
            "type": "Mango"
          },
          {
            "pre_120": 0,
            "pre_90": 0,
            "pre_60": 0,
            "post_60": 90,
            "post_90": 140,
            "post_120": 190,
            "type": "Apple"
          }
        ]
      },
      "transform": [
        {"fold": ["pre_120", "pre_90", "pre_60", "post_60", "post_90", "post_120"]}
      ],
      "layer": [
        {
          "mark": "line",
          "encoding": {
            "x": {
              "field": "key",
              "sort": [
                "pre_120",
                "pre_90",
                "pre_60",
                "0",
                "post_60",
                "post_90",
                "post_120"
              ]
            },
            "y": {"field": "value", "type": "quantitative"},
            "color": {"field": "type", "type": "nominal"}
          }
        }
      ]
    }

Upvotes: 1

Related Questions