Using Vega to group lines based on nested objects in an array

Question

I am trying to draw multiple lines in opensearch vega based on the nested object keys inside and array. My response from opensearch looks like below: My X axis is Date and I should have multiple Y axis based on the Type array which the category is the key and the value is the MAX_TPS.

Something like this: Example for the desired style How can I do that in Vega note that I am new to Vega and I have no experience. The only thing that I was able to achieve is to get the data from opensearch based on url data source where I defined my index, context, timefield, and body. I have also defined format: {property: "aggregations.maxtps30min.value"} and mark: {type: "line", width: {band: 1}, "point": true}

{
    "took": 1549,
    "timed_out": false,
    "_shards": {
        "total": 20,
        "successful": 20,
        "skipped": 0,
        "failed": 0
    },
    "hits": {
        "total": {
            "value": 10000,
            "relation": "gte"
        },
        "max_score": null,
        "hits": []
    },
    "aggregations": {
        "maxtps30min": {
            "value": [{
                    "Type": [{
                            "MAX_TPS": 150,
                            "key": "TVAPP1"
                        },
                        {
                            "MAX_TPS": 145,
                            "key": "PPAPP2"
                        }
                    ],
                    "Date": "2024-02-29 11:30:00"
                },
                {
                    "Type": [{
                            "MAX_TPS": 147,
                            "key": "TVAPP1"
                        },
                        {
                            "MAX_TPS": 150,
                            "key": "PPAPP2"
                        }
                    ],
                    "Date": "2024-02-29 12:00:00"
                },
                {
                    "Type": [{
                            "MAX_TPS": 132,
                            "key": "TVAPP1"
                        },
                        {
                            "MAX_TPS": 133,
                            "key": "PPAPP2"
                        }
                    ],
                    "Date": "2024-02-29 12:30:00"
                },
                {
                    "Type": [{
                            "MAX_TPS": 132,
                            "key": "TVAPP1"
                        },
                        {
                            "MAX_TPS": 129,
                            "key": "PPAPP2"
                        }
                    ],
                    "Date": "2024-02-29 13:00:00"
                },
                {
                    "Type": [{
                            "MAX_TPS": 135,
                            "key": "TVAPP1"
                        },
                        {
                            "MAX_TPS": 133,
                            "key": "PPAPP2"
                        }
                    ],
                    "Date": "2024-02-29 13:30:00"
                },
                {
                    "Type": [{
                            "MAX_TPS": 161,
                            "key": "TVAPP1"
                        },
                        {
                            "MAX_TPS": 147,
                            "key": "PPAPP2"
                        }
                    ],
                    "Date": "2024-02-29 14:00:00"
                },
                {
                    "Type": [{
                            "MAX_TPS": 115,
                            "key": "TVAPP1"
                        },
                        {
                            "MAX_TPS": 88,
                            "key": "PPAPP2"
                        }
                    ],
                    "Date": "2024-02-29 14:30:00"
                }
            ]
        }
    }
}

Answer 1

I suggest you refer to the vega and vega lite githuib sites for some good examples as a starting point.

Vega example:

https://vega.github.io/vega/examples/line-chart/

Vega lite example:

https://vega.github.io/vega-lite/examples/line_color.html

Happy charting!

Adam