Skip to main content
Version: v25

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 the library ZIP file from the Advanced Charts 🔐 (restricted access) / Trading Terminal 🔐 (restricted access) 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 -m http.server 9090
    note

    In this tutorial, the Python http.server module is used. You can use any server/port that you prefer.

  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. You can follow the How to connect data via Datafeed API tutorial to learn more about implementing real-time data streaming.