Skip to main content

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.