How to dynamically change chart data using buttons (for currency type)


#1

I am working on a project. I’ve got my graph up and running. The chart displays CryptoCurrency data. But currently I can only see data for 1 type of cryptocurrency. I want to implement a button that which upon clicking, switches the data of the chart to display that particular cryptocurrency data. Below is the data:

Controller

class HomeController < ApplicationController
def index
     @currencies = [ ]
     data.each do |row| 
     @currencies.push([row['time_close'].to_datetime.to_i *1000,row['price_open'],row['price_high'],row['price_low'],row['price_close']]) 
end 
puts @currencies
end

def data
    coinApi = ENV['COIN_API'] || 'B1ECA4B0-D090-4407-AD8C-87948349F44F' url="https://rest.coinapi.io/v1/ohlcv/BITSTAMP_SPOT_BTC_USD/latest?period_id=1DAY&limit=100&&apikey=#{coinApi}"
response = HTTParty.get url
JSON.parse response.body 
end
end

VIEW (index.html)

script>
console.log(<%= @currencies %>);
Highcharts.stockChart('charts', { rangeSelector: { selected: 2
},


    title: {
        text: 'Bit Coin Exchange rate'
    },

    tooltip: {
        style: {
            width: '200px'
        },
        valueDecimals: 2,
        shared: true,
        valuePrefix: '$',
        valueSuffix: ' USD'
    },
    yAxis: {
        title: {
            text: 'Exchange rate'
        }
    },

    series: [{
        type: 'ohlc',
        name: 'BitCoin rate',
        data: <%= @currencies %>,
        dataGrouping: {
            units: [[
                'week', // unit name
                [1] // allowed multiples
            ], [
                'month',
                [1, 2, 3, 4, 6]
            ]]
        }
    }]
});

</script
Any help on this would be greatly appreciated. Thank you in advance.