Build the Ultimate Personalized Trading Dashboard in 30 minutes for Free

In this tutorial we are going to create the coolest end results of all the posts I’ve ever written and — man, I’ve written a lot of posts. :) We will create a personalized trading dashboard with live data and a ton of different widgets for market indexes, a watchlist, stock details, Crypto and Forex data. So get ready because this is going to be an awesome ride!

This story is solely for general information purposes, and should not be relied upon for trading recommendations or financial advice. Source code and information is provided for educational purposes only, and should not be relied upon to make an investment decision. Please review my full cautionary guidance before continuing.

What are Trading View Financial Widgets?

Trading View (TV) is a popular trading platform that provides a strong charting interface, the ability to develop strategies in PineScript and a number of broker interfaces to execute trades.

Trading View also offers awesome financial widgets that you can add to a web page free. These are HTML or ReactJS widget components that can be embedded into a web page or website by adding the JavaScript code to an HTML page, which will then in turn load the data from the Trading View site and render the widget.

Here are some of the widgets Trading View offers free for personal use:

Market index info
Stock market charts and mini charts
Stock fundamental info
Company profile
Technical Analyst ratings
Crypto Prices
Forex Prices.

Check out the list of TV financial widgets here.

We will use these components to build the ultimate personalized trading dashboard page in this tutorial.

Pros and Cons

Before we get started, I wanted to point out the pros and cons of this approach:

Pros

Wide variety of financial widgets
Flexibility to chose which widgets to display
No need to stand up a web server
Free access to data
Live data updates
Ability to personalize symbols, coins, currencies
Limited ability to style and size the widgets

Cons

Styling of widgets is limited to what TV offers
Data of widgets is limited to what TV offers
Some data is only available on the TV platform
No real-time data
Widgets initially take a couple of seconds to load
If you look at the Trading View policy page, you will find that these widgets are only meant for personal use. So you can’t build a web page with these widgets and charge customers for access.

Exited? Then let’s get started!

StockDads.com is a thriving trading community with AI trading stock/crypto alerts, expert advice and a ton of educational materials. Get a 30% forever discount with code ‘BOTRADING’.

Implementation

You can download the complete Python script from my ‘B/O Trading Blog’ on Substack.

HTML Page Structure

First, it’s important to understand that we will create a simple HTML page using the Bootstrap framework for basic styling and the grid system and then embed the TV widgets into the HTML code.

We don’t need to run a local web server to render the HTML because the browser will execute the JavaScript and the TV servers will be used to retrieve all the data.

First go ahead and download the Bootstrap 5 framework and extract the zip file. Create an empty file in the root folder using a text editor and call it ‘trading-dashboard.html’.

The folder structure should be like this:

./trading-dashboard.html
   /js
   /css

Next, paste the code below, which provides the HTML scaffolding for our dashboard. There is a lot going on here, so let’s review:

We have the basic HTML page structure with the HTML, head and body tags.
In the head tag we are adding the Bootstrap CSS file and some custom styles we need for the dashboard.
We will use the Bootstrap Tab Navigation component to create the tabs for the dashboard. Those are the tags with the nav prefix.
Below are the tag-content sections with a Bootstrap grid layout for each tab. Here we will add the TV widgets.

Basically, a Bootstrap grid is composed of rows and 12 columns. You can specify how many columns a row should have one small, medium and large device screens. If you are not familiar with the Bootstrap grid framework, you can learn more about it here.

<!DOCTYPE html>
<html>
  <head>
    <title>The Ultimate Trading Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<style>
		html,
		body {
		  height: 100%;
		}
                .tab-content {
                    height: calc(100vh - (75px)) !important;
                    width: calc(100vw - (40px)) !important
                  }
                  .tab-content>.active {
                    display: inline-flex;
                    height: 100%;
                    width: 100%
                  }
                  .tab-content>.active>.row {
                    display: contents
                  }
                  .tab-content>.active>.row>div {
                    padding-left: 0;
                    width: 100%;
                    display: contents;
                  }
                  .tab-content>.active>.row>div>.w-100 {
                    width: 99% !important
                  }
                  
                  .w-tab1 {
                   padding-left: 60px;
                   padding-right: 60px;
                  }
                 </style>
                  </head>
                  <body>
                  <div class="container-fluid w-highlight-container h-100 d-flex flex-column">
                 <nav>
                   <div class="nav nav-tabs" id="nav-tab" role="tablist">
                  <button class="nav-link active" id="nav-market-tab" data-bs-toggle="tab" data-bs-target="#nav-market" type="button" role="tab" aria-controls="nav-market" aria-selected="true">Market Overview</button>
                  <button class="nav-link" id="nav-stocks-overview-tab" data-bs-toggle="tab" data-bs-target="#nav-stocks-overview" type="button" role="tab" aria-controls="nav-stocks-overview" aria-selected="false">Stocks Overview</button>
                  <button class="nav-link" id="nav-stocks-detail-tab" data-bs-toggle="tab" data-bs-target="#nav-stocks-detail" type="button" role="tab" aria-controls="nav-stocks-detail" aria-selected="false">Stocks Detail</button>
                  <button class="nav-link" id="nav-crypto-tab" data-bs-toggle="tab" data-bs-target="#nav-crypto" type="button" role="tab" aria-controls="nav-crypto" aria-selected="false">Crypto</button>
                  <button class="nav-link" id="nav-forex-tab" data-bs-toggle="tab" data-bs-target="#nav-forex" type="button" role="tab" aria-controls="nav-forex" aria-selected="false">Forex</button>
                   </div>
                 </nav>
                 <div class="tab-content" id="nav-tabContent">
                  <!-- Market Overview Tab -->
                  <div id="nav-market" class="tab-pane fade active show" role="tabpanel">
                    <div class="row">
                      <div class="col-md-12">
                     <div class="w-tab1 h-100 w-100">
                      <!-- Ticker Tape Widget -->
                       
                      <!-- Market Data Widget-->
                      <h3>Market Data</h3>
                    </div>
                     </div>
                   </div>
                  </div>
                  
                  <!-- Stocks Overview Tab -->
                  <div class="tab-pane fade" id="nav-stocks-overview" role="tabpanel" aria-labelledby="nav-overview-tab">
                   <div class="container">
                    <div class="row">
                     <div class="col-lg-12">
                      <h3>Stocks Overview</h3>
                     </div>
                    </div>
                    <div class="row">
                     <div class="col-lg-4">
                      <!-- Mini Chart Widget -->
                     </div>
                     <div class="col-lg-4">
                      <!-- Mini Chart Widget -->
                     </div>
                     <div class="col-lg-4">
                      <!-- Mini Chart Widget -->
                     </div>
                    </div>
                    
                    <!-- Second row -->
                    <div class="row">
                     <div class="col-lg-4">
                      <!-- Mini Chart Widget -->
                     </div>
                     <div class="col-lg-4">
                      <!-- Mini Chart Widget -->
                     </div>
                     <div class="col-lg-4">
                      <!-- Mini Chart Widget -->
                     </div>
                    </div>
                    
                    <!-- Third row -->
                    <div class="row">
                     <div class="col-lg-4">
                      <!-- Mini Chart Widget -->
                     </div>
                     <div class="col-lg-4">
                      <!-- Mini Chart Widget -->
                     </div>
                     <div class="col-lg-4">
                      <!-- Mini Chart Widget -->
                     </div>
                    </div>    
                    
                   </div>
                  </div>
                  
                  <!-- Stocks Detail Tab -->  
                  <div class="tab-pane fade" id="nav-stocks-detail" role="tabpanel" aria-labelledby="nav-stocks-detail">
                   <div class="container">
                    <div class="row">
                     <div class="col-lg-12">
                      <h3>Stocks Detail</h3>
                     </div>
                    </div>
                    <div class="row">
                     <div class="col-lg-12">
                      <!-- Advanced Chart Widget -->
                     </div>
                    </div>
                    
                    <div class="row">
                     <div class="col-lg-6">
                      <!-- Fundamentals Widget -->
                     </div>
                     <div class="col-lg-3">
                      <!-- Company Profile Widget -->
                     </div>
                     <div class="col-lg-3">
                      <!-- Technical Analysis Widget -->
                     </div>
                    </div> 
                   </div>
                  </div>
                  
                  <!-- Crypto Tab -->  
                  <div class="tab-pane fade" id="nav-crypto" role="tabpanel" aria-labelledby="nav-crypto">
                   <div class="container">
                    <div class="row">
                     <div class="col-lg-12">
                      <h3>Crypto</h3>
                     </div>
                    </div>
                    <div class="row">
                     <div class="col-lg-12">
                      <!-- Cyrpto Prices Widget -->
                     </div>
                    </div>
                   </div>
                  </div>
                  
                  <!-- Forex Tab -->  
                  <div class="tab-pane fade" id="nav-forex" role="tabpanel" aria-labelledby="nav-forex">
                   <div class="container">
                    <div class="row">
                     <div class="col-lg-12">
                      <h3>Forex</h3>
                     </div>
                    </div>
                    <div class="row">
                     <div class="col-lg-12">
                      <!-- Forex Market Widget -->
                     </div>
                    </div>
                    
                    <div class="row">
                     <div class="col-lg-12">
                      <!-- Forex Heatmap Widget -->
                     </div>
                    </div>
                    <div class="row">
                     <div class="col-lg-12">
                      <!-- Economic Calendar Widget -->
                     </div>
                    </div>
                   </div>
                  </div>
                 </div><!-- tab content -->
                  </div><!-- end main container -->
                  <!-- Javascript --> 
                  <script src="https://code.jquery.com/jquery.js"></script>
                  <script src="js/bootstrap.min.js"></script>
                  </body>
                </html>

Market Overview

First we are going to add a Market Overview tab with a ticker tape and a market data widget. The widgets will go in this section: 

Adding the Ticker Tape Widget

Go to the TV Ticker Tape Widget page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this comment in the HTML page:

<!-- Ticker Tape Widget -->

Adding the Market Data Widget

Go to the TV Market Data page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this code in the HTML page:

<!-- Market Data Widget-->
<h3>Market Data</h3>

Then open the html page in a browser. Once you added the widgets, this is what the section should look like:

Screenshot of Trading View Widgets

Stocks Overview Section

The Stocks Overview section is basically your personal watchlist of stocks. For this page we will use a 3x3 grid and the Trading View Mini Chart Widgets to display a chart of the price, current price and recent change.

Adding Mini Charts

Go to the TV Mini Chart page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this code in the HTML page places where it says:

<!-- Mini Chart Widget -->

You will basically have to do this 9 times for the 9 different symbols.

Then save the HTML page and reload the page in the browser.

Once you added the widgets, this is what the section should look like:

Screenshot of Trading View Widgets

Stock Detail Section

You have have a couple of favorite stocks that you follow in detail and want to get all the nitty gritty details. For this case we will add a stock detail section.

Adding the Advanced Chart Widget

Go to the TV Advanced Chart page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this comment in the HTML page:

<!-- Advanced Chart Widget -->

Adding the Fundamental Data Widget

Go to the TV Fundamental Data page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this comment in the HTML page:

<!-- Fundamentals Widget -->

Adding the Company Profile Widget

Go to the TV Company Profile page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this comment in the HTML page:

<!-- Company Profile Widget -->

Adding the Technical Analyst Widget

Go to the TV Technical Analyst Widget page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this comment in the HTML page:

<!-- Technical Analysis Widget -->

Go ahead and refresh the file in the browser. Once you added the widgets, this is what the section should look like:

Screenshot of Trading View Widgets

Crypto Section

For the Crypto trading enthusiasts we will also add a tab for Crypto information where you can check prices for your favorite coins.

Adding the Crypto Market Screener Widget

Go to the TV Crypto Market Screener page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this comment in the HTML page:

<!-- Crypto Prices Widget -->

Go ahead and refresh the file in the browser. This is what the crypto section should look like:

Screenshot of Trading View Widgets

Forex Section

In case you are into Forex trading, you can also add a forex section with price information, Forex heatmap and an economic calendar.

Adding the Forex Rates Widget

Go to the TV Forex Rates Widget page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this comment in the HTML page:

<!-- Forex Market Widget -->

Forex Heatmap

Go to the TV Forex Heatmap Widget page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this comment in the HTML page:

<!-- Forex Heatmap Widget -->

Adding the Economic Calendar Widget

Go to the TV Economic Calendar Widget page and modify the list of symbols and styles, then hit the ‘Apply’ button.

Copy the code in the section ‘Embed Code’ below this comment in the HTML page:

Go ahead and refresh the file in the browser. Once you added the widgets, this is what the section should look like:

Screenshot of Trading View Widgets

Summary

In this post we went over the steps on how to create the ultimate trading dashboard using Trading View widgets.

I hope you found this post worth your time.

Happy Trading!

You can support my writing for free using this link. Don’t miss another story — subscribe to my stories by email. For more premium content, check out my ‘B/O Trading Blog’ on Substack.

This tutorial as created with data from Tiingo API.

This post contains affiliate marketing links.