Skip to main content
Version: latest

How to run the library

This tutorial describes how to run the library on your machine. You can also watch the video below that demonstrates running the library step-by-step.

Prepare the project

  1. Download the library ZIP file from the Advanced Charts 🔐 (access is restricted) / Trading Platform 🔐 (access is restricted) repository.

  2. Create a new folder (example in this tutorial). Copy the charting_library and datafeed folders from the archive to example.

  3. Create the following index.html file in the example folder:

    /example/index.html
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset = "UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>

    </body>
    </html>
  4. Add two script references into the <head> section:

    <script src="charting_library/charting_library.standalone.js"></script>
    <script src="datafeeds/udf/dist/bundle.js"></script>
    • charting_library/charting_library.standalone.js contains the code that creates the chart widget.
    • datafeeds/udf/dist/bundle.js contains a sample datafeed implementation that loads data to the chart.
  5. Define the container for the chart in the <body> section:

    <div id="chartContainer"></div>
  6. To create a chart, you should initialize the Widget Constructor in <body>. To do this, configure some basic Widget Constructor parameters:

    <script>
    new TradingView.widget({
    container: 'chartContainer',
    locale: 'en',
    library_path: 'charting_library/',
    datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
    symbol: 'AAPL',
    interval: '1D',
    fullscreen: true,
    debug: true
    });
    </script>
    • container is set to the container ID from the previous step.
    • library_path specifies a path to additional HTML, JavaScript, and CSS files that allow you to render the chart. In this tutorial, the charting_library folder stores these files.
    • datafeed is set to the UDFCompatibleDatafeed sample that TradingView provides.

Run the library

  1. Execute the following command in the example folder to run the library locally.

    # Python 2.x
    python -m SimpleHTTPServer 9090

    # Python 3.x
    python -m http.server 9090

    In this tutorial, the Python http.server module is used. You can use any server/port that you prefer. The tips below explain how to run the most common HTTP servers.

    Node.js
    1. Install http-server.

      npm install http-server -g
    2. Start http-server using the following command in the library folder.

      http-server -p 9090
    NGINX
    1. Install NGINX.

    2. Open the nginx.conf file and insert the following code into the http section of the file:

      server {
      listen 9090;
      server_name localhost;

      location / {
      root ABSOLUTE_PATH_TO_THE_TUTORIAL_FOLDER;
      }
      }
    3. Replace ABSOLUTE_PATH_TO_THE_TUTORIAL_FOLDER with the absolute path to the tutorial folder (example in this tutorial).

    4. Run NGINX.

  2. Open http://localhost:9090/ in your web browser to see the result.

    Running Library

Complete code

/example/index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TradingView - Advanced Charts</title>


<script src="charting_library/charting_library.standalone.js"></script>
<script src="datafeeds/udf/dist/bundle.js"></script>
</head>
<body>

<div id="chartContainer"></div>

<script>
new TradingView.widget({
container: 'chartContainer',
locale: 'en',
library_path: 'charting_library/',
datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
symbol: 'AAPL',
interval: '1D',
fullscreen: true,
debug: true,
});
</script>
</body>
</html>

What's next?

In this tutorial, you have set up Widget Constructor and a static chart. To further enhance your implementation, consider following the How to connect data via Datafeed API tutorial to learn more about real-time data streaming. Additionally, check out a guide on enabling debug modes to help identify potential issues and ensure your application is running smoothly.