Table of Contents
https://api.blockchain.info/charts/transactions-per-second?timespan=1weeks&format=jsonThis query returns a result that is a JSON object, with the following structure. Please note that only the first two data points are shown below for readability.
{"status":"ok", "name":"Transaction Rate", "unit":"Transactions Per Second", "period":"minute", "description":"The number of Bitcoin transactions added to the mempool per second.", "values":[{"x":1625444100,"y":1.4166666666666667}, {"x":1625445000,"y":1.6166666666666667}, ... ] }The data comes as (x,y) pairs in the “values” key.
npm i -D webpack-dev-server html-webpack-plugin path webpack-cli fusionchartsCreate two directories src and dist. In the src directory create a file called index.js. You can type the following at the command prompt:
mkdir src touch src/index.js mkdir dist
To configure the project create a file called webpack.config.js in the main project directory. Add the following code to this file.
// 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: { '/BlockchainAPI': { target: 'https://api.blockchain.info', pathRewrite: { '^/BlockchainAPI': 'https://api.blockchain.info/charts/transactions-per-second?timespan=1weeks&format=json'}, changeOrigin: true, }, }, } };In the configuration file shown above, we have added a proxy for the blockchain.info URL to avoid any CORS error.
// Include the core fusioncharts file from core import FusionCharts from 'fusioncharts/core'; // Include the chart from viz folder // E.g. - import ChartType from fusioncharts/viz/[ChartType] import Scatter from 'fusioncharts/viz/scatter'; // Include the fusion theme import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';You also need to create a div tag for the chart container on the main HTML page. Below the import section add the following to your index.js file:
//add the div tag for the chart container const myDiv = document.createElement('div'); myDiv.id = 'chart-container'; document.body.appendChild(myDiv);
async function main() { //Get the data let response = await fetch('/BlockchainAPI'); let data = await response.json(); if (response.ok){ renderPage(data); } else { alert('Error reading data from Blockchain Repository'); } } //renders the html page when passed data as JSON text function renderPage(JsonText){ var dataSource = constructDataSource(JsonText); renderChart(dataSource); } //constructs JSON text for 'dataSource' key function constructDataSource(blockchainJson){ var dataset = [{ "seriesname": "Bitcoin transactions", anchorbgcolor: "ff00ff", data: blockchainJson.values }]; var category = [] // Take around 5 transactions at equidistant points var len = blockchainJson.values.length; for (var i=0;i<len;i=i+Math.trunc(len/5)){ category.push({x: blockchainJson.values[i].x, label: blockchainJson.values[i].x.toString(), showverticalline: "1" }); } //end for var categories = [ { verticallinedashed: "1", verticallinedashlen: "1", verticallinedashgap: "1", verticallinethickness: "1", verticallinecolor: "#000000", category } ]; var dataSource = {"chart": { "caption": blockchainJson.description, "subcaption": "Data Source: https://www.blockchain.com", "xAxisName": "Time stamp", "YAxisName": blockchainJson.unit, "ynumbersuffix": "", "xnumbersuffix": "", "theme": "fusion", "showRegressionLine": "1", "plotToolText": "<b>$yDataValue</b> transactions at timestamp: <b>$xvalue</b>" }, dataset, categories}; return dataSource; } // Draw the chart function renderChart(dataSrc){ FusionCharts.addDep(Scatter); FusionCharts.addDep(FusionTheme); //Chart Configurations const chartConfig = { type: 'scatter', renderAt: 'chart-container', width: '80%', height: '600', dataFormat: 'json', dataSource: dataSrc } //Create an Instance with chart options and render the chart var chartInstance = new FusionCharts(chartConfig); chartInstance.render(); } //Call main method main();That’s it! We just created a beautiful visualization of the blockchain data using FusionCharts scatter graphs.
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…