// jshint esnext: true

​

// This API key is only for testing, don't use this in production

const apiKey = 'coinrankingchartexample';

const url = 'https://api.coinranking.com/v2/coin/Qwsogvtv82FCd/history';

const queryString = new URLSearchParams({

  'x-access-token': apiKey,

});

const ctx = document.getElementById('chart');

const valutaFormatter = new Intl.NumberFormat('en-US', {

  style: 'currency',

  currency: 'USD',

});

​

// Add the API key to the querystring

fetch(`${url}?${queryString}`)

  .then((response) => response.json())

  .then((response) => {

    if (response.status === 'success') {

      const history = response.data.history.reverse();

      const dataset = history.map((item) => item.price);

      const labels = history.map((item) => Number(item.timestamp) * 1000);

​

      const data = {

        datasets: [{

          label: 'Bitcoin price',

          data: dataset,

          borderColor: '#307eff',

          backgroundColor: 'rgba(18, 107, 255, 0.3)',

        }],

        labels: labels,

      };

      const config = {

        type: 'line',

        data: data,

        options: {

          responsive: false,

          scales: {

            y: {

              ticks: {

                // Include a dollar sign in the ticks

                callback: (value) => valutaFormatter.format(value),

              },

            },

            x: {

              type: 'timeseries',

            },

          },

        },

      };

      const chart = new Chart(ctx, config);

    } else {

      // Show error message if the request failed

      document.write(response.message);

    }

  })

  .catch((error) => {

    console.error(error);

  });