The world of finance is a fast moving one, no more so than the ups and downs of the various different financial markets around the world. If you have stocks and shares anywhere in the world, or you have a finance oriented website, you may want to have up to date information embedded in your EverWeb made website. This way, you will quickly know when it’s best to sell or buy. Having stock market charts and tickers on your site will give you easy access this kind of data at a glance and all in one place. In this post we’re looking at easily integrating stock market charts and tickers into your site using Trading View’s easy to use widgets.
We’ve chosen to use Trading View’s charts as they provide an easy and customizable way to integrate financial data within a website. There are other websites that are also good sources of financial charts and tickers. A simple Google search is the best way to locate the right site for you to work with. Bear in mind that some finance based sites may require you to give them your email address, or you may offer free and paid for services and content.
Getting Started with Trading View
To find Trading View’s stock market charts, first go to the Trading View website. From the menu, select Products, Charting Solutions, All Widgets. We found in our review that sometimes the Widgets menu option did not take us to the Widgets page in the site. If this happens to you, simply scroll down to the bottom of the page. In the ‘For Business’ column on the right hand side of the page, click on the ‘Widgets’ option. You will then be on the main Widgets page.
The Advanced Real Time Chart Widget
The first chart we are going to look at is the ‘Advanced Real-Time Chart’. This is a great chart for your to track stocks, funds, futures, indices, bonds, crypto and more. Just select what you want by clicking inside the ‘Default Symbol’ box. You can also customize the size of the chart or leave it as ‘Auto’ which will probably suit most people as the chart will automatically resize to the width of the device it’s being displayed upon. You can also customize the chart’s colors and even the language in which it’s presented in. There are a wealth of options available to create the chart that you want.
Once you have finished with setting up your chart options, click on the ‘Apply’ button. This will do two things: First it will update the appearance of the chart so you can see how it looks, and secondly it will update the code that is displayed in the ‘Embed Code’ box. Once you are happy with the appearance of your chart, use the ‘Copy Code’ button at the bottom of the ‘Embed Code’ box.
To add the code you have copied to the clipboard, launch EverWeb if you have not done so already then select the page on which you want the chart to be displayed upon. You can add the widget to either a fixed width, center aligned page, or to a Responsive page.
Click on the Widgets tab and drag and drop the HTML Snippet widget on to the page. On a center aligned page the widget will appear in the place where you dropped it. On a responsive page, the widget will again be placed where you want it but this time it will be as a full width object. If you do not want the chart to be displayed as a full width object, add the HTML Snippet widget in to a Responsive Row widget instead. This will make the HTML Snippet widget a fixed width object instead of a full width, responsive object.
After adding the widget to your page, click inside the ‘HTML Code’ box, then paste in the code from the clipboard. Once you have done this, press the ‘Apply’ button at the bottom of the ‘GTML Code’ box. The display in the Editor Window will update. Note that you may not see a real-time display. If you preview or publish you will see the real-time display.
If you are using the HTML Snippet widget as a full width, responsive object, you can also apply a maximum width and left and right margins to the widget by adjusting these settings in the Metrics Inspector. Preview or publish your site to see the chart in situ.
Adding a Ticker, or Ticker Tape Widget
The Ticket and Ticker Tape Widgets display a row of financial data and information horizontally across the page. The Ticker widget is static whilst the Ticker Tape widget displays a continuously moving stream of data and information across the page. You often see such tickers on the financial sections of news and finance websites or television programmes. To access these widgets, again go to Trading View’s widgets page and scroll down until you reach the Ticker or Ticker Tape widget section. As we did before, click on the ‘Get Widget’ button for the widget of your choice, then select the settings that you want. Click on the ‘Apply’ button once you have finished your customizations. To copy the code for the ticker widgets, click inside the ‘Embed Code’ box. The code will be selected so you can then copy it to the clipboard.
As we did in the previous example, go to the page in your EverWeb Project file where you want to add the ticker, then drag and drop the HTML Snippet widget to your page. Paste in the code from the Clipboard in to the ‘HTML Code’ box then press the ‘Apply’ button to finish. Preview or publish to test.
Trading View offers many different widgets for free and they are also easily customizable. In addition, the widgets are easy to add in to your EverWeb website. Don’t forget to look at the FAQs that may apply to some widgets so that you know how widgets display data and their updating frequency.