Create and Embed Dashboards with Data Stored in Google Drive
Introduction
Embedded analytics helps you integrate your dashboards and business intelligence tools into your business applications to enhance your analytics and give you a comprehensive look at your metrics. Bold BI Embedded enables you to embed your interactive dashboards in your own business application. It’s fast and easy, with features like prebuilt data connectors, calculated metrics, and engaging data visualization. In this blog, I am going to explain how to create a dashboard with Google Drive data and how to embed that dashboard in your business application. I’ll show you:
- How Google Drive data is represented.
- How to connect to Google Drive.
- How to integrate Google Drive data with other data sources.
- How to create a dashboard using the Google Drive data.
- How to schedule data refreshes for a Google Drive dashboard.
- How to embed a Google Drive dashboard in your application.
How Google Drive data is represented
Google Drive is a cloud-based storage solution developed by Google which helps you to save, store, and collaborate files anywhere from any devices.
How to connect to the Google Drive
With Bold BI, you can easily connect your Google Drive data from your Google account to the dashboard designer. All you need to do is open the Data Sources configuration panel and then select Google Drive.
Once you have clicked the Google Drive data source, the connection window will open, as shown in the following image.
Now, you need to enter your Google account credentials to sign into the account. Then, choose your Google account from the window, as shown in the following image.
Now, you need to select the required CSV or JSON file from your Google Drive and give the name for the data source in the configuration window.
Here, we are using a CSV file. After selecting the file, you will find a list of tables in the preview window.
Select the desired tables and then click Connect. Your data will be moved to the intermediate database reserved for your tenant. Then, you will be navigated to the Bold BI’s data source designer. In the data source designer, you can view your data schema in a tree view.
Drag and drop the table that you want to analyze and save the data source by clicking Save in the top-right corner of the data source designer.
How to integrate Google Drive data with other data sources
You can add multiple data sources if needed. In the Shared Tables panel at the bottom of the data source designer, use the join-table option.
How to create a dashboard using Google Drive data
After successfully creating the data source, you can build a dashboard by dragging the 35+ widgets available in Bold BI. To create an interactive dashboard, first, you need to define your metrics and KPIs based on your data.
Please refer to this help documentation for more details on creating a dashboard. You can also refer to this blog on creating business dashboards online with Bold BI. To learn more about Bold BI features, please refer to this blog.
You can create a dashboard from scratch by dragging widgets into the dashboard designer. By creating a sales performance dashboard, for instance, you can gain financial insights from the visualization of company sales information and make decisions to increase revenue and sales.
This sales performance dashboard helps you monitor key metrics, such as:
- Total revenue: Shows the total earned through all channels.
- Days inventory outstanding: Shows the average number of days a company holds inventory before turning it into sales.
- Inventory turnover percentage: Shows the percentage of inventory sold or consumed in a given time period.
- Revenue by product: Shows the income earned with respect to the products.
Additionally, you can track the products sold, store orders, online orders, order comparison, sales distribution, product expiration details, and percentage of products returned by customers.
How to schedule data refreshes for a Google Drive dashboard
To get meaningful insight from looking at your data, it needs to be up-to-date data. By scheduling refreshes, you can keep your data up to date. You can schedule data refreshes in two ways:
- Refresh settings while connecting your data source to Bold BI.
- Refresh settings in the data source editing page.
Once you have selected Refresh Settings, the following configuration window will open.
In this Refresh Settings configuration panel, you can schedule the data refreshes hourly, daily, weekly, or monthly. You can also select recurrence, refresh starting time, and refresh end time.
You can also disable the data refresh by turning off the Enabled toggle.
In the previous screenshot, you can see the data is updated every five minutes. To learn more about this Sales Performance dashboard, please refer to this live demo.
How to embed a Google Drive dashboard in your application
Integrating analytical solutions and data visualization capabilities into a software application’s user interface to improve data comprehension and usability is known as embedded analytics.
Let’s see how these analytics can be embedded into your application. Bold BI helps you embed dashboards in your apps for 12 web platforms, including React with ASP.NET Core, React with Go, WinForms, Node.js, Vue with Go, and Vue with ASP.NET Core. In the remainder of this blog, I am going to explain how to embed dashboards into your Angular applications using Bold BI Embedded.
Prerequisites
Download and install the Bold BI server in your local machine and create a dashboard. You can find the installation and deployment steps here.
Step 1: Create an Angular application.
To successfully embed a dashboard in your application, you first need to have an Angular application. Create a new Angular project in Visual Studio Code and add the necessary TS files to the project, as shown in the following image.
For more guidance, refer to the sample code in the Bold BI documentation.
In this demonstration, the Angular application acts as a client and an ASP.NET Core application acts as a server. You need to add several properties in the app.component.ts file, as shown in the following table and screenshot.
RootUrl: Bold BI dashboard server URL. Example: http://localhost:58094/bi.SiteIdentifier : For Bold BI Enterprise edition, it should follow the format `site/site1`. For Bold BI Cloud, it should be an empty string.Environment : Your Bold BI application environment. If using Bold BI Cloud, you should use `cloud`. If using Bold BI Enterprise, you should use `enterprise`.apiHost: An ASP.NET Core application would be run on http://localhost:5000/, which needs to be set as `apiHost`.
Step 2: Create a Bold BI instance.
After the Angular web application is created, you need to create a Bold BI instance to communicate between the server-side (any web application) and the client-side (the Angular application), which allows us to embed a Bold BI dashboard in the Angular application.
Step 3: Create an authorization server to authenticate the Bold BI server.
Every application that embeds a Bold BI dashboard or widget must be authorized with the Bold BI server. This authentication step requires sending confidential information to the Bold BI server, including users’ email addresses, group data, and embed signatures. So, in your server application, implement this authentication flow and provide the URL for connecting to your server in the Bold BI Embedded instance.
Step 4: Run the Angular application to view the embedded dashboard.
In the Angular application, update the authorization URL and dashboard URL that were defined in the ASP.NET Core application. Finally, you can see that the dashboard created in the Bold BI server is embedded in your web application.
To learn more about embedding dashboards in your Angular applications, refer to this blog. You can download the sample code used in the previous steps from our documentation.
You can see how to embed your dashboards in various web platforms by referring to our videos for ASP.NET Core, ASP.NET MVC, Angular, and more.
Conclusion
Bold BI Embedded helps you integrate dashboards in your applications written in ASP.NET Core, ASP.NET MVC, ASP.NET, and Ruby on Rails. It will save you time by helping you avoid redundant work. Click this link to explore its features. To learn more about embedding dashboards into your application, refer to this blog and our documentation. You can create a dashboard any way you like with Bold BI Embedded’s 35 widgets and 130 supported data sources.
I hope you now have a better understanding of creating and embedding a dashboard with Google Drive data. If you have any questions on this blog, please feel free to post them in the following comment section. To get started with Bold BI, please request a free 30-minute demo with our experts to discuss creating dashboards and any other features you would like to learn more about. You can also contact us by submitting your questions through the Bold BI website or, if you already have an account, you can log in to submit your support question.
Originally published at https://www.boldbi.com on November 18, 2021.
