{"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":"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:\r\n<ul>\r\n \t<li>JSON storage, which eliminates the barrier between objects and data<\/li>\r\n \t<li>Multi-database support<\/li>\r\n \t<li>Minimal requirements for setup<\/li>\r\n \t<li>Simplified app state serialization<\/li>\r\n \t<li>Accessible data, files, authorizations, and more<\/li>\r\n \t<li>Potential to increase storage size significantly<\/li>\r\n<\/ul>\r\nIn 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.\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\/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>\r\nBefore we start, we need to set up the following dependencies:\r\n\r\nFusionCharts Core JS Files [<a href=\"https:\/\/www.fusioncharts.com\/download\/\">Download Link<\/a>]\r\nFirebase Realtime Database\r\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>\r\nGiven 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:\r\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>\r\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>\r\n<strong>Step 1<\/strong>\r\n\r\nTo 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.\r\n\r\nGiven below is the code to do this, that will go in our HTML file:\r\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>\r\n<strong>Step 2<\/strong>\r\n\r\nNow 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.\r\n\r\nGiven below is the code to initialize and connect to our Firebase app:\r\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>\r\nHere, 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.\r\n\r\n<strong>NOTE<\/strong>: You can get these config details from the project overview page in the Firebase console.\r\n\r\n<strong>Step 3<\/strong>\r\n\r\nNext, we will include the <code>app.js<\/code> JavaScript file in our HTML file, after we have included the dependencies for Firebase.\r\n\r\nGiven below is the code to do this, that will go in our HTML file:\r\n<pre class=\"lang:markup decode:true \">&lt;script src=\"path\/to\/app.js\"&gt;&lt;\/script&gt;<\/pre>\r\n<strong>Step 4<\/strong>\r\n\r\nNow, we\u2019ll need a database that will store the chart data for this tutorial.\r\n\r\nWe have already created a dummy database that we will be using for this tutorial. Here\u2019s the JSON structure for the same:\r\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>\r\n\r\nTo 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.\r\n\r\nGiven below are the rules that we will be using for this tutorial:\r\n<pre class=\"lang:json decode:true \">{\r\n    \"rules\": {\r\n        \".read\": true,\r\n        \".write\": \"auth != null\"\r\n    }\r\n}<\/pre>\r\nYou 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.\r\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>\r\n<strong>Step 1<\/strong>\r\n\r\nOnce we have initialized Firebase, we will reference the data from our database by creating a function that will take a snapshot of the data.\r\n\r\nCreate a function, <code>getData<\/code>, and add the following code to the function:\r\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>\r\n<strong>Step 2<\/strong>\r\n\r\nTake a snapshot of the data in the database and form a JSON array that we&#8217;ll use as the datasource for our chart.\r\n\r\nGiven below is the code to do this:\r\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>\r\nAfter the above code is executes successfully, the <code>cdata<\/code> variable will hold the JSON array, which contains the chart data.\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 gets rendered within a unique HTML container. We will use the &lt;div&gt; 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 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>\r\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>\r\nNow 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.\r\n\r\nGiven below is the code we will be using to create the chart instance:\r\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>\r\nNow, we will call the <code>render()<\/code> method for our chart instance to render the chart, as given below:\r\n<pre class=\"lang:javascript decode:true \">firebaseChart.render();<\/pre>\r\nIf you have followed the above steps correctly, your output should look as shown in the image below:\r\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>\r\n\r\nIf 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>.\r\n&lt;!&#8211;\r\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;","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>Creating Dynamic JavaScript Charts With Firebase<\/title>\n<meta name=\"description\" content=\"Follow our 2026 step-by-step guide to create dynamic charts by fetching data directly from the Firebase Realtime Database for all your web apps today.\" \/>\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=\"Creating Dynamic JavaScript Charts With Firebase\" \/>\n<meta property=\"og:description\" content=\"Follow our 2026 step-by-step guide to create dynamic charts by fetching data directly from the Firebase Realtime Database for all your web apps today.\" \/>\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\": \"Creating Dynamic JavaScript Charts With Firebase\",\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\": \"Follow our 2026 step-by-step guide to create dynamic charts by fetching data directly from the Firebase Realtime Database for all your web apps today.\",\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":"Creating Dynamic JavaScript Charts With Firebase","description":"Follow our 2026 step-by-step guide to create dynamic charts by fetching data directly from the Firebase Realtime Database for all your web apps today.","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":"Creating Dynamic JavaScript Charts With Firebase","og_description":"Follow our 2026 step-by-step guide to create dynamic charts by fetching data directly from the Firebase Realtime Database for all your web apps today.","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":"Creating Dynamic JavaScript Charts With Firebase","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":"Follow our 2026 step-by-step guide to create dynamic charts by fetching data directly from the Firebase Realtime Database for all your web apps today.","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}]}}