Benchmarks
Create Charts with TradingView

TradingView Integration

The TradingView integration allows users to view Pyth prices on their own website. All Pyth prices made available through the TradingView integration are originating from Pythnet.

Choosing an Implementation Method for TradingView Integration

There are primarily two methods to integrate TradingView with your website to display Pyth prices:

1. Using the TradingView Widget

  • Advantages:
    • Simplicity: This is a plug-and-play solution which allows for quick integration. You won't need to engage in complex setup processes or handle any backend configurations.
  • Disadvantages:
    • Limited Customization: The widget comes as-is, and while you can change basic parameters like the symbol or theme, more advanced customizations are restricted.

2. Using the Datafeed URL with Charting Library

  • Advantages:
    • Deep Customization: Suited for those who need a deeper level of integration and customization. By utilizing the UDF-compatible URL, you can tailor the look, feel, and functionality of the chart to better fit your application's needs.
  • Disadvantages:
    • Added Complexity: Integrating the Charting Library requires more technical know-how and potentially more time compared to the simpler widget integration.

When deciding between the two, consider the user experience you want to provide, the technical expertise at hand, and the time you can allocate to the integration. For a rapid deployment with minimal adjustments, the TradingView Widget is the way to go. If you need more control and are prepared for a deeper dive into the implementation, the Datafeed URL with the Charting Library would be your best choice.

TradingView Widget

  1. Add the following script(s) from TradingView (opens in a new tab) to your website depending on your framework:
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div id="tradingview"></div>
    <script
        type="text/javascript"
        src="https://s3.tradingview.com/tv.js"
    ></script>
    <script type="text/javascript">
        new TradingView.widget({
        autosize: true,
        symbol: "PYTH:BTCUSD",
        interval: "D",
        timezone: "Etc/UTC",
        theme: "light",
        style: "1",
        locale: "en",
        toolbar_bg: "#f1f3f6",
        enable_publishing: false,
        allow_symbol_change: true,
        container_id: "tradingview",
    });
    </script>
</div>
<!-- TradingView Widget END -->
  1. Replace the symbol parameter with the Pyth symbol you want to display. For example, to display the price of Ethereum, use symbol: "PYTH:ETHUSD".

  2. Replace the interval parameter with the time interval you want to display. For example, to display the price of Ethereum in 1-minute intervals, use interval: "1". Possible resolutions are daily (D or 1D, 2D ... ), weekly (1W, 2W ...), monthly (1M, 2M...) and an intra-day resolution – minutes(1, 2 ...).

  3. Replace the timezone parameter with the timezone you want to display. For example, to display the price of Ethereum in the Eastern Time Zone, use timezone: "America/New_York".

  4. Replace the theme parameter with the theme you want to display. For example, to display the price of Ethereum in dark mode, use theme: "dark".

  5. There is a fully working open-source example of the TradingView integration by one of Pyth's contributors here (opens in a new tab). The example application is deployed here (opens in a new tab).

Note: The TradingView plug-and-play widget does not allow for much customization. If you want to customize the widget, you can use the TradingView Charting Library (opens in a new tab). Please see the next section for more details.

Using Datafeed URL with Charting Library

We also provide a UDF-compatible URL that follows the TradingView UDF spec (opens in a new tab). You can implement your own datafeed utilizing the API or use the built-in UDF adapter with the API. If you need a step-by-step guide, refer to the How to connect data via Datafeed API (opens in a new tab) tutorial, or you can reference the example here (opens in a new tab), the main files that may be of interest are: datafeed.js (opens in a new tab) and streaming.js (opens in a new tab).

The datafeed URL is here (opens in a new tab) and documentation can be found here (opens in a new tab)

Example

Last updated on