{"id":16542,"date":"2017-11-24T20:15:36","date_gmt":"2017-11-24T14:45:36","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16542"},"modified":"2026-01-20T14:37:40","modified_gmt":"2026-01-20T09:07:40","slug":"create-dynamic-javascript-charts-firebase","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/","title":{"rendered":"Creating Dynamic JavaScript Charts with Firebase 2026"},"content":{"rendered":"<p>Backend-as-a-Service\u2014BaaS\u2014is a mobile-based backend service that lets web and mobile application developers link their applications to the backend cloud storage. Firebase, a provider of BaaS, allows developers to create delightful user experiences by simplifying management\u2014the developers don\u2019t need to focus on managing the servers. Firebase becomes the server, the datastore, as well the API, all of which is designed generically and customized to requirement. Other advantages of Firebase include:<\/p>\n<ul>\n<li>JSON storage, which eliminates the barrier between objects and data<\/li>\n<li>Multi-database support<\/li>\n<li>Minimal requirements for setup<\/li>\n<li>Simplified app state serialization<\/li>\n<li>Accessible data, files, authorizations, and more<\/li>\n<li>Potential to increase storage size significantly<\/li>\n<\/ul>\n<p>In this tutorial, we\u2019ll discuss the process for creating dynamic charts by fetching data from Firebase Realtime Database. For this, we will be using FusionCharts, a JavaScript-based charting library.<\/p>\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\/create-dynamic-javascript-charts-firebase\/#Including_Dependencies\" title=\"Including Dependencies\">Including 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\/create-dynamic-javascript-charts-firebase\/#Including_the_FusionCharts_Core_Package_JS_Files\" title=\"Including the FusionCharts Core Package JS Files\">Including the FusionCharts Core Package JS Files<\/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\/create-dynamic-javascript-charts-firebase\/#Including_and_Initializing_Firebase_Realtime_Database\" title=\"Including and Initializing Firebase Realtime Database\">Including and Initializing Firebase Realtime Database<\/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\/create-dynamic-javascript-charts-firebase\/#Fetching_and_Forming_JSON_Data\" title=\"Fetching and Forming JSON Data\">Fetching and Forming 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\/create-dynamic-javascript-charts-firebase\/#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-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#Creating_the_Chart_Instance_and_Rendering_the_Chart\" title=\"Creating the Chart Instance and Rendering the Chart\">Creating the Chart Instance and Rendering the Chart<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Including_Dependencies\"><\/span>Including Dependencies<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we start, we need to set up the following dependencies:<\/p>\n<p>FusionCharts Core JS Files [<a href=\"https:\/\/www.fusioncharts.com\/download\/\">Download Link<\/a>]<br \/>\nFirebase Realtime Database<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Including_the_FusionCharts_Core_Package_JS_Files\"><\/span>Including the FusionCharts Core Package JS Files<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Given below is the code to include the core JS files, <code>fusioncharts.js<\/code> and <code>fusioncharts.charts.js<\/code>, downloaded as part of the FusionCharts package, in the HTML file:<\/p>\n<pre class=\"lang:markup decode:true \">&lt;html&gt;\r\n    &lt;head&gt;\r\n        &lt;!-- including FusionCharts core package JS files --&gt; \r\n        &lt;script src=\"path\/to\/fusioncharts.js\"&gt;&lt;\/script&gt;\r\n        &lt;script src=\"path\/to\/fusioncharts.charts.js\"&gt;&lt;\/script&gt;\r\n    &lt;\/head&gt;\r\n&lt;\/html&gt;<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Including_and_Initializing_Firebase_Realtime_Database\"><\/span>Including and Initializing Firebase Realtime Database<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Step 1<\/strong><\/p>\n<p>To use Firebase and its real-time database, we need to first include the <code>firebase-app.js<\/code> and <code>firebase-database.js<\/code> files in our HTML file.<\/p>\n<p>Given below is the code to do this, that will go in our HTML file:<\/p>\n<pre class=\"lang:markup decode:true \">&lt;!-- including Firebase --&gt;\r\n&lt;script src=\"https:\/\/www.gstatic.com\/firebasejs\/4.6.2\/firebase-app.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/www.gstatic.com\/firebasejs\/4.6.2\/firebase-database.js\"&gt;&lt;\/script&gt;<\/pre>\n<p><strong>Step 2<\/strong><\/p>\n<p>Now that we have included all the dependencies needed for our tutorial, we will create a local JavaScript file, <code>app.js<\/code>, that we will use to initialize Firebase.<\/p>\n<p>Given below is the code to initialize and connect to our Firebase app:<\/p>\n<pre class=\"lang:javascript decode:true \">\/\/ Initialize Firebase\r\nvar config = {\r\n    apiKey: \"AIzaSyCUGTrY5OD1uBupNIHvCRxEO1NKYVlPtDM\",\r\n    authDomain: \"fusioncharts-demo.firebaseapp.com\",\r\n    databaseURL: \"https:\/\/fusioncharts-demo.firebaseio.com\",\r\n    projectId: \"fusioncharts-demo\",\r\n    storageBucket: \"fusioncharts-demo.appspot.com\",\r\n    messagingSenderId: \"728123238984\"\r\n};\r\n\r\nfirebase.initializeApp(config);<\/pre>\n<p>Here, the <code>config<\/code> object includes details like the API key, the app domain URI, the app database URI, and the project ID that will be needed to establish a connection with our Firebase Realtime Database.<\/p>\n<p><strong>NOTE<\/strong>: You can get these config details from the project overview page in the Firebase console.<\/p>\n<p><strong>Step 3<\/strong><\/p>\n<p>Next, we will include the <code>app.js<\/code> JavaScript file in our HTML file, after we have included the dependencies for Firebase.<\/p>\n<p>Given below is the code to do this, that will go in our HTML file:<\/p>\n<pre class=\"lang:markup decode:true \">&lt;script src=\"path\/to\/app.js\"&gt;&lt;\/script&gt;<\/pre>\n<p><strong>Step 4<\/strong><\/p>\n<p>Now, we\u2019ll need a database that will store the chart data for this tutorial.<\/p>\n<p>We have already created a dummy database that we will be using for this tutorial. Here\u2019s the JSON structure for the same:<br \/>\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-firebase-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16543\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-firebase-1.png\" alt=\"\" width=\"1486\" height=\"1164\" srcset=\"\/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-firebase-1.png 1486w, \/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-firebase-1-150x117.png 150w\" sizes=\"auto, (max-width: 1486px) 100vw, 1486px\" \/><\/a><\/p>\n<p>To access the data from our Firebase Realtime Database, we need to make sure that our HTML page\/website is allowed to read data. To do this, we will modify the default database rules from our Firebase project\u2019s console.<\/p>\n<p>Given below are the rules that we will be using for this tutorial:<\/p>\n<pre class=\"lang:json decode:true \">{\r\n    \"rules\": {\r\n        \".read\": true,\r\n        \".write\": \"auth != null\"\r\n    }\r\n}<\/pre>\n<p>You can refer to this <a href=\"https:\/\/firebase.google.com\/docs\/database\/security\/\">link<\/a> to know more about security and rules for Firebase Realtime Database.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fetching_and_Forming_JSON_Data\"><\/span>Fetching and Forming JSON Data<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Step 1<\/strong><\/p>\n<p>Once we have initialized Firebase, we will reference the data from our database by creating a function that will take a snapshot of the data.<\/p>\n<p>Create a function, <code>getData<\/code>, and add the following code to the function:<\/p>\n<pre class=\"lang:javascript decode:true \">function getData(callbackIN) {\r\n    var ref = firebase.database().ref(\"data\");\r\n        ref.once('value').then(function (snapshot) {\r\n        callbackIN(snapshot.val())\r\n    });\r\n}<\/pre>\n<p><strong>Step 2<\/strong><\/p>\n<p>Take a snapshot of the data in the database and form a JSON array that we&#8217;ll use as the datasource for our chart.<\/p>\n<p>Given below is the code to do this:<\/p>\n<pre class=\"lang:javascript decode:true \">window.addEventListener(\"load\", getData(genFunction));\r\n\r\nfunction genFunction(data) {\r\n    var cdata = [];\r\n    var len = data.length;\r\n    for(var i=1; i&lt;len; i++) {\r\n        cdata.push({\r\n        label: data[i]['label'],\r\n        value: data[i]['value']\r\n    });\r\n}<\/pre>\n<p>After the above code is executes successfully, the <code>cdata<\/code> variable will hold the JSON array, which contains the chart data.<\/p>\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>\n<p>Every chart displayed on a web page gets rendered within a unique HTML container. We will use the &lt;div&gt; element for creating the HTML container for our chart.<\/p>\n<p>Given below is the code for creating the chart container:<\/p>\n<pre class=\"lang:markup decode:true\">&lt;body&gt;\r\n    &lt;!-- chart container --&gt;\r\n    &lt;div id=\"chart-container\"&gt;&lt;\/div&gt;\r\n&lt;\/body&gt;<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_Chart_Instance_and_Rendering_the_Chart\"><\/span>Creating the Chart Instance and Rendering the Chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now that we have the JSON data and the chart container in place, we will create the FusionCharts instance. Details needed to render the chart, like the chart type, the chart ID, chart dimensions, the HTML container ID, and so on, will be passed to this chart instance.<\/p>\n<p>Given below is the code we will be using to create the chart instance:<\/p>\n<pre class=\"lang:javascript decode:true\">var firebaseChart = new FusionCharts({\r\n    type: 'area2d',\r\n    renderAt: 'chart-container',\r\n    width: '650',\r\n    height: '400',\r\n    dataFormat: 'json',\r\n    dataSource: {\r\n    \"chart\": {\r\n        \"caption\": \"Website Visitors Trend\",\r\n        \"subCaption\": \"Last 7 Days{br}ACME Inc.\",\r\n        \"subCaptionFontBold\": \"0\",\r\n        \"captionFontSize\": \"20\",\r\n        \"subCaptionFontSize\": \"17\",\r\n        \"captionPadding\": \"15\",\r\n        \"captionFontColor\": \"#8C8C8C\",\r\n        \"baseFontSize\": \"14\",\r\n        \"baseFont\": \"Barlow\",\r\n        \"canvasBgAlpha\": \"0\",\r\n        \"bgColor\": \"#FFFFFF\",\r\n        \"bgAlpha\": \"100\",\r\n        \"showBorder\": \"0\",\r\n        \"showCanvasBorder\": \"0\",\r\n        \"showPlotBorder\": \"0\",\r\n        \"showAlternateHGridColor\": \"0\",\r\n        \"usePlotGradientColor\": \"0\",\r\n        \"paletteColors\": \"#6AC1A5\",\r\n        \"showValues\": \"0\",\r\n        \"divLineAlpha\": \"5\",\r\n        \"showAxisLines\": \"1\",\r\n        \"drawAnchors\": \"0\",\r\n        \"xAxisLineColor\": \"#8C8C8C\",\r\n        \"xAxisLineThickness\": \"0.7\",\r\n        \"xAxisLineAlpha\": \"50\",\r\n        \"yAxisLineColor\": \"#8C8C8C\",\r\n        \"yAxisLineThickness\": \"0.7\",\r\n        \"yAxisLineAlpha\": \"50\",\r\n        \"baseFontColor\": \"#8C8C8C\",\r\n        \"toolTipBgColor\": \"#FA8D67\",\r\n        \"toolTipPadding\": \"10\",\r\n        \"toolTipColor\": \"#FFFFFF\",\r\n        \"toolTipBorderRadius\": \"3\",\r\n        \"toolTipBorderAlpha\": \"0\",\r\n        \"drawCrossLine\": \"1\",\r\n        \"crossLineColor\": \"#8C8C8C\",\r\n        \"crossLineAlpha\": \"60\",\r\n        \"crossLineThickness\": \"0.7\",\r\n        \"alignCaptionWithCanvas\": \"1\"\r\n    },\r\n\r\n    \"data\": cdata\r\n    }\r\n});<\/pre>\n<p>Now, we will call the <code>render()<\/code> method for our chart instance to render the chart, as given below:<\/p>\n<pre class=\"lang:javascript decode:true \">firebaseChart.render();<\/pre>\n<p>If you have followed the above steps correctly, your output should look as shown in the image below:<br \/>\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-firebase-output.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16544\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-firebase-output.png\" alt=\"\" width=\"1412\" height=\"810\" srcset=\"\/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-firebase-output.png 1412w, \/blog\/wp-content\/uploads\/2017\/11\/fusioncharts-firebase-output-150x86.png 150w\" sizes=\"auto, (max-width: 1412px) 100vw, 1412px\" \/><\/a><\/p>\n<p>If you are having trouble rendering the chart, you can download the source code for this sample from the <a href=\"https:\/\/github.com\/fusioncharts\/blogpost-samples\/tree\/master\/firebase\">GitHub repo<\/a>.<br \/>\n&lt;!&#8211;<br \/>\n<a href=\"https:\/\/scotch.io\/@sikrigagan\/creating-dynamic-javascript-charts-with-firebase\" rel=\"noopener noreferrer\" target=\"_blank\"><em>The article first appeared here.<\/em><\/a>&#8211;&gt;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Backend-as-a-Service\u2014BaaS\u2014is a mobile-based backend service that lets web and mobile application developers link their applications to the backend cloud storage. Firebase, a provider of BaaS, allows developers to create delightful user experiences by simplifying management\u2014the developers don\u2019t need to focus on managing the servers. Firebase becomes the server, the datastore, as well the API, all [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16550,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675,688],"class_list":["post-16542","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>Dynamic JavaScript Charts with Firebase &amp; FusionCharts<\/title>\n<meta name=\"description\" content=\"Real-time dynamic charts in JavaScript using Firebase as the data source &amp; FusionCharts for rendering. Covers Realtime DB setup, listeners &amp; live updates.\" \/>\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\/create-dynamic-javascript-charts-firebase\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dynamic JavaScript Charts with Firebase &amp; FusionCharts\" \/>\n<meta property=\"og:description\" content=\"Real-time dynamic charts in JavaScript using Firebase as the data source &amp; FusionCharts for rendering. Covers Realtime DB setup, listeners &amp; live updates.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-24T14:45:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:07:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/Pasted-image-at-2017_11_20-04_19-PM-1-1.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, Gagan Sikri\" \/>\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, Gagan Sikri\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 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\/create-dynamic-javascript-charts-firebase\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/\"\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\": \"Creating Dynamic JavaScript Charts with Firebase 2026\",\n\t            \"datePublished\": \"2017-11-24T14:45:36+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:07:40+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/\"\n\t            },\n\t            \"wordCount\": 741,\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\/create-dynamic-javascript-charts-firebase\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/Pasted-image-at-2017_11_20-04_19-PM-1-1.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\/create-dynamic-javascript-charts-firebase\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/\",\n\t            \"name\": \"Dynamic JavaScript Charts with Firebase & FusionCharts\",\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\/create-dynamic-javascript-charts-firebase\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/Pasted-image-at-2017_11_20-04_19-PM-1-1.png\",\n\t            \"datePublished\": \"2017-11-24T14:45:36+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:07:40+00:00\",\n\t            \"description\": \"Real-time dynamic charts in JavaScript using Firebase as the data source & FusionCharts for rendering. Covers Realtime DB setup, listeners & live updates.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#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\/create-dynamic-javascript-charts-firebase\/\"\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\/create-dynamic-javascript-charts-firebase\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/11\/Pasted-image-at-2017_11_20-04_19-PM-1-1.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/Pasted-image-at-2017_11_20-04_19-PM-1-1.png\",\n\t            \"width\": 2016,\n\t            \"height\": 750,\n\t            \"caption\": \"create charts with Firebase FusionCharts\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#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\": \"Creating Dynamic JavaScript Charts with Firebase 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\/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":"Dynamic JavaScript Charts with Firebase & FusionCharts","description":"Real-time dynamic charts in JavaScript using Firebase as the data source & FusionCharts for rendering. Covers Realtime DB setup, listeners & live updates.","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\/create-dynamic-javascript-charts-firebase\/","og_locale":"en_US","og_type":"article","og_title":"Dynamic JavaScript Charts with Firebase & FusionCharts","og_description":"Real-time dynamic charts in JavaScript using Firebase as the data source & FusionCharts for rendering. Covers Realtime DB setup, listeners & live updates.","og_url":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-11-24T14:45:36+00:00","article_modified_time":"2026-01-20T09:07:40+00:00","og_image":[{"width":2016,"height":750,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/Pasted-image-at-2017_11_20-04_19-PM-1-1.png","type":"image\/png"}],"author":"Jonathan, Gagan Sikri","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Gagan Sikri","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"Creating Dynamic JavaScript Charts with Firebase 2026","datePublished":"2017-11-24T14:45:36+00:00","dateModified":"2026-01-20T09:07:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/"},"wordCount":741,"commentCount":2,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/11\/Pasted-image-at-2017_11_20-04_19-PM-1-1.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/","url":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/","name":"Dynamic JavaScript Charts with Firebase & FusionCharts","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/11\/Pasted-image-at-2017_11_20-04_19-PM-1-1.png","datePublished":"2017-11-24T14:45:36+00:00","dateModified":"2026-01-20T09:07:40+00:00","description":"Real-time dynamic charts in JavaScript using Firebase as the data source & FusionCharts for rendering. Covers Realtime DB setup, listeners & live updates.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/11\/Pasted-image-at-2017_11_20-04_19-PM-1-1.png","contentUrl":"\/blog\/wp-content\/uploads\/2017\/11\/Pasted-image-at-2017_11_20-04_19-PM-1-1.png","width":2016,"height":750,"caption":"create charts with Firebase FusionCharts"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/create-dynamic-javascript-charts-firebase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Dynamic JavaScript Charts with Firebase 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\/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\/16542","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=16542"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16542\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16550"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16542"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}