Embedded Analytics

Transforming Your Application’s Analytics in 30 Minutes

By Hayley Wilson
Share on LinkedIn Tweet about this on Twitter Share on Facebook

By leveraging modern capabilities of embedded analytics development environments, such as data and visual authoring, developers can rapidly build beautiful interactive dashboards that their end users will love. Let’s look at how Logi Composer can fully transform an application in just 30 minutes.

This screenshot is an example of a common implementation that we see in the field with some of our partners. Looking at this existing application, we notice that the dashboard is completely static. As an end user of this application, I’m unable to slice and dice data to find insights.

Additionally, for your developers, developing all this content using open-source libraries takes a lot of time to code in JavaScript. Plus, adding interactivity or creating a self-service dashboard, if it’s even possible, is very time-consuming for your core development team. We want to give the end user the power to interact with a dashboard like this one, and we also want to save time and resources for your developers.

This is why we’re going to use Logic Composer to transform this into a more modern interactive dashboard. Logi Composer is the first out-of-box development experience for embedded analytics. Let’s look at the process from end to end.

Establish a Direct Data Connection

The first step is to establish a direct connection to existing data sources. All I need is a connection string and nothing more. For this example, I’m going to use an upload API to add in a real-time sales data stream to build out a real-time dashboard. I’m going to start from the Source tab, click on Add Source, and name this data set “New Real-Time World Sales.”

Instead of typing out my JSON structure of what my data format will look like, I can immediately go in and import a sample of my data. After that, we have some very light data preparation setup. For example, I can quickly change the alias, my time of granularity, and my price column data format.

If we wish to go ahead and start creating calculated metrics, we can also do that here using the UI itself. The last important step before we can start creating content is to set up global defaults. For example, to make our new data set real-time, I just click on this Live Mode button—and my rates of data coming in will be one second.

Add Visualizations

Next, on the left-hand side, we can begin to exert more control over our end user’s experience. We have a list of standard visualizations out of the box (see image above). But for example, if the box plot is too much for my users to handle, I can take that out as an option. So, users wouldn’t accidentally create a chart and be unsure what this chart does. Now I save the data set and we can jump into creating a dashboard from scratch.

Create the Dashboard

I’m hitting the New Dashboard button and I can go ahead and add some new visualizations based on the data set that we have just set up. I’ll be able to select a data set and the information I want to display very easily in a drag-and-drop manner. Within a millisecond we can put together a general layout for our dashboard.

Now is time to make some more adjustments. Perhaps I want the bar chart on the left-hand side to group my sales reps by name instead of country. All I need to do is click on the Group button and adjust that quickly. No matter what type of chart I want to customize, I’ll use the panel on the right-hand side. So, as a developer, I can quickly put together a dashboard without having to write any code.

Add Interactivity 

Now that we’ve given our users a modern-looking dashboard, we also want to empower them to make decisions. All of the charts in Logi Composer, by default, come with interactivity. So, users can immediately say, “I want to jump in, slice and dice on Tiffany’s sales record based on country and perhaps take a look at her sales by trend and adjust the granularity.” And lastly, if we want to get to the detailed data immediately, we can also just click on the Detail button. We can perform filters across the entire dashboard very easily.

Now, a common desire when providing out-of-the-box interaction like this is that we also want to maintain control and really tailor our user experience—and we can do that with Logi Composer, too!

Tailor the Experience

In my example, the dashboard is going to serve sales reps. The full-blown interaction radio menu might be too much and I want to be able to really tailor that for my persona. Without having to touch JavaScript, we can again use our interaction editor on the right-hand side and very easily turn those other options off. So, when I come back, there is only two of those available. And this could also be done on a per chart basis.

I’m fairly satisfied with this new dashboard, so I’m going to quickly save it. Let’s call this Hayley’s Dashboard. Now it’s time to replace our old dashboard.

Embed the Dashboard 

To embed the dashboard in our existing application, we again go to the right-hand side. Under Actions, you’ll see we have an Embed button. This generates the embed snippet automatically—and if we look closely, we’ll see that it’s just pure JavaScript. We can adjust other things here as well. For example, if I want to change it to a Logi modern theme and show the header when I embed, I can interact with the menu and it will programmatically add in or adjust the script that is displayed for me to copy and paste.

Let’s go ahead and copy that to my clipboard. Jumping into the HTML off my page, I was using an image to represent the older dashboard. So, let’s go ahead and comment those outs. And for my new Logi content, I have to find a div tag where the Logi dashboard will live. Let’s enable the div and I am now going to paste in that embed script that I have copied from the dashboard we just built. I’ll hit Save, come back and give it a refresh.

And voila! We’ve built out a fully interactive dashboard with real-time streaming data. The dashboard looks exactly as we configured it, and end users will get the tailored options we have set up as developers.

However, Logic Composer doesn’t stop here. We can also give developers even more control and creativity using the API first approach. To learn how you can use Logi Composer to achieve a deeper level of integration with your platform, view the full on-demand webinar.

Originally published October 15, 2020

About the Author

Hayley Wilson is a Solutions Engineer at Logi Analytics. She develops prototypes using Logi Analytics software, modern Web technologies, and modern data tier technologies and also conducts thorough technical evaluations and "proof of concept" demonstrations of Logi Analytics software.