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.