Development Tips

Logi Tutorial: How to Add Interactive Visualizations to Your Dashboards

By Matthew Grogan
Share on LinkedIn Tweet about this on Twitter Share on Facebook

This is the second blog in my series on how to build an analytic application in just 30 minutes using Logi Info. We already talked about how to connect your data source. The next step is to create a basic layout and add visualizations to your dashboard, and finally to add interactivity to those visualizations. With Logi, this is simple using the Dashboard element and wizard.

>> Related: How to Build An Analytic Application in 30 Minutes <<

Adding Default or Outside Visualizations

In addition to Logi’s default charting library, you can add outside visualizations to your dashboard. Logi handles the data access for you by querying the database and returning the data in an adjacent format. The chart itself can come from any JavaScript library, though you can also integrate D3, Google Charts, Highcharts, Fusioncharts, and more into your Logi application.

For this tutorial, we will use one of Logi’s default charts.

Step 1: Click the Wizard tab, select Dashboard, and customize your preferences on columns, panels, and tabs. At the end of the Wizard, Logi will then arrange all the elements for you, saving time.

Step 2: Populate each panel on your dashboard with content. Using the Logi Wizard tab, select Add Chart or Gauge. Select the Database type. For this example it will be SQL Server.

Step 3: If you know the SQL Query, paste it into the allocated box. If not, select Logi’s Query Builder (Figure 3), which provides a more visual way to build out the query. Select Table, select desired Categories, then select desired Fields. Your defined Query will be available to paste.

Logi will provide a preview as well as a choice of different types of visuals available to you, such as Bar, Line, Pie, Plot, etc.

Step 4: After selecting your preferred visual, specify Label and Data columns. Your first visualization will be displayed.

Step 5: Repeat as needed to populate your other panels. You may reuse the same query to create different aggregate visuals for your information.

Adding Line-Item Details to Datasets

You may also present specific line-item details within the dataset. Here’s how:

Step 6: Use the Wizard to select Add Data Table.

Step 7: Select the DataLayer Type.

NOTE: When working with a large dataset, the best practice is to use ActiveSQL. It will automatically add pagination to the query and return the information you want to display for users only to the application tier. This gives a huge performance benefit to your application.

If you want to customize what data is shown to the user, select the Settings Wheel to hide or show columns.

At this point, your panels will be populated with customized visualizations for your application.

You may resize and organize the visuals as you see fit.

Making Your Visualizations Interactive

Now that we have added our visualizations, we will make the dashboard interactive by applying global filters (so that changes in visualizations affect one another). Here’s how:

Step 1: Select the Dashboard element.

Step 2: Activate Auto Global Filters by selecting “True” under the dropdown menu next to it.

Based on the previously defined element filters, the Dashboard will determine which filter options are available and allow you to apply the filters into the entire Dashboard. Once added, the Add Global Filters option allows you to filter data by any of the specified columns, or by choosing an item on one of the charts.

You can also choose multiple items on a singular visualization to filter out.

Inversely, you can apply multiple filters on multiple visualizations to really narrow in on the content you need.

Now, you can apply essentially any filter that’s available within the data provided. Check back next week for a more in-depth tutorial on Applying Filters to Visualizations.

To see these tips and tricks in action, watch our webinar: How to Build an Analytic Application in 30 Minutes.



Originally published February 1, 2018; updated on September 12th, 2019

About the Author

Matthew Grogan is a Solutions Engineer at Logi Analytics, where he provides both technical enablement and advice regarding Logi products.