Table of Contents
fusioncharts.js
and fusioncharts.charts.js
, downloaded as part of the FusionCharts package, in the HTML file: <html> <head> <!-- including FusionCharts core package JS files --> <script src="path/to/fusioncharts.js"></script> <script src="path/to/fusioncharts.charts.js"></script> </head> </html>
firebase-app.js
and firebase-database.js
files in our HTML file. Given below is the code to do this, that will go in our HTML file: <!-- including Firebase --> <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-database.js"></script>Step 2 Now that we have included all the dependencies needed for our tutorial, we will create a local JavaScript file,
app.js
, that we will use to initialize Firebase. Given below is the code to initialize and connect to our Firebase app: // Initialize Firebase var config = { apiKey: "AIzaSyCUGTrY5OD1uBupNIHvCRxEO1NKYVlPtDM", authDomain: "fusioncharts-demo.firebaseapp.com", databaseURL: "https://fusioncharts-demo.firebaseio.com", projectId: "fusioncharts-demo", storageBucket: "fusioncharts-demo.appspot.com", messagingSenderId: "728123238984" }; firebase.initializeApp(config);Here, the
config
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. NOTE: You can get these config details from the project overview page in the Firebase console. Step 3 Next, we will include the app.js
JavaScript file in our HTML file, after we have included the dependencies for Firebase. Given below is the code to do this, that will go in our HTML file: <script src="path/to/app.js"></script>Step 4 Now, we’ll need a database that will store the chart data for this tutorial. We have already created a dummy database that we will be using for this tutorial. Here’s the JSON structure for the same:
{ "rules": { ".read": true, ".write": "auth != null" } }You can refer to this link to know more about security and rules for Firebase Realtime Database.
getData
, and add the following code to the function: function getData(callbackIN) { var ref = firebase.database().ref("data"); ref.once('value').then(function (snapshot) { callbackIN(snapshot.val()) }); }Step 2 Take a snapshot of the data in the database and form a JSON array that we’ll use as the datasource for our chart. Given below is the code to do this:
window.addEventListener("load", getData(genFunction)); function genFunction(data) { var cdata = []; var len = data.length; for(var i=1; i<len; i++) { cdata.push({ label: data[i]['label'], value: data[i]['value'] }); }After the above code is executes successfully, the
cdata
variable will hold the JSON array, which contains the chart data. <body> <!-- chart container --> <div id="chart-container"></div> </body>
var firebaseChart = new FusionCharts({ type: 'area2d', renderAt: 'chart-container', width: '650', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": "Website Visitors Trend", "subCaption": "Last 7 Days{br}ACME Inc.", "subCaptionFontBold": "0", "captionFontSize": "20", "subCaptionFontSize": "17", "captionPadding": "15", "captionFontColor": "#8C8C8C", "baseFontSize": "14", "baseFont": "Barlow", "canvasBgAlpha": "0", "bgColor": "#FFFFFF", "bgAlpha": "100", "showBorder": "0", "showCanvasBorder": "0", "showPlotBorder": "0", "showAlternateHGridColor": "0", "usePlotGradientColor": "0", "paletteColors": "#6AC1A5", "showValues": "0", "divLineAlpha": "5", "showAxisLines": "1", "drawAnchors": "0", "xAxisLineColor": "#8C8C8C", "xAxisLineThickness": "0.7", "xAxisLineAlpha": "50", "yAxisLineColor": "#8C8C8C", "yAxisLineThickness": "0.7", "yAxisLineAlpha": "50", "baseFontColor": "#8C8C8C", "toolTipBgColor": "#FA8D67", "toolTipPadding": "10", "toolTipColor": "#FFFFFF", "toolTipBorderRadius": "3", "toolTipBorderAlpha": "0", "drawCrossLine": "1", "crossLineColor": "#8C8C8C", "crossLineAlpha": "60", "crossLineThickness": "0.7", "alignCaptionWithCanvas": "1" }, "data": cdata } });Now, we will call the
render()
method for our chart instance to render the chart, as given below: firebaseChart.render();If you have followed the above steps correctly, your output should look as shown in the image below:
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…
View Comments
Hi
What should i do, if i have to make this graph live! like without page load i want to update the graph on every child added
regards
Ayub Jamal