How to build a Gantt visualization using Vega?

OpenSearch Dashboards
1

Versions (relevant - OpenSearch/Dashboard/Server OS/Browser):

  • Open Search: 3.2
  • Open Search Dashboards: 3.2
  • Local instance via Docker Compose (Linux, Chromium-based browser)

Describe the issue:
I’m working on building a dynamic Gantt chart visualization in OpenSearch Dashboards using Vega, since the built-in Gantt visualization was removed since version 3.0.

My goal is to create a project/epic timeline (eventually importing data from Jira), so that I can visualize project status dynamically for reporting.

I am trying to use Vega for Gantt charts on OSD, and I tried to replicate the Vega timeline example. My next step is to save this data to an OpenSearch index and reference it dynamically in Vega.

I also looked at this official example:

However, I found the instructions unclear, especially regarding setting up the pipeline and data ingestion (my data will come from Jira’s API; I have experience using Logstash for Kibana, if that helps).

Questions:

  • Has anyone here successfully built a dynamic (index-driven) Vega visualization in OSD, especially for Gantt-style charts? Even if it’s not a Gantt chart, I’d be glad to learn from your experience.
  • Can you share the main steps, key code snippets, or tips for ingesting and visualizing time-interval data?
  • Any lessons learned or best practices for connecting to custom data sources (like Jira) for this use case?

I’m happy to share my final solution back with the community once I get this working!

Here’s a screenshot of my current results.

image
image2392×1223 251 KB

2

P.S. Since I can’t add more than one link in the main post or this comment due to being new here, I’m only sharing my hard-coded data gist:

If you need references for anything else I mentioned (for example, the removal of Gantt since version 3.0), just let me know. I’m happy to provide them!