const apiKey = '6H9KFYV6QB4V95H4'
const fetchUrl = 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=MLT.AX&apikey=6H9KFYV6QB4V95H4'
const button = document.querySelector('.btn')
const myChart = document.getElementById('myChart').getContext('2d')

// *** No `data` variable here

// Get data from API
async function getData() {
    // You'd wrap the entire body in `try`/`catch` if you wanted to catch
    // errors here as you do in your original, but I strongly recommend
    // not suppressing errors until the outermost code, so that intervening
    // code knows whether the operation worked
    const response = await fetch(fetchUrl)
    if (!response.ok) {
        throw new Error("HTTP error " + response.status)
    }
    const object = await response.json()
    const data = {}                     // *** Create the object we'll return
    data.rawData = object
    data.xlabels = Object.keys(object['Time Series (Daily)'])

    data.price = new Object

    data.price.open = new Array
    data.price.high = new Array
    data.price.low = new Array
    data.price.close = new Array
    data.price.adjustedClose = new Array
    data.price.volume = new Array
    data.price.dividendAmount = new Array
    data.price.splitCoefficient = new Array

    Object.entries(object["Time Series (Daily)"]).forEach(function (day) { data.price.open.push(day[1]['1. open']) })
    Object.entries(object["Time Series (Daily)"]).forEach(function (day) { data.price.high.push(day[1]['2. high']) })
    Object.entries(object["Time Series (Daily)"]).forEach(function (day) { data.price.low.push(day[1]['3. low']) })
    Object.entries(object["Time Series (Daily)"]).forEach(function (day) { data.price.close.push(day[1]['4. close']) })
    Object.entries(object["Time Series (Daily)"]).forEach(function (day) { data.price.adjustedClose.push(day[1]['5. adjusted close']) })
    Object.entries(object["Time Series (Daily)"]).forEach(function (day) { data.price.volume.push(day[1]['6. volume']) })
    Object.entries(object["Time Series (Daily)"]).forEach(function (day) { data.price.dividendAmount.push(day[1]['7. dividend amount']) })
    Object.entries(object["Time Series (Daily)"]).forEach(function (day) { data.price.splitCoefficient.push(day[1]['8. split coefficient']) })

    data.price.open.reverse()
    data.price.high.reverse()
    data.price.low.reverse()
    data.price.close.reverse()
    data.price.adjustedClose.reverse()
    data.price.volume.reverse()
    data.price.dividendAmount.reverse()
    data.price.splitCoefficient.reverse()
    data.xlabels.reverse()

    // *** Return the data
    return data
}

// Draw chart
async function chartIt() {
    // *** Use the returned data
    const priceData = await getData()
    console.log(priceData)

    const priceChart = new Chart(myChart, {
        type: 'bar',
        data: {
            labels: data.xlabels,
            datasets: [{
                label: 'Price',
                data: data.price.close,
            }]
        },
        options: {}
    })
}

chartIt()