# 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 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.](https://www.boldbi.com/blog/create-and-embed-dashboard-with-google-drive-data#how-google-drive-data-is-represented) * [How to connect to Google Drive.](https://www.boldbi.com/blog/create-and-embed-dashboard-with-google-drive-data#how-to-connect-to-google-drive) * [How to integrate Google Drive data with other data sources.](https://www.boldbi.com/blog/create-and-embed-dashboard-with-google-drive-data#how-to-integrate-google-drive-data-with-other-data-sources) * [How to create a dashboard using the Google Drive data.](https://www.boldbi.com/blog/create-and-embed-dashboard-with-google-drive-data#how-to-create-a-dashboard-using-the-google-drive-data) * [How to schedule data refreshes for a Google Drive dashboard.](https://www.boldbi.com/blog/create-and-embed-dashboard-with-google-drive-data#how-to-schedule-data-refreshes-for-a-google-drvie-dashboard) * [How to embed a Google Drive dashboard in your application.](https://www.boldbi.com/blog/create-and-embed-dashboard-with-google-drive-data#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. ![Structured Google Drive data](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/google-drive-data.png align="left") Structured Google Drive data ### 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. ![Data sources listing page](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/connect-to-the-google-drive.png align="left") Data sources listing page Once you have clicked the Google Drive data source, the connection window will open, as shown in the following image. ![Google Drive configuration window](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/google-drive-configuration-window.png align="left") Google Drive configuration window 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. ![Google account window](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/google-account-window.png align="left") Google account window 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. ![CSV or JSON file selecting window](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/CSV-or-JSON-file-window.png align="left") CSV or JSON file selecting window Here, we are using a CSV file. After selecting the file, you will find a list of tables in the preview window. ![Table preview](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/data-table-preview.png align="left") Table preview 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. ![Data source editing window](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/data-source-editing-window.png align="left") Data source editing window 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. ![Saving the data source](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/saving-data-source.png align="left") Saving the data source ### How to integrate Google Drive data with other data sources ![Shared tables—data source editing window](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/integrate-google-drive-data.png align="left") Shared tables—data source editing window 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. ![Shared tables—data source editing window](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/shared-tables-editing-window.png align="left") Shared tables—data source editing window ### 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](https://www.boldbi.com/features) 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](https://help.boldbi.com/embedded-bi/getting-started/quick-start/) for more details on creating a dashboard. You can also refer to this [blog](https://www.boldbi.com/blog/create-business-dashboards-online-with-bold-bi) on creating business dashboards online with Bold BI. To learn more about Bold BI features, please refer to this [blog](https://www.boldbi.com/blog/bold-bi-overview-a-complete-walkthrough-of-the-bold-bi-features-webinar-qa). ![Widget panel](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/widget-panel.png align="left") Widget panel 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. ![Google Drive Dashboard Embedding Example – Sales Performance Dashboard](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/sales-performance-dashboard.jpg align="left") Google Drive Dashboard Embedding Example – Sales Performance Dashboard This [sales performance dashboard](https://www.boldbi.com/dashboard-examples/sales/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. ![Refresh Settings window](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/refresh-settings-window.png align="left") Refresh Settings window 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. ![Refresh Settings—disabled](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/refresh-settings-disabled.png align="left") Refresh Settings—disabled You can also disable the data refresh by turning off the Enabled toggle. ![Data updated using Data refresh](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/data-updated-using-data-refresh.png align="left") Data updated using Data refresh 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](https://samples.boldbi.com/solutions/sales/sales-performance-dashboard). ### 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](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/react-core/) [ASP.NET](http://ASP.NET) [Core](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/react-core/), [React with Go](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/react-with-go/), [WinForms](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/winforms/), [Node.js](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/node-js/), [Vue with Go](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/vuejs-with-go/), and [Vue with](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/vuejs-with-core/) [ASP.NET](http://ASP.NET) [Core](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/vuejs-with-core/). In the remainder of this blog, I am going to explain how to embed dashboards into your Angular applications using [Bold BI](https://www.boldbi.com/). #### Prerequisites [Download](https://www.boldbi.com/account) and install the Bold BI server in your local machine and create a dashboard. You can find the installation and deployment steps [here](https://help.boldbi.com/embedded-bi/setup/deploying-in-windows/installation-and-deployment/). #### 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. ![Adding necessary ts files](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/adding-necessary-ts-files.png align="left") Adding necessary ts files For more guidance, refer to the sample code in the Bold BI [documentation](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/angular/). In this demonstration, the Angular application acts as a client and an [ASP.NET](http://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.

Properties

Property Value Descriptions

RootUrl

Bold BI dashboard server URL.
Example: https://localhost:58094/bi.

SiteIdentifier

For Bold BI Enterprise, 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 https://localhost:5000/, which needs to be set as apiHost.

![Adding required variables in the app.component.ts file](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/app.component.ts-file.png align="left") Adding required variables in the app.component.ts file #### 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 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](http://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](https://www.boldbi.com/blog/embedding-dashboards-in-an-angular-application). You can download the sample code used in the previous steps from our [documentation](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/angular/). You can see how to embed your dashboards in various web platforms by referring to our videos for [ASP.NET](http://ASP.NET) [Core](https://www.youtube.com/watch?v=OXISapzYAj8), [ASP.NET](http://ASP.NET) [MVC](https://www.youtube.com/watch?v=upSProTZ7nw), [Angular](https://www.youtube.com/watch?v=P4135S0NAGo&t=6s), and more. ![Sales Performance Dashboard Embedded in an Angular Application](https://cdn.boldbi.com/wp/blogs/data-stored-in-google-drive/sales-performance-in-angular-application.png align="left") Sales Performance Dashboard Embedded in an Angular Application ## Conclusion [Bold BI](https://www.boldbi.com/) helps you integrate dashboards in your applications written in [ASP.NET](http://ASP.NET) [Core](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/asp-net-core/), [ASP.NET](http://ASP.NET) [MVC](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/asp-net-mvc/), [ASP.NET](http://ASP.NET), and [Ruby on Rails](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/ruby-on-rails/). It will save you time by helping you avoid redundant work. Click this [link](https://www.boldbi.com/features) to explore its features. To learn more about embedding dashboards into your application, refer to this [blog](https://www.boldbi.com/blog/integrating-dashboards-into-applications-with-the-embed-sdk) and our documentation. You can create a dashboard any way you like with Bold BI’s [35+ widgets](https://www.boldbi.com/features) and [130+ supported data sources](https://www.boldbi.com/integrations). 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. Get started with Bold BI by signing up for a [free 15-day trial](https://www.boldbi.com/pricing) and create more interactive business intelligence dashboards. You can also contact us by submitting your questions through the [Bold BI website](https://www.boldbi.com/contact) or, if you already have an account, you can [log in](https://www.boldbi.com/account) to submit your support question.