Migrate from TradingView

<script src="https://view.verticalprop.com/embed.js"></script>
<div class="vp-chart"
     data-symbol="DEMO"
     data-interval="60"
     data-toolbar="1"
     data-theme="dark"
     data-datafeed="myFeed"
     style="height: 420px"></div>
<pre id="log"></pre>

<style>
body { margin: 0; background: #0b0f19; color: #e6e8eb;
       font: 13px/1.5 ui-monospace, monospace; }
#log { padding: 8px 12px; margin: 0; white-space: pre-wrap; }
</style>

<script>
// A deterministic series, so the pen never depends on a venue and the
// same code always draws the same chart.
function bars(from, to, stepSec) {
  const out = [];
  let price = 100;
  for (let t = Math.ceil(from / stepSec) * stepSec; t <= to; t += stepSec) {
    price += Math.sin(t / 5000) * 0.6;
    const open = price;
    const close = price + Math.cos(t / 3000) * 0.8;
    out.push({
      time: t * 1000,                       // a bar's time is MILLISECONDS
      open, close,
      high: Math.max(open, close) + 0.5,
      low: Math.min(open, close) - 0.5,
      volume: 1000 + (t % 500),
    });
  }
  return out;
}

vpEmbed.datafeed('myFeed', {
  onReady: () => ({ supported_resolutions: ['60'] }),
  resolveSymbol: (name) => ({
    name, ticker: name, pricescale: 100, session: '24x7', timezone: 'Etc/UTC',
  }),
  // from and to are SECONDS; a bar's own time is MILLISECONDS.
  getBars: (symbol, resolution, from, to) => bars(from, to, 3600),
  subscribeBars: () => {},
  unsubscribeBars: () => {},
});

const log = (m) => { document.getElementById('log').textContent += m + '\n'; };
const chart = vpEmbed.chart(document.querySelector('.vp-chart'));

chart.on('dataLoaded', async () => {
  // Declare that this page can carry an order, or the price-scale menu
  // offers alerts and drawings only.
  await chart.setTrading({ quantity: 1 });

  const entry = await chart.createOrderLine({
    price: 101, text: 'Buy limit', quantity: '1', lineColor: '#26a69a',
  });

  await chart.createPositionLine({
    price: 99.5, text: 'Long', quantity: '2',
    takeProfit: 104, stopLoss: 97,
  });

  await chart.createExecutionShape({
    // SECONDS here, and it must be a bar's own opening time.
    time: Math.floor(Date.now() / 3600000) * 3600 - 3600 * 6,
    price: 99.5, direction: 'buy', text: 'Filled 2 @ 99.50',
    tooltip: 'Entry\n2 @ 99.50',
  });

  // One message, one repaint. There is no chaining.
  await entry.set({ price: 100.8, text: 'Buy limit (moved)' });
  log('objects placed. Drag the blue line.');
});

chart.on('orderMove', ({ handle, price }) => log('moved ' + handle + ' to ' + price));
chart.on('orderCancel', ({ handle }) => log('cancelled ' + handle));
chart.on('orderSubmit', (o) => log('submit ' + JSON.stringify(o)));
chart.on('positionClose', ({ handle }) => log('close ' + handle));
</script>

The bars are generated in the pen rather than fetched, so it draws on the first run with no key and no venue to be unavailable.