Jaeger like UI of trace span of Opentelemetry

Question

I have json data from backend like this :

Field Name              Type
traceSpanData           Array
    name                String
    context             Object
        traceId         String
        spanId          String
    parentId            String
    startTime           String
    endTime             String
    attributes          Object
        http.route      String

And with these data, I need to make trace span graph like the following picture.

How do I do it? I am using vue 3, compostion api ( script setup ), I have tried to make Gantt chart with chartjs, but I cannot customize the y axis label, ( in the picture, the labels on y axis are in a tree like structured) Any idea what can I do to make a chart like the picture?

Answer 1

Not sure if your intention is to make an independent UI or just visualize the data, but for the latter you can convert your data shape into OpenTelemetry JSON format and upload it into Jaeger UI (supported in the most recent release).