Creating Embeddable Questions with OpenAI

With Zing Data, you can now integrate your questions and dashboards into your own frontend application. Here’s a primer on how to get started with embedded analytics. We’ll first connect to a Clickhouse database on Github Event data, then use Zing’s natural language query feature to ask a question in plain text. We can then embed this question on a frontend app.

Step 1: Connect to ClickHouse

1. Log into the Zing Data console here
2. Click on datasources
3. Add new datasource

Let’s add a ClickHouse playground datasource with the following credentials

Host: https://play.clickhouse.com
Port: 443
Database: default
Username: play

Let’s select the github_events table for us to analyze.

Step 2: Create Question

Now click on Zing App on the navigation bar where you can now run queries and view questions.

If you have a few datasources, Zing Data will prompt you to select a datasource to run this natural language query against. Select the clickhouse data source.

Show me the top 5 events grouped by event_type in the year 2018

Zing Data will infer your query using our AI inference engine assisted by openAI to get you to a data visualization.

That was fast and easy!

Let’s save this question and give it a title - Top 5 Github events in 2018

Step 3: Get configs

1. On the question, you can now see embed options.

This will give you an embed ID that will be used to reference this question.

2. Now we need to generate an API key at the org level. You will find this setting under the Organizations in the console.

Step 4: SDK

Now, on your frontend app, you can use the Zing Data SDK available on NPM as

npm install @zingdata/zingdata-react

After this, you can add embed code using the steps detailed here.

Conclusion

And that’s it! You have now created an embeddable data visualization using Zing Data’s natural language feature with openAI.