Candlestick Chart Example

An example of a Google Candlestick Chart.

by Coinmonks

HTML

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="bitquery_div" style="width: 100%;">Bitquery data loading...</div>

CSS

body {
  font-family: Arial;
}

JavaScript

async function loadBitqueryData(startTime, endTime) {
  const toJSON = JSON.stringify;

	const query = `
{
  ethereum(network: ethereum) {
  	dexTrades(
      options: {limit: 10000, asc: "timeInterval.minute"}
      date: { between: [${toJSON(toISODate(startTime))}, ${toJSON(toISODate(endTime))}] }
      time: { between: [${toJSON(toISODateTime(startTime))}, ${toJSON(toISODateTime(endTime))}] }
      exchangeName: {is: "Uniswap"}
      baseCurrency: {is: "0x6b175474e89094c44da98b954eedeac495271d0f"}
      quoteCurrency: {is: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"}
    ) {
      timeInterval {
        minute(count: 1)
      }
      low: quotePrice(calculate: minimum)
      high: quotePrice(calculate: maximum)
      open: minimum(of: block, get: quote_price)
      close: maximum(of: block, get: quote_price)
      openTime: minimum(of: block, get: time)
      closeTime: maximum(of: block, get: time)
    }
  }
}`;

	const res = await fetch('https://graphql.bitquery.io/', {
  	method: 'POST',
    headers: new Headers({
    	'Content-Type': 'application/json; charset=utf-8',
    	'X-API-KEY': 'BQYvhnv04csZHaprIBZNwtpRiDIwEIW9',
    }),
    body: JSON.stringify({ query }),
    mode: 'cors',
  });
  const data = await res.json();
  return data.data.ethereum.dexTrades.map(it => [
  	new Date(it.timeInterval.minute.replace(' ', 'T') + 'Z'),
    Number(it.open),
    Number(it.high),
    Number(it.low),
    Number(it.close),
  ]);
  
  function toISODateTime(t) {
    return new Date(t).toISOString();
  }

  function toISODate(t) {
    return toISODateTime(t).split('T')[0];
  }
}

function drawOHLCChart(title, elementId, data) {
  const el = document.getElementById(elementId);
	el.innerHTML = '';
  var options = {
    series: [{
      name: 'candle',
      data: data.map(it => [it[0]].concat(it.slice(1).map(v => +v.toFixed(8)))),
    }],
    chart: {
      type: 'candlestick',
      height: 300
    },
    title: {
      text: title + ': Uniswap: DAI/ETH',
      align:...