Creating a Dynamic Tulip Gantt Chart: API calls

Show and Tell
, ,
1

Our accomplished team at DataAbsolute embarked on a transformative journey to create a dynamic Gantt chart using Tulip. Today, we are delighted to share the intricacies of our project with the Tulip community. In this detailed guide, we will unfold the step-by-step process that empowered us to seamlessly integrate Tulip Tables, API Bots, Connectors, and Custom Widgets, ultimately resulting in a visually stunning and interactive Gantt chart.

Steps:

  1. Create a Tulip Table Schema & generate Request URL using API Bot : The first step is to create a Tulip Table Schema and generate a Request URL using the Tulip API Bot. You can use the Tulip Platform to create a new table schema and add the necessary columns and rows. Once you have created the table schema, you can generate a Request URL using the Tulip API Bot.

  2. Use API URL, API key, Secret, Authorization Header to fetch data in the connector : Once you have generated the Request URL, you need to use the API URL, API key, Secret, and Authorization Header to fetch data in the connector. You can use the Tulip Platform to create a new connector and add the necessary code. Make sure that the connector is designed to fetch the data from the Tulip API using the Request URL.

  3. Create Object & Filters to generate JSON as output : The next step is to create an object and filters to generate JSON as output. You can use the Tulip Platform to create a new object and add the necessary filters. Make sure that the filters are designed to generate the JSON output that you need for your Gantt chart.

  4. Pass the User Input in the Connector using Trigger : Once you have created the object and filters, you need to pass the user input in the connector using a trigger. You can use the Tulip Platform to create a new trigger and add the necessary code. Make sure that the trigger is designed to pass the user input to the connector.

  5. Store Filtered Connector output in a variable : The next step is to store the filtered connector output in a variable. You can use the Tulip Platform to create a new variable and add the necessary code. Make sure that the variable is designed to store the filtered connector output.

  6. Pass the variable in Custom Widget as Props : Once you have stored the filtered connector output in a variable, you need to pass the variable in the custom widget as props. You can use the Tulip Platform to create a new custom widget and add the necessary code. Make sure that the custom widget is designed to receive the variable as props.

  7. Retrieve the data from Props in Custom Widget using JavaScript : The next step is to retrieve the data from props in the custom widget using JavaScript. You can use the Tulip Platform to create a new JavaScript file and add the necessary code. Make sure that the JavaScript file is designed to retrieve the data from props and use it to create your Gantt chart.

  8. Generate a Chart in div & import it from custom widget into Application : Once you have retrieved the data from props and used it to create your Gantt chart, you need to generate a chart in div and import it from the custom widget into your application. You can use the Tulip Platform to create a new div and add the necessary code. Make sure that the div is designed to display your Gantt chart.

  9. Create an Event to share functionality from Custom Widget to App : Finally, you can create an event to share functionality from the custom widget to your application. You can use the Tulip Platform to create a new event and add the necessary code. Make sure that the event is designed to share the functionality from the custom widget to your application.

2

Hi Akshay, thanks for sharing! Do you have screenshots or videos of your gantt chart that you can share with the community as well? Would be great to see it in action.

Also, I am going to move this to the “Show and Tell” category, since that is a greta spot for this type of content :slight_smile: