Table of Contents
http://api.coinlayer.com/2021-01-01?access_key=YOUR_KEY&symbols=BTCThe response is JSON as shown below:
{"success":true, "terms":"https:\/\/coinlayer.com\/terms", "privacy":"https:\/\/coinlayer.com\/privacy", "timestamp":1609545545, "target":"USD", "historical":true, "date":"2021-01-01", "rates":{"BTC":29364.338135}}
npm i -D webpack-dev-server html-webpack-plugin path webpack-cli fusioncharts
// webpack.config.js const HtmlWebPackPlugin = require( 'html-webpack-plugin' ); const path = require( 'path' ); module.exports = { context: __dirname, entry: './src/index.js', output: { path: path.resolve( __dirname, 'dist' ), filename: 'main.js', }, plugins: [ new HtmlWebPackPlugin() ], devServer: { headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS", "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" }, proxy: { '/CoinlayerAPI': { target: 'http://api.coinlayer.com', changeOrigin: true, }, }, } };
{ "type":"spline", "renderAt":"chart-container", "width":"80%", "height":"600", "dataFormat":"json", "dataSource":{ "chart":{ "caption":"Historical Rates of Bitcoin on January 01 Over the Past 10 Years", "subcaption":"Data Source: https://coinlayer.com/", "xAxisName":"Date", "YAxisName":"Bitcoin Exchange Rate", "ynumbersuffix":"$", "xnumbersuffix":"", "theme":"fusion", "plotToolText":"<b>$dataValue</b> BTC rate on <b>$label</b>", "anchorbgcolor":"#ff00ff", "palettecolors":"#ff00ff" }, "data":[ {"label":"2012-01-01","value":5.27}, {"label":"2013-01-01","value":13.3}, {"label":"2014-01-01","value":815.94}, {"label":"2015-01-01","value":314.89}, {"label":"2016-01-01","value":433.99}, {"label":"2017-01-01","value":995.44}, {"label":"2018-01-01","value":13444.88}, {"label":"2019-01-01","value":3861.347988}, {"label":"2020-01-01","value":7231.458803}, {"label":"2021-01-01","value":29364.338135}] } }You can copy the following code into your index.js file. Make sure to replace SUBSCRIPTION_KEY with your Coinlayer API key.
// Include the core fusioncharts file from core import FusionCharts from 'fusioncharts/core'; // Include the spline chart from viz folder import Spline from 'fusioncharts/viz/spline'; // Include the fusion theme import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'; // Add the div tag for the chart container const myDiv = document.createElement('div'); myDiv.id = 'chart-container'; document.body.appendChild(myDiv); // Specify your key here let YOUR_KEY = SUBSCRIPTION_KEY // Construct a query for each year and fetch the data // Create a data JSON and datasource JSON for rendering the chart async function main() { var dataJson = []; let queryPrefix = 'http://api.coinlayer.com/'; let querySuffix = '?access_key=' + YOUR_KEY + '&symbols=BTC'; //Construct the query string for 10 years starting from 2012 for (var i=0;i<10;++i){ var dateStr = parseInt(2012 + i) + '-01-01'; var queryStr = queryPrefix + dateStr + querySuffix; //Call coinlayer API let response = await fetch(queryStr); let responseJson = await response.json(); if (response.ok){ //construct the data JSON dataJson.push({label: dateStr, value:responseJson.rates.BTC}) } else { alert('Error reading data from Coinlayer API'); return; } } var dataSource = constructDataSource(dataJson); renderChart(dataSource); } //constructs JSON text for 'dataSource' key function constructDataSource(data){ var dataSource = {"chart": { "caption": "Historical Rates of Bitcoin on January 01 Over the Past 10 Years", "subcaption": "Data Source: https://coinlayer.com/", "xAxisName": "Date", "YAxisName": "Bitcoin Exchange Rate", "ynumbersuffix": "$", "xnumbersuffix": "", "theme": "fusion", "plotToolText": "<b>$dataValue</b> BTC rate on <b>$label</b>", "anchorbgcolor": "#ff00ff", "palettecolors": "#ff00ff" }, data: data}; return dataSource; } // Draw the chart function renderChart(dataSrc){ FusionCharts.addDep(Spline); FusionCharts.addDep(FusionTheme); //Chart Configurations const chartConfig = { type: 'spline', renderAt: 'chart-container', width: '80%', height: '600', dataFormat: 'json', dataSource: dataSrc } // Create an instance of FusionCharts object with chart options // and render the chart var chartInstance = new FusionCharts(chartConfig); chartInstance.render(); console.log(JSON.stringify(chartConfig)); } //Call main method main();That’s it! We just created a beautiful spline chart illustrating how the price of Bitcoin grew over the last 10 years.
npx webpack serve --mode=developmentThe app will run in your browser at localhost:8080. You can download the complete source code for this app and run it on your machine.
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…