I have a Python + JS application connected to a PostgreSQL database. The database contains data about users in different countries, which is queried by the server.py file. The result of this query is a dictionary that would look something like this:
{'US': 2,
'CA': 5}
This dictionary needs to be passed to my map.js file, which populates a world map according to the country code (key) and volume (value). This dictionary updates with user activity, so it needs to be passed every time someone loads the map.
How can I pass the data over? It seems like I need to create a JSON file. I'm not sure how to create that file within python or how to call it from javascript.
I want to replace the hardcoded 'var data' values from map.js with my query results from country_count on server.py.
my server.py:
#app.route("/map")
def show_mapjs():
country_count = {
"US": 0, "CA": 0,
}
country_code = session.get("country_code")
for country_code, _ in country_count.items():
records_count = User_Records.query.filter_by(country_code=country_code).count()
country_count[country_code] = records_count
print(f"=== {country_count}")
return country_count
(US & CA are initialized at 0 and the records_count query updates the count as user activity increases over time.)
my map.js:
fetch('/map')
anychart.onDocumentReady(function () {
var data = [
{'id': 'US', 'value': 5},
{'id': 'CA', 'value': 2}
]
var dataSet = anychart.data.set(data);
var mapData = dataSet.mapAs({ description: 'description' });
var map = anychart.map();
what a fun project!
Let's get the work under way.
On your server side,
import json
#app.route('/map')
def show_mapjs():
country_count = {
"US": 0, "CA": 0,
}
#place your own code here to get the data from the database#
country_list = []
for country, count in country_count.items():
country_list.append({"id": country, "value": count})
# Serializing json
json_object = json.dumps(country_list)
return json_object
On your client side,
First, include the below js libs in the HTML, so the next code can use it.
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-map.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/geodata/latest/custom/world/world.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
Use the map js function as below,
<script>
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile("/map",
function (data) {
var map = anychart.map();
map.geoData(anychart.maps.world);
var dataSet = anychart.data.set(data);
// set the series
var series = map.choropleth(dataSet);
// disable labels
series.labels(false);
// set the container
map.container('container');
map.draw();
}
);
});
</script>
You should do this way to avoid out-of-sync data loading and map rendering. This will ensure that the json is downloaded and then processed by the map.
Let me know if you have issues getting this working.
Related
It is to draw a plot graph on a web page using Python and js code.
Here's my python code
from bottle import route, run, request, redirect, template
import pymysql as sql
#route('/print')
def show_print():
db = sql.connect(host='localhost', user='root', password='1234', db='testdb')
if db is None:
return template("index.tpl", text="Non", x_value=[], y_value=[])
else:
query = "select * from testdata;"
cur = db.cursor()
n = cur.execute(query)
tpl_no=[]
tpl_date=[]
tpl_hum=[]
tpl_tmp=[]
for i in range(n):
value = cur.fetchone()
tpl_no.append(value[0])
tpl_hum.append(value[2])
return template("index.tpl", x_value = tpl_no, y_value = tpl_hum)
db.close
And MySQL test data table content:
enter image description here
and plotly.js
<h1> {{x_value}} Hi There</h1>
<h1> {{y_value}} Hi There</h1>
<div id="myPlot" style="width:200;height:800px;"></div>
<script type="text/javascript">
var x_arry = new Array();
var y_arry = new Array();
for(var i = 0; i < {{x_value}}.length; i++){
x_arry.push({{x_value}}[i]);
}
for(var i = 0; i < {{y_value}}.length; i++){
y_arry.push({{y_value}}[i]);
}
var data = [{
x: x_arry,
y: y_arry,
mode: "lines"
}];
var layout = {
xaxis:{title:"X: Number"},
yaxis:{title:"Y: Hum"},
title:"This is my graph"
};
Plotly.newPlot("myPlot", data, layout);
I made it like this. But I can't see the plot graph on the web page
The x_arry value has been output normally in the js code.
However, the plot graph is not drawn on the web page because the y_arry value is not printed. I want to solve this.
I would recommend making two changes to your code.
Firstly, you'll need to convert the Decimal values you are getting from the database to Python floats, by replacing the line
tpl_hum.append(value[2])
with
tpl_hum.append(float(value[2]))
Secondly, the most reliable way to get data from your Python code to your JavaScript code is to get Python to serialize the data as a JSON string, and put this in your template. Try replacing the following line in your Python code
return template("index.tpl", x_value = tpl_no, y_value = tpl_hum)
with
json_data = json.dumps({"x_array": tpl_no, "y_array": tpl_hum})
return template("index.tpl", json_data=json_data)
You'll also need to add import json to your Python code.
The JavaScript within your template then becomes:
var jsonData = {{json_data}};
var data = [{
x: jsonData.x_array,
y: jsonData.y_array,
mode: "lines"
}];
var layout = {
xaxis:{title:"X: Number"},
yaxis:{title:"Y: Hum"},
title:"This is my graph"
};
Plotly.newPlot("myPlot", data, layout);
You don't need the loops to read the data into variables such as x_arry and y_arry. (In fact, it's arguable you wouldn't have needed them before.)
Disclaimer: I haven't tested this.
I have been trying to send a Python Dictionary to a HTML Page and use that dictionary in Javascript to add a Graph on my website, using Django
The form takes a Image Upload, and the code is as follows,
<div class=" mx-5 font-weight-bold">
Uplaod Image
</div>
<input class=" " type="file" name="filePath">
<input type="submit" class="btn btn-success" value="Submit">
This image is then sent to views.py where it is processed and a resultant image, as well as a dictionary is generated from that image. And then again, a HTML page is rendered where the dictionary as well as the resultant image is sent in context variable. The code is as follows,
def predictImage(request):
fileObj = request.FILES['filePath']
fs = FileSystemStorage()
filePathName = fs.save(fileObj.name, fileObj)
filePathName = fs.url(filePathName)
testimage = '.'+filePathName
img_result, resultant_array, total_objects = detect_image(testimage)
cv2.imwrite("media/results/" + fileObj.name, img=img_result)
context = {'filePathName':"media/results/"+fileObj.name, 'predictedLabel': dict(resultant_array), 'total_objects': total_objects}
#context = {}
return render(request, 'index.html', context)
Now, I want to convert the Dictionary items and keys into two different Javascript arrays, which are then to be used to plot a Graph on the HTML page. The template code of the Javascript is as follows,
<script>
// const value = JSON.parse(document.getElementById('data_values').textContent);
// alert(value);
var xArray = [];
var yArray = [];
var xArray = ["Italy", "France", "Spain", "USA", "Argentina"]; // xArray needs to have Python Dictionary's keys
var yArray = [55, 49, 44, 24, 15]; // yArray needs to have Python Dictionary's values
var layout = { title: "Distribution of Labels" };
var data = [{ labels: xArray, values: yArray, hole: .5, type: "pie" }];
Plotly.newPlot("myPlot", data, layout);
</script>
I have tried a lot of different things to access my Python Dictionary in the Javascript Script and then convert that to Javascript arrays, but I still have not managed to do it. I also tried different Stackoverflow posts etc but nothing could really properly guide me on this. I am quite new to Django as well so I am not much aware of the syntax as well.
From Django-doc json_script
{{ value|json_script:"hello-data" }}
inside your Javascript
<script>
const data = JSON.parse(document.getElementById('hello-data').textContent);
var xArray = Object.keys(data) // return list of keys
var yArray = Object.values(data) // return list of values
</script>
can you take a try this,
views.py
# context data
context = {'filePathName':"media/results/"+fileObj.name, 'predictedLabel': dict(resultant_array), 'total_objects': total_objects,
"data": {"Italy":11, "France":22, "Spain":22, "USA":23, "Argentina":12}}
template.html
<script>
// const data = JSON.parse();
// alert(value);
var data = JSON.parse("{{data|safe}}".replaceAll("'", '"'));
var xArray = [];
var yArray = [];
var xArray = Object.keys(data); // xArray needs to have Python Dictionary's keys
var yArray = Object.values(data) // yArray needs to have Python Dictionary's values
var layout = { title: "Distribution of Labels" };
var data = [{ labels: xArray, values: yArray, hole: .5, type: "pie" }];
Plotly.newPlot("myPlot", data, layout);
</script>
html
<input type="hidden" id="dictionary" value="{{ dictionary }}" />
JS
var dictionary = JSON.parse($('#dictionary').val());
I am plotting my data using chartist and I am updating the chart dynamically but the chart is not looking good as it is appending values over and over. I want to remove the first array element as the 11th array data appends.
Basically I only want to show only 10 points in the screen. How I can do this? I am using python flask for web programming and data is coming from arduino and using the chartist library.
Here is the JavaScript used.
var mychart;
var now = new Date().getTime();
var getdata = $.get('/a');
getdata.done(function(r) {
var data = {
labels: [
],
series: [
r.r
]
};
var options = {
width : 1200,
height : 300
}
mychart = new Chartist.Line('.ct-chart', data, options);
});
var myupdate = setInterval(updatechart,1000);
function updatechart() {
var updatedata = $.get('/a');
updatedata.done(function(r) {
var data = {
labels: [
],
series: [
r.r
]
};
mychart.update(data);
});
}
Here is my python code. Where i am reading the continuous data from arduino.
from flask import Flask, render_template,request,redirect, url_for,jsonify
import flask
from shelljob import proc
import time
import eventlet
eventlet.monkey_patch()
from flask import Response
import serial
from time import time,gmtime,strftime
from datetime import datetime
import json
app = flask.Flask(__name__)
lj= serial.Serial( '/dev/ttyACM0' ,9600)
#app.route('/')
def home():
return render_template('dynamic2.html')
v=[]
#app.route('/a')
def a():
if (lj.inWaiting()>0):
mydata= lj.readline()
v.append(mydata)
print mydata
return jsonify({'r':v})
if __name__ == '__main__':
app.run(debug=True)
If I understand correctly, what you want is to use the first 10 returned items, so you should change
r.r
to
r.r.splice(r.r.length-10)
so you always retain the last 10 elements
But that'll only help in the client side. If you're not going to use more than 10 elements in the client, then you shouldn't send them from the server. It that the case, you should change
return jsonify({'r':v})
to
return jsonify({'r':v[-10:]})
so you'll only send the last 10 items to the client
If you're not going to use more than 10 elements on the server either, then you should change
v.append(mydata)
to
v.append(mydata)
if len(v) > 10
v.pop(0)
this way, each time you append a new item to the list, and it gets over 10 items, you delete the first one
For your other question (how to put current time in x axis) you should send the time from the server. Since you already imported time, you could do it like this
v={'r':[],'t':[]}
#app.route('/a')
def a():
if (lj.inWaiting()>0):
mydata= lj.readline()
v['r'].append(mydata)
v['t'].append(time.time())
print mydata
return jsonify(v)
I haven't really used the Chartist library, but a quick browse through its examples tells me that's what the labels property is there for. So you should update your Javascript to this
updatedata.done(function(r) {
var data = {
labels: r.t,
series: r.r
};
mychart.update(data);
});
I want to display data in pie chart. Data is retrieved from server in JSON format i.e. single int value and I want to display it using pie chart. Suppose that data is 66, then i want to show that 66% full in pie chart.
I have retrieved data but not able to find the function in javascript to accept data
For Ex. :
$(function(){
$("#doughnutChart").drawDoughnutChart([
{ title: "Full", value: 66, color: "#FC4349" },
{ title: "Empty", value: 34, color: "#6DBCDB" },
]);
});`
Then instead of already defined values in above function i want to accept value from server and display in pie chart.
in index.html I added statement
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON('http://api.thingspeak.com/channels/79448/feed/last.json?callback=?', function(data){
$("div").append(data.field1 + " ");
});
**var x=data.field1;**
});
});
</script>
This is my index.js file :
$("#doughnutChart").drawDoughnutChart( dataFromServer);
`$(function(){
`$("#doughnutChart").drawDoughnutChart([
{ title:"Full" value: dataFromServer.y1, color: "#FC4349" },
{ title: "Empty" value: dataFromServer.y2, color: "#6DBCDB" },
]);
});`
`var formattedData = [];`
// "dataFromServer" contains an array of differently-formatted objects
for ( var i = 0; i < dataFromServer.length; i++ ){
formattedData.push({
value: dataFromServer[i].y,
});
}
$("#doughnutChart").drawDoughnutChart( formattedData );
So please tell me is this way i should write in index.js file???
dataFromServer.y1=x; Please suggest me the correct way.
This depends upon the form of your data. A;; you're going to do is use variables instead of literals. For instance, if your data is an array of objects with a title, value, and color, you could just call:
// "dataFromServer" is an array of appropriately formatted objects
$("#doughnutChart").drawDoughnutChart( dataFromServer);
If, on the other hand, you have a complex object you need to map out, you could do it explicitly like so:
// "dataFromServer" contains all of the right data, but in different locations
$("#doughnutChart").drawDoughnutChart([
{ title: dataFromServer.x1, value: dataFromServer.y1, color: dataFromServer.z1 },
{ title: dataFromServer.x2, value: dataFromServer.y2, color: dataFromServer.z2 },
]);
Most likely you will have an array of differently formatted object, which you will want to turn into an array of objects formatted in this manner, in which case you would want to loop through the objects from the server and create a new variable from them:
// formattedData is the array that will be passed into the chart
var formattedData = [];
// "dataFromServer" contains an array of differently-formatted objects
for ( var i = 0; i < dataFromServer.length; i++ ){
formattedData.push({ title: dataFromServer[i].x,
value: dataFromServer[i].y,
color: dataFromServer[i].z });
}
$("#doughnutChart").drawDoughnutChart( formattedData );
Addendum:
Upon comment clarification, I am adding the following. Assuming the Title and Color values are static (i.e. not coming from the database), you may simply insert the integer "values" into the code directly, like so:
// "mySanFranciscoDataValue" is the single integer you're trying to insert
// into the chart. Simply reference it directly, whether it's a
// variable or a function. Presumably you will have two of them,
// one for each city, so I've included a "myNewYorkDataValue" too.
$("#doughnutChart").drawDoughnutChart([
{ title: "San Francisco", value: mySanFranciscoDataValue, color: "#FC4349" },
{ title: "New York", value: myNewYorkDataValue, color: "#6DBCDB" },
]);
I have this array stored in versions.js
var cc_versions = [
"2016-01-22",
"2016-01-21",
];
var cs_versions = [
"2016-01-23",
"2016-01-21",
];
I have been trying to figure out a way to write new data to the top of the array inside the javascript file with python. I run a python script on my computer almost every day and I want to update this array when I run it so that I can have a website load the versions. Is it possible to do this? I know I could write to the file, but it would just go to the bottom of the file outside of the array. Also there will be multiple arrays, so I'm trying to find some python script that can interact with a javascript file so I can target specific arrays.
You could also try using Genshi template language. One of the tags there is
<?python ... ?>
for example:
<?python
import json
dateInit = []
selectInit = []
for fi in form_items:
if (fi["type"] == "date"):
dateInit.append(fi["id"])
if "attrs" in fi and "format-select" in fi["attrs"]:
selectInit.append(fi["id"])
if not "attrs" in fi:
fi["attrs"] = {}
jsonDateInit = json.dumps(dateInit)
jsonSelectInit = json.dumps(selectInit)
?>
Your response should contain form_items dictionary processed somewhere on the back-end. Then in javascript you can 'accept' the variables using '$'-sign:
var dateitems = JSON.stringify($jsonDateInit);
var select_items = JSON.stringify($jsonSelectInit);
import json
NEW_VARIABLES = [1, 2, 3]
with open('your/json/file.json') as data_file:
json_data = json.load(data_file)
# insert at the beginning of the list
json_data['cc_version'].insert(0, 'something new')
json_data['cs_version'] = NEW_VARIABLES + json_data['cs_version']
# write to json file after modifying data
with open('your/json/file.json', 'w') as output_file:
json.dump(json_data, output_file)
I ended up using json as suggested in the comments
import json
with open("cc_versions.txt") as data:
json = json.load(data)
dates = json["dates"]
dates.append("2016-01-21")
dates = set(dates)
dates = sorted(dates, key=lambda d: map(int, d.split('-')))
dates = dates[::-1]
import json
with open("cc_versions.txt", "w") as outfile:
json.dump({'dates':dates}, outfile, indent=4)