Displaying json data imported from Google Firebase in a webpage using Flask Server

Question

I have the following Python code that retrieves my saved json data in Google's Firebase.

from flask import Flask, render_template, json
from firebase import firebase




app = Flask(__name__)

@app.route('/')
def homepage():
    return render_template("main.html")


@app.route("/getData")
def getData():


    firebase = firebase.FirebaseApplication('https://my-firebase-db-958b1.firebaseio.com/', None)
    result = firebase.get('/Dublin-Ireland', None)
    print result
    print "\n"
    return result



if __name__ == "__main__":
    app.run()

The following is a sample of my json data stored in Firebase.

{"temperature": 
    {"-KoiWmZOUVfyK28p5Trf": 
        {"date": "10/07/2017", "time": "23:03:15", "value": 13}, 
    "-KoiWtBFzfBuLG9fvooE": 
        {"date": "10/07/2017", "time": "23:03:36", "value": 12},
    "-KoiWyErPjRXW61LDULf": 
        {"date": "10/07/2017", "time": "23:04:03", "value": 13}, 
    "-KoiX2Iu0jTK7NJGi86y": 
        {"date": "10/07/2017", "time": "23:04:24", "value": 13},
    "-KoiX7PFmqV9wiujEue5": 
        {"date": "10/07/2017", "time": "23:04:44", "value": 12},
    "-KoiXCe_iFl5VWIyaTp-": 
        {"date": "10/07/2017", "time": "23:05:05", "value": 20},
    "-KoiXEAw06xV58vuYwNe": 
        {"date": "10/07/2017", "time": "23:05:12", "value": 19},
    "-KoiXJDN82RRVAzxQXF8": 
        {"date": "10/07/2017", "time": "23:05:33", "value": 16},
    "-KoiXOHQmax8ywFmdi_i": 
        {"date": "10/07/2017", "time": "23:05:54", "value": 20},
    "-KoiXTKXqETu2QcysDqu": 
        {"date": "10/07/2017", "time": "23:06:14", "value": 10},
    "-KoiYzpYtbmmOD5FKHz_": 
        {"date": "10/07/2017", "time": "23:12:54", "value": 15},
    "-KoiZ9xbcCO75-uVt_wW": 
        {"date": "10/07/2017", "time": "23:13:39", "value": 11},
    "-KoiZF32ZjTGTWFi1amd": 
        {"date": "10/07/2017", "time": "23:14:00", "value": 10},
    "-KoiZJxbSjf5AANRjiU0": 
        {"date": "10/07/2017", "time": "23:14:20", "value": 13},
    "-KoiZYED510Clr8k2YKh": 
        {"date": "10/07/2017", "time": "23:15:19", "value": 11},
    "-KoiZk_q_xuNcrLGLh0z": 
        {"date": "10/07/2017", "time": "23:16:13", "value": 20},
    "-Koi_1zD7AUvd1r4YioA": 
        {"date": "10/07/2017", "time": "23:17:29", "value": 18}, 
    "-Koi_KKboiigBkXKFW9y": 
        {"date": "10/07/2017", "time": "23:18:44", "value": 15}
    }
}

I have another python code, running in a Raspberry Pi that sends a random temperature data to Firebase every 10 seconds. My ultimate aim is to be able to get that data and plot a graph using the Flask Server that I am running locally at the moment. Shouldn't this code just display the json data as printed in the terminal? What am I doing wrong?

score 1 · Accepted Answer · answered Jul 12 '17 at 13:59

Use following link to setup webpage in flask

Setup webpage in flask 1

Setup webpage in flask 2

After geting json data add html page and javascript in your flask server And try to use following code to display json in chart

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {

var data = {
 "temperature": {
  "-KoiWmZOUVfyK28p5Trf": {
   "date": "10/07/2017",
   "time": "23:03:15",
   "value": 13
  },
  "-KoiWtBFzfBuLG9fvooE": {
   "date": "10/07/2017",
   "time": "23:03:36",
   "value": 12
  },
  "-KoiWyErPjRXW61LDULf": {
   "date": "10/07/2017",
   "time": "23:04:03",
   "value": 13
  },
  "-KoiX2Iu0jTK7NJGi86y": {
   "date": "10/07/2017",
   "time": "23:04:24",
   "value": 13
  },
  "-KoiX7PFmqV9wiujEue5": {
   "date": "10/07/2017",
   "time": "23:04:44",
   "value": 12
  },
  "-KoiXCe_iFl5VWIyaTp-": {
   "date": "10/07/2017",
   "time": "23:05:05",
   "value": 20
  },
  "-KoiXEAw06xV58vuYwNe": {
   "date": "10/07/2017",
   "time": "23:05:12",
   "value": 19
  },
  "-KoiXJDN82RRVAzxQXF8": {
   "date": "10/07/2017",
   "time": "23:05:33",
   "value": 16
  },
  "-KoiXOHQmax8ywFmdi_i": {
   "date": "10/07/2017",
   "time": "23:05:54",
   "value": 20
  },
  "-KoiXTKXqETu2QcysDqu": {
   "date": "10/07/2017",
   "time": "23:06:14",
   "value": 10
  },
  "-KoiYzpYtbmmOD5FKHz_": {
   "date": "10/07/2017",
   "time": "23:12:54",
   "value": 15
  },
  "-KoiZ9xbcCO75-uVt_wW": {
   "date": "10/07/2017",
   "time": "23:13:39",
   "value": 11
  },
  "-KoiZF32ZjTGTWFi1amd": {
   "date": "10/07/2017",
   "time": "23:14:00",
   "value": 10
  },
  "-KoiZJxbSjf5AANRjiU0": {
   "date": "10/07/2017",
   "time": "23:14:20",
   "value": 13
  },
  "-KoiZYED510Clr8k2YKh": {
   "date": "10/07/2017",
   "time": "23:15:19",
   "value": 11
  },
  "-KoiZk_q_xuNcrLGLh0z": {
   "date": "10/07/2017",
   "time": "23:16:13",
   "value": 20
  },
  "-Koi_1zD7AUvd1r4YioA": {
   "date": "10/07/2017",
   "time": "23:17:29",
   "value": 18
  },
  "-Koi_KKboiigBkXKFW9y": {
   "date": "10/07/2017",
   "time": "23:18:44",
   "value": 15
  }
 }
}

 var getList = function() {
        var valueList = [];
        angular.forEach(data.temperature, function(values) {
            valueList.push([values.date+" "+values.time, values.value])
        });
        return valueList
    }



Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Temperature'
    },
    xAxis: {
        type: 'category',
        category:getList("date"),
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Temperature'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Temperature: <b>{point.y:.1f}</b>'
    },
    series: [{
        name: 'Temperature',
        data: getList(),
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.1f}', // one decimal
            y: 10, // 10 pixels down from the top
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }]
});
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>

Hope this is help you.

This is awesome, it works! Thank you for this! There is one last thing though, my json data is stored in a local file in the root folder. Any suggestions on how I can read from data from the file to plot the graph, instead of hard-coding it as you've shown. I appreciate this so much! — Subhaac, Jul 12 '17 at 16:00

Displaying json data imported from Google Firebase in a webpage using Flask Server

1 Answers1