{"id":16948,"date":"2019-01-28T15:00:18","date_gmt":"2019-01-28T09:30:18","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16948"},"modified":"2026-01-20T14:36:29","modified_gmt":"2026-01-20T09:06:29","slug":"tutorial-creating-real-time-bitcoin-ticker-javascript","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/","title":{"rendered":"Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript 2026"},"content":{"rendered":"Many crypto enthusiasts believe that Bitcoin will eventually replace traditional fiat currency. Well, that&#8217;s becoming more of a fantasy, especially after Bitcoin prices skyrocketed to $20,000 last year. While the entire world has been hoping for Bitcoin to rise and stabilize, the currency has actually fallen and remains volatile.\r\n\r\nAs more trading portals and online websites monitor bitcoin price fluctuations, keeping an eye on these real-time changes is critical, especially if you&#8217;re a Bitcoin enthusiast who trades cryptocurrencies on a regular basis.\r\n\r\nWe created a bitcoin ticker dashboard that is updated in real-time.\r\n\r\n\r\n\r\nCheck out the Bitcoin Ticker Live Dashboard <a class=\"attrlink\" href=\"https:\/\/sowmyaraj92.github.io\/cryptocurrency_ticker\/\" target=\"_blank\" rel=\"noreferrer nofollow noopener\" data-target-href=\"https:\/\/sowmyaraj92.github.io\/cryptocurrency_ticker\/\">here.<\/a>\r\n\r\nThe three leading KPIs showcase real-time values of top cryptocurrencies like Bitcoin, Litecoin, and Ethereum. This line-chart below the KPIs demonstrates a Bitcoin Ticker where the variation in bitcoin prices is captured. The x-axis denotes the timestamp variation, and the y-axis indicates bitcoin prices in dollars.\r\n\r\nIn this post, we&#8217;ll walk you through the process of creating a real-time <a href=\"https:\/\/www.fusioncharts.com\/charts\/realtime-charts\/line-chart\">Financial Dashboard<\/a> with JavaScript, the Bitcoin API, and FusionCharts.\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#It_Accounts_for_Dependencies\" title=\"It Accounts for Dependencies\">It Accounts for Dependencies<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#It_Includes_and_Initializes_Cryptonator_API\" title=\"It Includes and Initializes Cryptonator API\">It Includes and Initializes Cryptonator API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#Dashboard_Structure_and_Layout\" title=\"Dashboard Structure and Layout\">Dashboard Structure and Layout<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#Fetching_the_JSON_Data\" title=\"Fetching the JSON Data\">Fetching the JSON Data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#JS_Implementation_Functions_and_Descriptions\" title=\"JS Implementation: Functions and Descriptions\">JS Implementation: Functions and Descriptions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#Creating_the_Chart_Container\" title=\"Creating the Chart Container\">Creating the Chart Container<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#Creating_the_Chart_Instance\" title=\"Creating the Chart Instance\">Creating the Chart Instance<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#Real-Time_Chart\" title=\"Real-Time Chart\">Real-Time Chart<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#Rendering_The_Chart\" title=\"Rendering The Chart\">Rendering The Chart<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"It_Accounts_for_Dependencies\"><\/span>It Accounts for Dependencies<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nBefore we start, we need to set up the following dependencies:\r\n<ol>\r\n \t<li>FusionCharts Core JS Files (<a class=\"attrlink\" href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noreferrer nofollow noopener\" data-target-href=\"https:\/\/www.fusioncharts.com\/download\/\"><strong>Download Link<\/strong><\/a>).<\/li>\r\n \t<li><strong>Cryptonator API<\/strong><\/li>\r\n<\/ol>\r\n<em>NOTE: Include the core JS files (inside the tag) downloaded as part of the FusionCharts package, in the HTML file:<\/em>\r\n<pre class=\"lang:javascript\">&lt;script type=\u201dtext\/javascript\u201d src=\u201dhttps:\/\/cdn.fusioncharts.com\/fusioncharts\/latest\/fusioncharts.js\u201d &gt;&lt;\/script&gt;\r\n &lt;script type=\u201dtext\/javascript\u201d src=\u201dhttps:\/\/cdn.fusioncharts.com\/fusioncharts\/latest\/themes\/fusioncharts.theme.fusion.js\u201c&gt;&lt;\/script&gt;<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"It_Includes_and_Initializes_Cryptonator_API\"><\/span>It Includes and Initializes Cryptonator API<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe Cryptonator API data source is defined at the top of the script tag. The API returns a <a class=\"attrlink\" href=\"https:\/\/www.json.org\/\" target=\"_blank\" rel=\"noreferrer nofollow noopener\" data-target-href=\"https:\/\/www.json.org\/\">JSON<\/a> dump, which we have converted as the JavaScript object &#8220;data&#8221; (passed on to this function as an argument).\r\n\r\nGiven below is the API URL, this will fetch the real-time data for the Bitcoin Ticker: <strong>https:\/\/api.cryptonator.com\/api\/ticker\/btc-usd<\/strong>\r\n\r\n\r\n\r\nNavigate to the requested URL, and the values returned should be visible in the browser. Furthermore, replace btc-usd with the currency codes like eth-usd, ltc-usd to fetch the values of Ethereum and Litecoin.\r\n<ul>\r\n \t<li><strong>IMPORTANT:<\/strong> You may encounter a CORS issue while using the Cryptonator API, where your server may be blocked after sending repeated requests to the API. You can learn more about the CORS issue you may face here: https:\/\/cors.io\/. One quick way to bypass the CORS issue is by using AWS Lambda for server-less architecture or setting up a backend server and making requests via it. Use the below syntax to resolve the issue.<\/li>\r\n<\/ul>\r\n<pre class=\"lang:javascript\">const api_url = 'https:\/\/cors.io\/?https:\/\/api.cryptonator.com\/api\/ticker\/';<\/pre>\r\nLet&#8217;s get into the detailed code snippets to understand the ticker better.\r\n<h2><span class=\"ez-toc-section\" id=\"Dashboard_Structure_and_Layout\"><\/span>Dashboard Structure and Layout<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span data-preserver-spaces=\"true\">We have used\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">Bootstrap 4\u00a0<\/span><\/a><span data-preserver-spaces=\"true\">here to build this responsive dashboard. With new components, responsive structures, and styles, it is a consistent framework that supports all browsers and\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.w3.org\/Style\/CSS\/Overview.en.html\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">CSS<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0compatibility fixes.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">The components presented on the page are:<\/span>\r\n<ol>\r\n \t<li>Dashboard Header<\/li>\r\n \t<li>Cryptocurrency Values<\/li>\r\n \t<li>Bitcoin Ticker<\/li>\r\n<\/ol>\r\n<h2><span class=\"ez-toc-section\" id=\"Fetching_the_JSON_Data\"><\/span>Fetching the JSON Data<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe <a class=\"attrlink\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XMLHttpRequest\" target=\"_blank\" rel=\"noreferrer nofollow noopener\" data-target-href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XMLHttpRequest\">XMLHttpRequest<\/a>\u00a0object can be used to request data from a web server.\r\nTo send a request to a server, the <b>open()<\/b> method of the XMLHttpRequest object is used.\r\n<div class=\"table-responsive\">\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td><strong>open(method, URL, async)<\/strong><\/td>\r\n<td>Specifies the type of request\r\n<strong>method:<\/strong> the type of request: GET or POST\r\n<strong>URL:<\/strong> the server (file) location\r\n<strong>async:<\/strong> true (asynchronous) or false (synchronous)<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<h2><span class=\"ez-toc-section\" id=\"JS_Implementation_Functions_and_Descriptions\"><\/span>JS Implementation: Functions and Descriptions<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe table below describes the functions and their corresponding outcomes.\r\n<div class=\"table-responsive\">\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td><strong><code>bitcoinDataHandler()<\/code><\/strong><\/td>\r\n<td><strong>Returns the price for Bitcoin.<\/strong><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong><code>ethereumDataHandler()<\/code><\/strong><\/td>\r\n<td><strong>Returns the price for Ethereum.<\/strong><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong><code>litecoinDataHandler()<\/code><\/strong><\/td>\r\n<td><strong>Returns the price for Litecoin.<\/strong><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong><code>clientDateTime()<\/code><\/strong><\/td>\r\n<td><strong>Returns the current timestamp for the chart.<\/strong><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong><code>updateData()<\/code><\/strong><\/td>\r\n<td><strong>The chart is referenced with its ID, and the data is fed to the chart.<\/strong><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_Chart_Container\"><\/span>Creating the Chart Container<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nEvery chart displayed on a web page is rendered within a unique HTML container.\r\nWe will use the <code>&lt;div&gt;<\/code> element for creating the HTML container for our chart.\r\n\r\nGiven below is the code for creating the chart container:\r\n<pre class=\"lang:markup\">&lt;body&gt;\r\n&lt;div id=\u201dchart-container\u201d&gt;&lt;\/div&gt;\r\n&lt;\/body&gt;<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_Chart_Instance\"><\/span>Creating the Chart Instance<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<h3><span class=\"ez-toc-section\" id=\"Real-Time_Chart\"><\/span>Real-Time Chart<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nA real-time line chart is used to show the magnitude of a price in real-time. Data is updated automatically at fixed intervals by getting new data from the server without any page refreshes. Data values plotted on the chart as data points are then connected using line segments. This chart can be simulated as a real-time bitcoin price monitor which updates after a fixed interval of time.\r\n\r\n<strong>To access the Real-Time Data Charts provided by FusionCharts, head to <a href=\"https:\/\/www.fusioncharts.com\/dev\/chart-guide\/standard-charts\/real-time-charts\" target=\"_blank\" rel=\"noopener noreferrer\">real-time charts<\/a>.<\/strong>\r\n\r\nTo create a real-time chart, follow the steps given below:\r\n<ul>\r\n \t<li>Within the JSON data, the attributes and their corresponding values are set in the format: &#8220;&#8221;: &#8220;&#8221;<\/li>\r\n \t<li>The chart type is specified using the type attribute. To render a real-time line chart, set <strong>realtimeline<\/strong>.<\/li>\r\n \t<li>Set the container object using the <strong>renderAt<\/strong> attribute.<\/li>\r\n \t<li>Set <strong>refreshinterval<\/strong> to 2, so the chart gets updated every 2 seconds.<\/li>\r\n \t<li>The dimension of the chart is specified using <strong>width<\/strong> and <strong>height<\/strong> attributes.<\/li>\r\n \t<li>The type of data (JSON\/XML) you want to pass to the chart object is defined using the <strong>dataFormat<\/strong> attribute.<\/li>\r\n<\/ul>\r\nSince we have the JSON data and the chart container in place, we will now create the FusionCharts instance. The details required to render the chart, like the chart type, the chart ID, chart dimensions, the HTML container ID, the data format, and so on, will be passed to this chart instance.\r\n<pre class=\"lang:javascript\">var fusioncharts = new FusionCharts({\r\n     id: \"stockRealTimeChart\",\r\n     type: 'realtimeline',\r\n     renderAt: 'chart-container',\r\n     width: '100%',\r\n     height: '350',\r\n     dataFormat: 'json',\r\n     };<\/pre>\r\nThe data source required to render the real-time chart is given below:\r\n<pre class=\"lang:javascript\">dataSource: {\r\n\t\"chart\": {\r\n\t\t\"caption\": \"Bitcoin Ticker\",\r\n\t\t\"subCaption\": \"\",\r\n\t\t\"xAxisName\": \"Local Time\",\r\n\t\t\"yAxisName\": \"USD\",\r\n\t\t\"numberPrefix\": \"$\",\r\n\t\t\"refreshinterval\": \"2\",\r\n\t\t\"slantLabels\": \"1\",\r\n\t\t\"numdisplaysets\": \"10\",\r\n\t\t\"labeldisplay\": \"rotate\",\r\n\t\t\"showValues\": \"0\",\r\n\t\t\"showRealTimeValue\": \"0\",\r\n\t\t\"theme\": \"fusion\",\r\n\t\t\"yAxisMaxValue\": (bitcoinDataHandler().toString() + 20),\r\n\t\t\"yAxisMinValue\": (bitcoinDataHandler().toString() - 20),\r\n\t},<\/pre>\r\nWe can customize the functionality of a real-time chart in great detail. For example, we can define refresh interval, update interval, decimal precisions, canvas and chart margins, etc.\r\n<ul>\r\n \t<li>In addition to this, FusionCharts provides the ability to log messages depending on certain predefined conditions.<\/li>\r\n \t<li>Use the <strong>feedData(strData)<\/strong> method provided by FusionCharts to feed data to the chart. Here, <strong>strData<\/strong><\/li>\r\n \t<li><span data-preserver-spaces=\"true\">is a string value that contains data in the same format as the real-time data provider page.<\/span>\u00a0Also, <a href=\"https:\/\/www.fusioncharts.com\/dev\/api\/fusioncharts\/fusioncharts-methods#feedData\" target=\"_blank\" rel=\"noreferrer nofollow noopener\" data-target-href=\"https:\/\/www.fusioncharts.com\/dev\/api\/fusioncharts\/fusioncharts-methods#feedData\"><strong><u>feedData<\/u><\/strong><\/a> takes care of any delay that occurs during auto-refresh or on page load.<\/li>\r\n \t<li><code>updateData()<\/code> function builds the data (in the real-time data format) to be specified for the chart. <span data-preserver-spaces=\"true\">You invoke this function with a JavaScript interval.<\/span><\/li>\r\n<\/ul>\r\nWe will now create a file called bitcoinstyle.css which will contain all the styles and CSS techniques for our dashboard. Here\u2019s how it looks like:\r\n<pre class=\"lang:css\">.navbar-dark {\r\n    background-color: #4670ad;\r\n    box-shadow: 0 2px 4px 0 rgba(0,0,0,.04);\r\n    min-height: 65px;\r\n}\r\n \r\n.logo {\r\n    color: #FFFFFF;\r\n    font-weight: 500;\r\n    text-transform: capitalize;\r\n}\r\n \r\n.card {\r\n   border-radius: 5px;\r\n   box-shadow: 0 6px 14px 0 rgba(33,35,68,.1)!important;\r\n}\r\n \r\n.kpi-value {\r\n    font-weight: 500 !important;\r\n}<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Rendering_The_Chart\"><\/span>Rendering The Chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<div>Now call the <code>render()<\/code> method for the chart instance to render the chart, as given below:<\/div>\r\n<div><code>fusioncharts.render();<\/code><\/div>\r\n<div>The HTML and JS for the Bitcoin component before the final render looks like this:<\/div>\r\n<div><strong>HTML Section:-<\/strong><\/div>\r\n<pre class=\"lang:markup\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=\"UTF-8\"&gt;\r\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n&lt;link rel=\"stylesheet\" href=\"bitcoinstyle.css\"&gt;\r\n&lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\r\n&lt;title&gt; Bitcoin Ticker&lt;\/title&gt;\r\n&lt;!-- design system files --&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/ds.fusioncharts.com\/2.0.8\/css\/ds.css\"&gt;\r\n&lt;script src=\"https:\/\/ds.fusioncharts.com\/2.0.8\/js\/ds.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/cdn.fusioncharts.com\/fusioncharts\/latest\/fusioncharts.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/cdn.fusioncharts.com\/fusioncharts\/latest\/themes\/fusioncharts.theme.fusion.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;nav class=\"navbar navbar-dark\"&gt;\r\n&lt;h1 class=\"logo pl-2\"&gt;Real-Time Cryptocurrency&lt;\/h1&gt;\r\n&lt;\/nav&gt;\r\n&lt;div class=\"container-fluid\"&gt;\r\n&lt;div class=\"row text-center mt-4 pl-3 pr-3\"&gt;\r\n&lt;div class=\"col-sm\"&gt;\r\n&lt;div class=\"card\"&gt;\r\n&lt;div class=\"card-body\"&gt;\r\n&lt;div class=\"h3\"&gt;Bitcoin(BTC)&lt;\/div&gt;\r\n&lt;div class=\"h5\"&gt;(Price in USD)&lt;\/div&gt;\r\n&lt;div id=\"btc_val\" class=\"h4 kpi-value\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"col-sm\"&gt;\r\n&lt;div class=\"card\"&gt;\r\n&lt;div class=\"card-body\"&gt;\r\n&lt;div class=\"h3\"&gt;Litecoin(LTC)&lt;\/div&gt;\r\n&lt;div class=\"h5\"&gt;(Price in USD)&lt;\/div&gt;\r\n&lt;div id=\"ltc_val\" class=\"h4 kpi-value\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"col-sm\"&gt;\r\n&lt;div class=\"card\"&gt;\r\n&lt;div class=\"card-body\"&gt;\r\n&lt;div class=\"h3\"&gt;Ethereum&lt;\/div&gt;\r\n&lt;div class=\"h5\"&gt;(Price in USD)&lt;\/div&gt;\r\n&lt;div id=\"eth_val\" class=\"h4 kpi-value\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"row mt-4 pr-3 pl-3\"&gt;\r\n&lt;div class=\"col\"&gt;\r\n&lt;div class=\"card\"&gt;\r\n&lt;div class=\"card-body\"&gt;\r\n&lt;div id=\"chart-container\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\nJavaScript Section:-\r\n&lt;script&gt;\r\n\/\/Fetch the price of Ethereum\r\nconst eth_api_url = 'https:\/\/api.cryptonator.com\/api\/ticker\/eth-usd';\r\nfunction ethereumHttpObject() {\r\ntry { return new XMLHttpRequest(); }\r\ncatch (error) { }\r\n}\r\nfunction ethereumGetData() {\r\nvar request = ethereumHttpObject();\r\nrequest.open(\"GET\", eth_api_url, false);\r\nrequest.send(null);\r\nconsole.log(request.responseText);\r\nreturn request.responseText;\r\n}\r\nfunction ethereumDataHandler() {\r\nvar raw_data_string = ethereumGetData();\r\nvar data = JSON.parse(raw_data_string);\r\nvar base = data.ticker.base;\r\nvar target = data.ticker.target;\r\nvar price = data.ticker.price;\r\nvar volume = data.ticker.volume;\r\nvar change = data.ticker.change;\r\nvar api_server_epoch_timestamp = data.timestamp;\r\nvar api_success = data.success;\r\nvar api_error = data.error;\r\nreturn price;\r\n}\r\ndocument.getElementById(\"eth_val\").innerHTML = \"$\" + Math.round(ethereumDataHandler());\r\n\/\/Fetch the price of Litecoin\r\nconst ltc_api_url = 'https:\/\/api.cryptonator.com\/api\/ticker\/ltc-usd';\r\nfunction litecoinHttpObject() {\r\ntry { return new XMLHttpRequest(); }\r\ncatch (error) { }\r\n}\r\nfunction litecoinGetData() {\r\nvar request = litecoinHttpObject();\r\nrequest.open(\"GET\", ltc_api_url, false);\r\nrequest.send(null);\r\n\/\/console.log(request.responseText);\r\nreturn request.responseText;\r\n}\r\nfunction litecoinDataHandler() {\r\nvar raw_data_string = litecoinGetData();\r\nvar data = JSON.parse(raw_data_string);\r\nvar base = data.ticker.base;\r\nvar target = data.ticker.target;\r\nvar price = data.ticker.price;\r\nvar volume = data.ticker.volume;\r\nvar change = data.ticker.change;\r\nvar api_server_epoch_timestamp = data.timestamp;\r\nvar api_success = data.success;\r\nvar api_error = data.error;\r\nreturn price;\r\n}\r\ndocument.getElementById(\"ltc_val\").innerHTML = \"$\" + Math.round(litecoinDataHandler());\r\n\/\/Fetch the value of Bitcoin\r\nconst api_url = 'https:\/\/api.cryptonator.com\/api\/ticker\/btc-usd';\r\nconst time_interval = 2;\r\nfunction addLeadingZero(num) {\r\nreturn (num &lt;= 9) ? (\"0\" + num) : num;\r\n}\r\nfunction clientDateTime() {\r\nvar date_time = new Date();\r\nvar curr_hour = date_time.getHours();\r\nvar zero_added_curr_hour = addLeadingZero(curr_hour);\r\nvar curr_min = date_time.getMinutes();\r\nvar curr_sec = date_time.getSeconds();\r\nvar curr_time = zero_added_curr_hour + ':' + curr_min + ':' + curr_sec;\r\nreturn curr_time\r\n}\r\nfunction makeHttpObject() {\r\ntry { return new XMLHttpRequest(); }\r\ncatch (error) { }\r\n}\r\nfunction bitcoinGetData() {\r\nvar request = makeHttpObject();\r\nrequest.open(\"GET\", api_url, false);\r\nrequest.send(null);\r\nreturn request.responseText;\r\n}\r\nfunction bitcoinDataHandler() {\r\nvar raw_data_string = bitcoinGetData();\r\nvar data = JSON.parse(raw_data_string);\r\nvar base = data.ticker.base;\r\nvar target = data.ticker.target;\r\nvar price = data.ticker.price;\r\nvar volume = data.ticker.volume;\r\nvar change = data.ticker.change;\r\nvar api_server_epoch_timestamp = data.timestamp;\r\nvar api_success = data.success;\r\nvar api_error = data.error;\r\nreturn price;\r\n}\r\ndocument.getElementById(\"btc_val\").innerHTML = \"$\" + Math.round(bitcoinDataHandler());\r\nFusionCharts.ready(function () {\r\nvar fusioncharts = new FusionCharts({\r\nid: \"stockRealTimeChart\",\r\ntype: 'realtimeline',\r\nrenderAt: 'chart-container',\r\nwidth: '100%',\r\nheight: '350',\r\ndataFormat: 'json',\r\ndataSource: {\r\n\"chart\": {\r\n\"caption\": \"Bitcoin Ticker\",\r\n\"subCaption\": \"\",\r\n\"xAxisName\": \"Local Time\",\r\n\"yAxisName\": \"USD\",\r\n\"numberPrefix\": \"$\",\r\n\"refreshinterval\": \"2\",\r\n\"slantLabels\": \"1\",\r\n\"numdisplaysets\": \"10\",\r\n\"labeldisplay\": \"rotate\",\r\n\"showValues\": \"0\",\r\n\"showRealTimeValue\": \"0\",\r\n\"theme\": \"fusion\",\r\n\"yAxisMaxValue\": (bitcoinDataHandler().toString() + 20),\r\n\"yAxisMinValue\": (bitcoinDataHandler().toString() - 20),\r\n},\r\n\"categories\": [{\r\n\"category\": [{\r\n\"label\": clientDateTime().toString()\r\n}]\r\n}],\r\n\"dataset\": [{\r\n\"data\": [{\r\n\"value\": bitcoinDataHandler().toString()\r\n}]\r\n}]\r\n},\r\n\"events\": {\r\n\"initialized\": function (e) {\r\nfunction updateData() {\r\n\/\/ Get reference to the chart using its ID\r\nvar chartRef = FusionCharts(\"stockRealTimeChart\"),\r\nx_axis = clientDateTime(),\r\ny_axis = bitcoinDataHandler(),\r\nstrData = \"&amp;label=\" + x_axis + \"&amp;value=\" + y_axis;\r\n\/\/ Feed it to chart.\r\nchartRef.feedData(strData);\r\n}\r\ne.sender.chartInterval = setInterval(function () {\r\nupdateData();\r\n}, time_interval * 1000);\r\n},\r\n\"disposed\": function (evt, arg) {\r\nclearInterval(evt.sender.chartInterval);\r\n}\r\n}\r\n}\r\n);\r\nfusioncharts.render();\r\n});\r\n&lt;\/script&gt;<\/pre>\r\nAfter successfully executing the code, the page is loaded with the dashboard header, cryptocurrency values, and the bitcoin ticker.\r\n\r\nThe Bitcoin, Litecoin, and Ethereum prices (in USD) are displayed just below the dashboard header. This Bitcoin Ticker gets updated at a fixed interval of 2 seconds. Hovering on the line chart, the price of bitcoin at that particular timestamp is observable at every tooltip. The y-axis is configured dynamically so that even with any drastic price change, the chart&#8217;s axis gets modified accordingly.\r\n\r\nAfter you have implemented all the steps in this tutorial, your final dashboard will look like this:\r\n\r\n\r\n\r\nYou can find the entire source code for the Bitcoin Ticker here \u2192 <a href=\"https:\/\/github.com\/sowmyaraj92\/cryptocurrency_ticker\" target=\"_blank\" rel=\"noreferrer nofollow noopener\" data-target-href=\"https:\/\/github.com\/sowmyaraj92\/cryptocurrency_ticker\">Source Code Link.<\/a>\r\n\r\n<strong>You can download Fusion Charts Package for Javascript stack from here\u2192<a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/plain-javascript\/your-first-chart-using-plain-javascript\" target=\"_blank\" rel=\"noreferrer nofollow noopener\" data-target-href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/plain-javascript\/your-first-chart-using-plain-javascript\">Sign up for Fusion Charts<\/a>.<\/strong>\r\n\r\n<span data-preserver-spaces=\"true\">You can find a collection of great\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/html-css-js.com\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">CSS<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0tools and resources at<\/span> html-css-js.com: code beautifier, cheat sheet, style generators, useful links, etc.","protected":false},"excerpt":{"rendered":"<p>Many crypto enthusiasts believe that Bitcoin will eventually replace traditional fiat currency. Well, that&#8217;s becoming more of a fantasy, especially after Bitcoin prices skyrocketed to $20,000 last year. While the entire world has been hoping for Bitcoin to rise and stabilize, the currency has actually fallen and remains volatile. As more trading portals and online [&hellip;]<\/p>\n","protected":false},"author":43,"featured_media":16972,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"coauthors":[702],"class_list":["post-16948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript<\/title>\n<meta name=\"description\" content=\"Build a Real-Time Cryptocurrency dashboard. Use JavaScript, the Cryptonator API, and 2026 FusionCharts to track the market. Monitor your digital coins now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Build a Real-Time Cryptocurrency dashboard. Use JavaScript, the Cryptonator API, and 2026 FusionCharts to track the market. Monitor your digital coins now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-28T09:30:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:06:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2019\/01\/Artboard-Copy.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2016\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sowmya Rajan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sowmya Rajan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Sowmya Rajan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/adc831bad31f25020d64325b9b50cc00\"\n\t            },\n\t            \"headline\": \"Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript 2026\",\n\t            \"datePublished\": \"2019-01-28T09:30:18+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:29+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/\"\n\t            },\n\t            \"wordCount\": 1184,\n\t            \"commentCount\": 2,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2019\/01\/Artboard-Copy.png\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/\",\n\t            \"name\": \"Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2019\/01\/Artboard-Copy.png\",\n\t            \"datePublished\": \"2019-01-28T09:30:18+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:29+00:00\",\n\t            \"description\": \"Build a Real-Time Cryptocurrency dashboard. Use JavaScript, the Cryptonator API, and 2026 FusionCharts to track the market. Monitor your digital coins now.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2019\/01\/Artboard-Copy.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2019\/01\/Artboard-Copy.png\",\n\t            \"width\": 2016,\n\t            \"height\": 750\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/adc831bad31f25020d64325b9b50cc00\",\n\t            \"name\": \"Sowmya Rajan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/a8c31dc331e02710476293f03a2edc86\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/301\/3016c8369883809edc539c5228a3d9e0x96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/301\/3016c8369883809edc539c5228a3d9e0x96.jpg\",\n\t                \"caption\": \"Sowmya Rajan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/sowmya\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript","description":"Build a Real-Time Cryptocurrency dashboard. Use JavaScript, the Cryptonator API, and 2026 FusionCharts to track the market. Monitor your digital coins now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript","og_description":"Build a Real-Time Cryptocurrency dashboard. Use JavaScript, the Cryptonator API, and 2026 FusionCharts to track the market. Monitor your digital coins now.","og_url":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2019-01-28T09:30:18+00:00","article_modified_time":"2026-01-20T09:06:29+00:00","og_image":[{"width":2016,"height":750,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2019\/01\/Artboard-Copy.png","type":"image\/png"}],"author":"Sowmya Rajan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sowmya Rajan","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/"},"author":{"name":"Sowmya Rajan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/adc831bad31f25020d64325b9b50cc00"},"headline":"Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript 2026","datePublished":"2019-01-28T09:30:18+00:00","dateModified":"2026-01-20T09:06:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/"},"wordCount":1184,"commentCount":2,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2019\/01\/Artboard-Copy.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/","url":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/","name":"Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2019\/01\/Artboard-Copy.png","datePublished":"2019-01-28T09:30:18+00:00","dateModified":"2026-01-20T09:06:29+00:00","description":"Build a Real-Time Cryptocurrency dashboard. Use JavaScript, the Cryptonator API, and 2026 FusionCharts to track the market. Monitor your digital coins now.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2019\/01\/Artboard-Copy.png","contentUrl":"\/blog\/wp-content\/uploads\/2019\/01\/Artboard-Copy.png","width":2016,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/tutorial-creating-real-time-bitcoin-ticker-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial: Creating a Real-Time Bitcoin Ticker in JavaScript 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/adc831bad31f25020d64325b9b50cc00","name":"Sowmya Rajan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/a8c31dc331e02710476293f03a2edc86","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/301\/3016c8369883809edc539c5228a3d9e0x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/301\/3016c8369883809edc539c5228a3d9e0x96.jpg","caption":"Sowmya Rajan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/sowmya\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16948"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16948\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16972"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16948"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}