Data visualization as <HTML> tags

ZD
GoodData Developers
3 min readFeb 12, 2021

--

Data visualizations with GoodData.UI is as easy as writing HTML tags. For example, this <ColumnChart/> tag displays a column (aka bar) chart:

<ColumnChart 
measures={[Ldm.Revenue]}
viewBy={[Ldm.DateMonthYear.Long]} />
Bar chart data visualization displayed by the one-line code above

You can play with the tags in this sandbox. The supported tags are documented here. By the way, the framework is open-sourced.

Github sandbox with preloaded GoodData.UI

You can also check out the GoodData gallery for many different examples.

GoodData data visualization gallery

Generate whole application boilerplate

The GoodData.UI includes a useful create-gooddata-react-app command-line tool that generates a complete React application with placeholders for your data visualizations.

Can my users create their own data visualizations?

Sure they can. After you add a couple of data visualizations to your app, your users start requesting their customizations. They’ll want to modify the calculations behind your charts or to slice your numbers by different dimensions, use a pie chart instead of a bat chart, change colors, and many others. The best way how to satisfy these requests is to give them a self-service analytics tool that they can use to create their data visualizations themselves. With GoodData, you can embed their visual drag-and-drop Analytical Designer tool in your application.

Analytical Designer tool embedded in a Javascript application

Your users can also create interactive dashboards from the individual data visualizations that they create in the Analytical Designer.

Custom interactive dashboard embedded in Javascript application

GoodData provides a visual Dashboard editor that you can also embed into your app:

Dashboard editor embedded into Javascript application

Where does the data come from?

GoodData stores your data in a workspace that can be periodically refreshed from your original data source (e.g. CSV files or database).

Data are structured in the Logical Data Model that makes it easy for you and your users to create new data visualizations. The data model can be quickly created from your data.

Creating GoodData logical data model from CSV files

How about advanced calculations?

This is what metrics do. Metrics are scripted in a very simple language called MAQL. With MAQL you and your users can create any data calculation with few lines of code. Moreover, your users can create their metrics from your metrics. You can learn more about the MAQL language here.

How I deliver this to all my users?

GoodData packages analytics in workspaces. There is one workspace for every tenant (your customer — an organization with multiple users). The workspace contains everything that your users need — the data, data model, calculations, data visualizations, dashboards, permissions, etc. You can think of a workspace as a sandbox where your users can customize these objects without affecting others. If you want to learn more, watch the first video of this 15 minutes course.

How can I try it?

Sign up for the GoodData is free. You can also check out the Gallery that shows many interactive examples with code snippets.

How much will I pay?

Nothing, at least initially. GoodData is free for up to 5 tenants (don’t count users).

--

--