{"id":16809,"date":"2018-02-14T13:48:59","date_gmt":"2018-02-14T08:18:59","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16809"},"modified":"2026-01-20T14:42:21","modified_gmt":"2026-01-20T09:12:21","slug":"visualize-real-time-data-socket-io-charts","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/","title":{"rendered":"How to Visualize Real-Time Data: 2026 Streaming Tips"},"content":{"rendered":"We live in a world where experiences are defined by the &#8216;right here, right now.&#8217; As a result, our initial reaction to any event is, &#8220;Are we getting this in real-time? &#8220;From wildfires raging across California to Keisha&#8217;s stellar Grammy performance or your next Facebook update,&#8217; real-time&#8217; command value is unrivaled.&#8221;\r\n\r\nReal-time data is information that is delivered immediately after it is collected, with no (or nearly no) lag. Consider a live sports broadcast: you&#8217;ve placed a $50 bet based on how they&#8217;re playing because you have real-time data. This information would be useless the day after the game.\r\n\r\nThe same theory holds true for stock markets, crisis response scenarios, infrastructure maintenance, and other areas. Because the possibilities are endless, real-time data has become the new oil for modern businesses.\r\n\r\n<strong>So the question is: how do we access data and interact with it in real-time? <\/strong>We&#8217;ll find out the answers in this post and show you how to use <a href=\"https:\/\/www.fusioncharts.com\/charts\/realtime-charts\/line-chart\">Data Visualization Tool<\/a> to create real-time data and charts with socket.io 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\/visualize-real-time-data-socket-io-charts\/#Charts_and_Visualization\" title=\"Charts and Visualization\">Charts and Visualization<\/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\/visualize-real-time-data-socket-io-charts\/#Heres_How_It_Works\" title=\"Here\u2019s How It Works:\">Here\u2019s How It Works:<\/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\/visualize-real-time-data-socket-io-charts\/#Creating_a_Real-Time_Chart_Using_SocketIO\" title=\"Creating a Real-Time Chart Using Socket.IO\">Creating a Real-Time Chart Using Socket.IO<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#Part_1\" title=\"Part 1\">Part 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#Part_2\" title=\"Part 2\">Part 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#Part_3\" title=\"Part 3\">Part 3<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Charts_and_Visualization\"><\/span>Charts and Visualization<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<strong><span data-preserver-spaces=\"true\">Real-time charts\u00a0<\/span><\/strong><span data-preserver-spaces=\"true\">and<\/span><strong><span data-preserver-spaces=\"true\">\u00a0data visualization in real-time<\/span><\/strong><span data-preserver-spaces=\"true\">\u00a0is your answer. Also called data-streaming charts (because these are almost like live video feeds), they are automatically updated after every \u2018n\u2019 seconds. The updated data is fetched straight from the server, and no page refreshes are required from the user\u2019s end. Therefore, you have access to the latest and most relevant information whenever you look at the chart.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">Data flows into real-time charts via WebSockets &#8211; an internet communication protocol that lets the client and the server talk to each other in real-time and keeps data moving both ways (in other words, a persistent connection).<\/span>\r\n\r\nBecause the server can also fetch information from the client, you could also set up an event-based system. The server and the client can both react to triggers received on the connection.\r\n\r\nSocket.IO is a utility built on WebSocket that makes it easy to integrate real-time information into Node.js applications (linking server-side data to the client).\r\n<h2><span class=\"ez-toc-section\" id=\"Heres_How_It_Works\"><\/span>Here\u2019s How It Works:<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nSocket.IO uses Node.js\u2019 asynchronous and event-based approaches. You could listen to a connection event, fire up a function when a new user connects to the server, emit a message (primarily an event) over a socket, and much more.\r\n\r\nMany companies and developers use it for instant messaging, real-time analytics and monitoring, streaming platforms, and document collaboration. From Slack to Snapchat and Fox TV, you name it, and Socket.IO is probably powering it.\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_a_Real-Time_Chart_Using_SocketIO\"><\/span>Creating a Real-Time Chart Using Socket.IO<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nLet\u2019s dive in &#8211; in this tutorial, we\u2019re using PubNub as our data source. This is a global Data Stream Network and Infrastructure-as-a-Service company that pioneers in real-time technologies.\r\n\r\nThey use a Publish\/Subscribe model for real-time data streaming and device signaling. As a result, you can establish and maintain persistent socket connections to any device and push data to global audiences in less than \u00bc of a second.\r\n\r\nThere are three steps you\u2019d need to perform:\r\n<ul>\r\n \t<li>First, we incorporate all the requisite components &#8211; Socket.IO, PubNub, FusionCharts, Webpack, and Nodemon.<\/li>\r\n \t<li>Then, we create all the files required.<\/li>\r\n \t<li>Finally, we start the server to render the chart.<\/li>\r\n<\/ul>\r\nNote: <em>A basic knowledge of HTML, JavaScript,\u00a0<\/em>and<em> Node.js would be helpful.<\/em>\r\n<h3><span class=\"ez-toc-section\" id=\"Part_1\"><\/span>Part 1<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<strong>1. Socket.IO:<\/strong>\u00a0Socket.IO will work with a web server that we\u2019ll build using Express.\r\nTo start developing with Socket.IO, you need to install Node and npm (node package manager).\r\nOpen your terminal and enter the following commands to create a new folder:\r\n<code>mkdir test-project<\/code>\r\n\r\nNavigate to the project folder (<code>cd test-project<\/code>) and type the following command in the terminal:\r\n<code>npm init<\/code>\r\n\r\nIt will ask you some questions about your project; answer them accordingly.\r\n\r\nThis will create a <code>package.json<\/code> configuration file. Now, we need to install Express and Socket.IO. To install these and save them to the <code>package.json<\/code> file, enter the following command in your terminal, into the project directory:\r\n<code>npm install --save express socket.io<\/code>\r\n\r\n<strong>2. PubNub:<\/strong> For creating a real-time chart, we will fetch data from PubNub. Install PubNub via npm, using the command given below:\r\n<code>npm install --save pubnub<\/code>\r\n\r\n<strong>3. FusionCharts:<\/strong> Now it&#8217;s time to install FusionCharts using the following command:\r\n<code>npm install --save fusioncharts<\/code>\r\n\r\n<strong>4. Webpack:<\/strong> Currently, the FusionCharts library is not ES6 compatible, so we will use webpack to bundle the file. So first, we will install the webpack using the following command:\r\n<code>npm install --save webpack<\/code>\r\n\r\nTo fulfill our motive behind using the webpack, we add the line shown below in our package.json inside the scripts:\r\n<code>\"bundle\": \"webpack src\/src.js dist\/bundle.js\"<\/code>\r\n\r\nThe above line will bundle the JS file present inside the <code>src<\/code> folder and create a <code>bundle.js<\/code> file inside the dist folder.\r\n\r\nNow, make sure that the code inside package.json looks like the code shown below:\r\n<pre class=\"lang:js decode:true\">{\r\n  \"name\": \"socket.io_sample\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"index.js\",\r\n  \"scripts\": {\r\n    \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\",\r\n    \"bundle\": \"webpack src\/src.js dist\/bundle.js\"\r\n  },\r\n  \"author\": \"FusionCharts\",\r\n  \"license\": \"ISC\",\r\n  \"dependencies\": {\r\n    \"express\": \"^4.16.2\",\r\n    \"fusioncharts\": \"^3.12.2\",\r\n    \"pubnub\": \"^4.20.0\",\r\n    \"socket.io\": \"^2.0.4\",\r\n    \"webpack\": \"^3.10.0\"\r\n  }\r\n}\r\n<\/pre>\r\nThe installation part of creating real-time charts using Socket.IO ends here.\r\n<h3><span class=\"ez-toc-section\" id=\"Part_2\"><\/span>Part 2<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nNow, create a file called <code>app.js<\/code> and enter the following code to set up an Express application along with Socket.IO:\r\n<pre class=\"lang:js decode:true\">var express = require('express');\r\nvar app = require('express')();\r\nvar http = require('http').Server(app);\r\n\/\/creates a new socket.io instance attached to the http server.\r\nvar io = require('socket.io')(http);\r\n\/\/Include PubNub JavaScript SDK\r\nvar PubNub = require('pubnub');\r\n\r\n\/\/Provide the absolute path to the dist directory.\r\napp.use(express.static('path\/to\/dist_folder'));\r\n\r\n\/\/On get request send 'index.html' page as a response.\r\napp.get('\/', function(req, res) {\r\n   res.sendfile('index.html');\r\n});\r\n\r\n\/\/Whenever someone connects, this gets executed\r\n\r\nio.on('connection', function (socket) {\r\n\tvar strData;\r\n\/\/Instantiate a new Pubnub instance along with the subscribeKey \r\n\tpubnub = new PubNub({\r\n        subscribeKey : 'sub-c-4377ab04-f100-11e3-bffd-02ee2ddab7fe'\r\n    })\r\n    \/\/adding listener to pubnub\r\n    pubnub.addListener({\r\n        message: function(message) {\r\n\/*checking whether the message contains data for the \u2018Apple\u2019 category or not.*\/\r\n        \tif(message.message.symbol=='Apple'){\r\n                        \/*Creates a new date object from the specified message.timestamp.*\/ \r\n        \t\tvar x = new Date(message.message.timestamp);\r\n\/\/Converting the timestamp into a desired format. HH:MM:SS:MS\r\n\t\tvar formatted =  (x.getHours()) + ':' + (x.getMinutes()) + ':' + (x.getSeconds()) + ':' + (x.getMilliseconds());\r\n                       \/*Here we are creating an object which will contain a timestamp as label and the \u2018order_quantity\u2019 as value.*\/\r\n        \t\tstrData = {\"label\": formatted,\r\n\t\t\t\t\t\t   \"value\":message.message.order_quantity\r\n\t\t\t\t\t\t}\r\n                                               \/\/sending data to the client\r\n\t\t\t\tsocket.emit('news', strData);\r\n        \t};  \r\n        }\r\n    })      \r\n    console.log(\"Subscribing..\");\r\n\/\/Subscribe the PubNub channel\r\n    pubnub.subscribe({\r\n        channels: ['pubnub-market-orders'] \r\n    });\r\n});\r\n\/\/server listening on port 3000\r\nhttp.listen(3000, function() {\r\n   console.log('listening on *:3000');\r\n});\r\n<\/pre>\r\n(The tutorial uses <a href=\"https:\/\/www.pubnub.com\/developers\/realtime-data-streams\/financial-securities-market-orders\/\">data from PubNub<\/a> to illustrate real-time market orders. Click <a href=\"https:\/\/www.pubnub.com\/docs\/nodejs-javascript\/pubnub-javascript-sdk\">here<\/a> to learn how you can use PubNub with Node.js.)\r\n\r\nWe need an <code>index.html<\/code> file to serve. Create a new file called <code>index.html<\/code> and enter the following code in it:\r\n<pre class=\"lang:js decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n   &lt;head&gt;\r\n      &lt;title&gt;Hello world&lt;\/title&gt;\r\n      &lt;script src=\"\/socket.io\/socket.io.js\"&gt;&lt;\/script&gt;\r\n   &lt;\/head&gt;\r\n\t\r\n   &lt;body&gt;\r\n   \t\t&lt;div id=\"chart-container\"&gt;FusionCharts will render here&lt;\/div&gt;\r\n        &lt;script src=\"bundle.js\"&gt;&lt;\/script&gt;\r\n   &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\r\nAs you can see in the above code, apart from <code>socket.io.js<\/code> we have included another file named <code>bundle.js<\/code>.\r\n\r\nWe also need one more js file to make sure that the HTML file doesn\u2019t become bulky &#8211; so we have created a file named <code>src.js<\/code>.\r\n\r\nUsing webpack, we have bundled that <code>src.js<\/code> file with the following command:\r\n<code>npm run bundle<\/code>\r\n\r\nThis results in the <code>bundle.js<\/code> file inside a dist folder.\r\n\r\nThe above process is required to render FusionChart using Node.JS.\r\n\r\nBelow is the code written inside the <code>src.js<\/code> file:\r\n<pre class=\"lang:js decode:true\">var FusionCharts = require(\"fusioncharts\");\r\nrequire(\"fusioncharts\/fusioncharts.charts\")(FusionCharts);\r\nrequire(\"fusioncharts\/fusioncharts.widgets\")(FusionCharts);\r\n\r\n  var socket = io('https:\/\/localhost:3000\/');\r\n    \tvar transactionChart = new FusionCharts({\r\n    \t\tid: \"mychart\",\r\n\t        type: 'realtimecolumn',\r\n\t        width: '700',\r\n\t        height: '350',\r\n\t        dataFormat: 'json',\r\n\t        dataSource: {\r\n\t            \"chart\": {\r\n    \t         \"caption\": \"Market Orders for Apple\",\r\n                    \"subCaption\": \"Harry Supermarket\",\r\n                    \"yaxismaxvalue\": \"10\",\r\n                    \"numdisplaysets\": \"10\",\r\n                    \"yAxisName\":\"Quantity\",\r\n                    \"labeldisplay\": \"rotate\",\r\n                    \"showLegend\":\"0\",\r\n                    \"showValues\": \"0\",\r\n                    \"numbersuffix\": \"Kg\",\r\n                    \"showlabels\": \"1\",\r\n\/*This parameter lets you set whether you want the latest value (received from server) to be displayed on the chart or not*\/\r\n                    \"showRealTimeValue\": \"0\",\r\n\/*For this parameter, you can specify the number of seconds after which the chart will look for new data. This process will happen continuously - i.e., if you specify 5 seconds here, the chart will look for new data every 5 seconds*\/\r\n                     \"refreshInterval\":\".1\",\r\n\/*If you want the chart to keep polling for new data every x seconds and queue it, you can specify that x seconds as updateInterval. This helps you poll at different intervals and then draw at another interval (specified as refreshInterval)*\/\r\n                    \"updateInterval\":\".1\",\r\n                    \"yAxisNamePadding\":\"10\",\r\n                    \/\/Cosmetics\r\n                    \"paletteColors\" : \"#0075c2,#1aaf5d\",\r\n                    \"baseFontColor\" : \"#333333\",\r\n                    \"baseFont\" : \"Helvetica Neue,Arial\",\r\n                    \"captionFontSize\" : \"14\",\r\n                    \"subcaptionFontSize\" : \"14\",\r\n                    \"subcaptionFontBold\" : \"0\",\r\n                    \"showBorder\" : \"0\",\r\n                    \"bgColor\" : \"#ffffff\",\r\n                    \"showShadow\" : \"0\",\r\n                    \"canvasBgColor\" : \"#ffffff\",\r\n                    \"canvasBorderAlpha\" : \"0\",\r\n                    \"divlineAlpha\" : \"100\",\r\n                    \"divlineColor\" : \"#999999\",\r\n                    \"divlineThickness\" : \"1\",\r\n                    \"divLineIsDashed\" : \"1\",\r\n                    \"divLineDashLen\" : \"1\",\r\n                    \"divLineGapLen\" : \"1\",\r\n                    \"usePlotGradientColor\" : \"0\",\r\n                    \"showplotborder\" : \"0\",\r\n                    \"valueFontColor\" : \"#ffffff\",\r\n                    \"placeValuesInside\" : \"1\",\r\n                    \"rotateValues\" : \"1\",\r\n                    \"showXAxisLine\" : \"1\",\r\n                    \"xAxisLineThickness\" : \"1\",\r\n                    \"xAxisLineColor\" : \"#999999\",\r\n                    \"showAlternateHGridColor\" : \"0\",\r\n                    \"legendBgAlpha\" : \"0\",\r\n                    \"legendBorderAlpha\" : \"0\",\r\n                    \"legendShadow\" : \"0\",\r\n                    \"legendItemFontSize\" : \"10\",\r\n                    \"legendItemFontColor\" : \"#666666\"\r\n    \t            },\r\n\t            \"categories\": [\r\n\t                {\r\n\t                    \"category\": [\r\n\t                        { \"label\": \"Start\" }\r\n\t                    ]\r\n\t                }\r\n\t            ],\r\n\t            \"dataset\": [ \r\n\t                {\r\n\t                    \"seriesname\": \"\",\r\n\t                    \"alpha\": \"100\",\r\n\t                    \"data\": [\r\n\t                        { \"value\": \"3\" }\r\n\t                    ]\r\n\t                }\r\n\t            ]      \r\n\t        }\r\n    \t}).render(\"chart-container\");\r\n\/\/On connection with socket, will start receiving the data\r\n\t  socket.on('news', function (data) {\r\n\t    function updateData() {\r\n                         \/\/Converting the fetched data in FusionCharts format\r\n\t    \tvar strData = \"&amp;label=\" + data.label + \"&amp;value=\" + data.value;\r\n                        \/\/feeding the data to the real time chart\r\n\t    \tFusionCharts.items.mychart.feedData(strData);\r\n\t    }\r\n\t    \/\/calling the update method\r\n\t    updateData();\r\n\r\n\t });\r\n<\/pre>\r\nThe coding part of the process ends here.\r\n<h3><span class=\"ez-toc-section\" id=\"Part_3\"><\/span>Part 3<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nNow we will start our server using the following command:\r\n<code>node app.js<\/code>\r\n\r\nNow, check the URL <a href=\"https:\/\/localhost:3000\/\">https:\/\/localhost:3000\/<\/a>. A beautiful real-time chart will be rendered on the screen, as shown below:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/02\/socket-io-fusioncharts-output.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16810\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/02\/socket-io-fusioncharts-output.png\" alt=\"\" width=\"1262\" height=\"644\" srcset=\"\/blog\/wp-content\/uploads\/2018\/02\/socket-io-fusioncharts-output.png 1262w, \/blog\/wp-content\/uploads\/2018\/02\/socket-io-fusioncharts-output-150x77.png 150w\" sizes=\"auto, (max-width: 1262px) 100vw, 1262px\" \/><\/a>\r\n\r\n<span style=\"font-weight: 400\">A real-time chart adds a lot of value to your website\/ app because the user can have the latest data without performing any action or refreshing the page. This improves the user experience and promotes brand loyalty.<\/span>\r\n\r\nIf you find any errors in your code or have trouble executing the above sample, <a href=\"https:\/\/www.dropbox.com\/s\/0npc0xf42fsm7nc\/socket.io_sample.zip?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">click here<\/a> to download the complete source code of the sample project we have created for this tutorial.","protected":false},"excerpt":{"rendered":"<p>We live in a world where experiences are defined by the &#8216;right here, right now.&#8217; As a result, our initial reaction to any event is, &#8220;Are we getting this in real-time? &#8220;From wildfires raging across California to Keisha&#8217;s stellar Grammy performance or your next Facebook update,&#8217; real-time&#8217; command value is unrivaled.&#8221; Real-time data is information [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16815,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675,653],"class_list":["post-16809","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to visualize real time data<\/title>\n<meta name=\"description\" content=\"Visualize data as it happens. Learn to fetch and display real-time streaming data using the Socket.IO framework and modern 2026 JavaScript techniques.\" \/>\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\/visualize-real-time-data-socket-io-charts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to visualize real time data\" \/>\n<meta property=\"og:description\" content=\"Visualize data as it happens. Learn to fetch and display real-time streaming data using the Socket.IO framework and modern 2026 JavaScript techniques.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-14T08:18:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:12:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/02\/How-to-create-charts-with-Socket.io-and-FusionCharts1.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=\"Jonathan, Prerana Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan, Prerana Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 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\/visualize-real-time-data-socket-io-charts\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Jonathan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\"\n\t            },\n\t            \"headline\": \"How to Visualize Real-Time Data: 2026 Streaming Tips\",\n\t            \"datePublished\": \"2018-02-14T08:18:59+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:12:21+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/\"\n\t            },\n\t            \"wordCount\": 1045,\n\t            \"commentCount\": 0,\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\/visualize-real-time-data-socket-io-charts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2018\/02\/How-to-create-charts-with-Socket.io-and-FusionCharts1.png\",\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\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\/visualize-real-time-data-socket-io-charts\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/\",\n\t            \"name\": \"How to visualize real time data\",\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\/visualize-real-time-data-socket-io-charts\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2018\/02\/How-to-create-charts-with-Socket.io-and-FusionCharts1.png\",\n\t            \"datePublished\": \"2018-02-14T08:18:59+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:12:21+00:00\",\n\t            \"description\": \"Visualize data as it happens. Learn to fetch and display real-time streaming data using the Socket.IO framework and modern 2026 JavaScript techniques.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#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\/visualize-real-time-data-socket-io-charts\/\"\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\/visualize-real-time-data-socket-io-charts\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2018\/02\/How-to-create-charts-with-Socket.io-and-FusionCharts1.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2018\/02\/How-to-create-charts-with-Socket.io-and-FusionCharts1.png\",\n\t            \"width\": 2016,\n\t            \"height\": 750,\n\t            \"caption\": \"visualize real time data with Socket.io\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#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\": \"How to Visualize Real-Time Data: 2026 Streaming Tips\"\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\/14fbfb07e81bfbcd524a4202f34bdcbb\",\n\t            \"name\": \"Jonathan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"caption\": \"Jonathan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to visualize real time data","description":"Visualize data as it happens. Learn to fetch and display real-time streaming data using the Socket.IO framework and modern 2026 JavaScript techniques.","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\/visualize-real-time-data-socket-io-charts\/","og_locale":"en_US","og_type":"article","og_title":"How to visualize real time data","og_description":"Visualize data as it happens. Learn to fetch and display real-time streaming data using the Socket.IO framework and modern 2026 JavaScript techniques.","og_url":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2018-02-14T08:18:59+00:00","article_modified_time":"2026-01-20T09:12:21+00:00","og_image":[{"width":2016,"height":750,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/02\/How-to-create-charts-with-Socket.io-and-FusionCharts1.png","type":"image\/png"}],"author":"Jonathan, Prerana Singh","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Prerana Singh","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"How to Visualize Real-Time Data: 2026 Streaming Tips","datePublished":"2018-02-14T08:18:59+00:00","dateModified":"2026-01-20T09:12:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/"},"wordCount":1045,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2018\/02\/How-to-create-charts-with-Socket.io-and-FusionCharts1.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/","url":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/","name":"How to visualize real time data","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2018\/02\/How-to-create-charts-with-Socket.io-and-FusionCharts1.png","datePublished":"2018-02-14T08:18:59+00:00","dateModified":"2026-01-20T09:12:21+00:00","description":"Visualize data as it happens. Learn to fetch and display real-time streaming data using the Socket.IO framework and modern 2026 JavaScript techniques.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2018\/02\/How-to-create-charts-with-Socket.io-and-FusionCharts1.png","contentUrl":"\/blog\/wp-content\/uploads\/2018\/02\/How-to-create-charts-with-Socket.io-and-FusionCharts1.png","width":2016,"height":750,"caption":"visualize real time data with Socket.io"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/visualize-real-time-data-socket-io-charts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Visualize Real-Time Data: 2026 Streaming Tips"}]},{"@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\/14fbfb07e81bfbcd524a4202f34bdcbb","name":"Jonathan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","caption":"Jonathan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16809","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\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16809"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16809\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16815"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16809"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}