Creating Live Charts with Solana Tracker Data API and TradingView Advanced Charts, from which you can also track all crypto pair rates, including BTCUSD price in real-time.

This guide will walk you through the process of creating live charts using the Solana Tracker Data API and TradingView Advanced Charts in a Next.js application.

Prerequisites

• Basic knowledge of Next.js and React
• A Solana Tracker Data API key (Live websocket updates require Premium package)
• Access to TradingView Advanced Charts

Step 1: Request TradingView Advanced Charts Access

Before you begin, you need to request access to TradingView Advanced Charts:

1. Visit TradingView Advanced Charts
2. Follow the instructions to request access
3. Wait for approval (this may take some time)

Step 2: Set Up the Project

1. Fork the example repository:

   git clone https://github.com/solanatracker/solana-chart-example.git
   cd solana-chart-example

2. Install dependencies:

   npm install

3. Create a

   .env

   file in the root directory and add your Solana Tracker Data API key:

   NEXT_PUBLIC_DATA_API_KEY=your_api_key_here
   NEXT_PUBLIC_DATASTREAM=your_datastream_url_here

Step 3: Run the Application

Start the development server:

npm run dev

Visit

http://localhost:3000

Conclusion

You've now set up a live Solana chart using the Solana Tracker Data API and TradingView Advanced Charts in a Next.js application. This setup provides a foundation for building more complex charting applications with real-time data.

In the DataFeed.tsx you can make changes, if you don't have datastream access you can change DataFeed.tsx to update using the /price endpoint at an interval instead