Populate Highchart Line chart from live Fixer api currency data

时间:2019-01-15 18:12:51

标签: api highcharts

Hi I am completely new to highcharts and have a basic understanding of JavaScript.

http://data.fixer.io/api/latest?access_key=b74dda0c99e32e39b8eb5aebaa199d1d&symbols=GBP&format=1

The following link gives access to my live JSON data.

I have created the basic chart using static data, but I am looking for the chart to read the API file instead of the static date.

Ideally the chart should update both the EUR and GBP values on a hourly basis to show the current exchange rates over a 24hour period.

The following code is my static outline

<body>
<div id="container"></div>
<script>
Highcharts.chart('container', {
    title: {
        text: 'Chart example'
    },
    xAxis: {


    },
    series: [{
        name: 'Pound Sterling (£)',
        data: [1.112, 1.124, 1.119, 1.121, 1.123, 1.117, 1.113]
    }, {
        name: 'Euro (€)',
        data: [1.101, 1.126, 1.112, 1.131, 1.124, 1.135, 1.101]
    }, 
    ],
    yAxis: {
        title: {
            text: 'Currency Value'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});
</script>

0 个答案:

没有答案