How to build Zoomdata Visualizations
Zoomdata offers a rich set of predefined templates and the possibility to build your own visualizations based on defined templates.
Zoomdata provides several ways to get aggregated or plain data form a database, let’s take a look at the details of each of these mechanisms.
Link to working example
Visualization Web Component creation described in: https://medium.com/@DmytroGladkyi/creating-visualization-web-component-a01dbcc5102c
Client configuration
Credentials key can be obtained from the saved dashboard interactive link:
The query configuration includes parameters such as timezone, type of time player representation, data filters and aggregations by groups and metrics.
The visualization template is an entity with objectFields which describe visualization meta data: the metrics, groups aggregations, color and other parameters. There is a possibility to create custom visualizations based on selected templates.
Create and run query (runQuery)
The method returns a promise with Query Client which allows the query to run and get data from the web-socket which passes directly to visualization (buildViz).
Create client, run query and listen for a data thread (run)
This is the same as in the previous example the method returns a promise with Query Client which allows the query to run and listen for a data thread to obtain data for building visualization.
Visualize template directly via Zoomdata API (visualize)
Apart from other two methods client.visualize builds the selected visualization template based on the provided data and does not allow it to pass the custom chart source code.
Visuaization code
Visualizations can be built based on different JS libraries. It can be D3, ECharts, Plotly, and many others. As an example in this article let’s take a look at the visualization code, written on ParticleS library — Zoomdata library for building high performant charts.
The visualization tooltip can be initialized with the next lines of code:
Any other JS chart library can be used in similar ways for building custom charts with Zoomdata. In the next articles I will show you how to build Zoomdata visualizations using ECharts and D3 libraries, and which key methods can be used in Zoomdata native template visualizations.
