Creating Embeddable Questions

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. You can get started by connecting a datasource to your Zing account. A large variety of datasources are supported by Zing such as Postgres, MySQL, Clickhouse, Microsoft SQL server, Google Sheets, Databricks, Excels and CSVs, etc.

In this example, we’ll connect to a Clickhouse database on Github Event data, then ask a question on Zing. We can then embed this question to your application.

Step 1: Connect your datasource

1. Log into the Zing Data console here.
2. Click on datasources.
3. Add new datasource.
4. Select your datasource type from the dropdown.

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 run queries and view questions.

Zing allows creating a question via the visual query builder, custom SQL or natural language. Let’s get started.

1. Click on the github_events table from the Home page or the Sources page.
2. Create a chart using the visual query builder. In here, I will create a question by grouping the event_type as the X axis and the get count of actions as the Y axis.

3. Click on Run Question to view the results. Once the results are displayed, you can save the question by clicking the three-dot menu and clicking “Save Question”.

You can also create a question via natural language by typing in your question in the search box on the home page. If you have more than one datasource, Zing Data will prompt you to select a datasource to run this natural language query against. An example natural language would be,

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. You can save this question by giving it a name - “Top 5 Github events in 2018”. The underlying SQL can be viewed for this question, by clicking on View question SQL. You can update the question via SQL if required.

That was fast and easy!

Step 3: Get configs for embedding

Detailed steps of creating the configs can be found here.

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 for your organziation. You will find this setting under the Organizations page in the console. Click on Settings on your paid (Pro tier) organization, and click on the Embeds tab. Next, click on the Generate API Key button. This will create an API key and an embed secret, which should be saved securly for later use in your source code.

Step 4: Integration (Source Code Updates)

As the next step, we should update the frontend and backend code to achieve the following. Detailed steps of integrating the Zing SDK can be found here.

• Create a secure session with Zing via your backend. Zing exposes an API endpoint for this purpose. User data should be sent in the payload of this API call.

  POST https://console.getzingdata.com/api/v1/embed-sessions
  

• Generate signed embed URL (For the question you want to embed, a signed URL should be generated which can be used only once and is validated by the server).
• Install the Zing SDK on your frontend and import the SDK and Zing CSS file.

  npm install @zingdata/zingdata-react
  

• Implement the ZingDataChart in your frontend using the signed embed URL, Zing API key and the one-time session token which was created earlier via the backend.

Refer our documentation to view the detailed steps and code snippets for integration.

Conclusion

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