Develop Reference

I'd like to code the array value I received from Python into JS and print it out on the web page

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.

Pass python dictionary to javascript

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.

How to delete old data points from graph after 10 points?

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);
});

Use python to add to javascript array in javascript file

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)

Get JavaScript array from Django view

I am using Django with the Google Charts API. I need to construct a JavaScript array to render a bar chart showing the # of objects created in a given day.
The expected array printed to the template should look like:
...
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Date', '# of records'],
['2015-03-07', 3], // Expected format: ['Date', # of objects]
['2015-03-08', 8],
]);
...
views.py:
class LogsView(TemplateView):
template_name = 'logs.html'
def ValuesQuerySetToDict(self, vqs):
return [ [item['date_created'], item['created_count'] ] for item in vqs]
def render_chart_data(self, **kwargs):
queryset = LogEntry.objects.filter(user=self.request.user).extra(
{'date_created': 'date(created)'}
).values('date_created').annotate(created_count=Count('id'))
modified_dict = self.ValuesQuerySetToDict(queryset)
return json.dumps(modified_dict)
def get_context_data(self, **kwargs):
context = super(
LogsView, self
).get_context_data(**kwargs)
context['chart_data'] = self.render_chart_data()
The following is rendered to my django template (I bypassed sending it to JavaScript for now to see what was returned...
When I believe I need to return a JavaScript array like the following:
["2015-02-18", 3],
["2015-02-19", 12],
["2015-02-21", 1],
And feed that to the drawStuff function which will render the barchart.
Alternate Method
I followed the this thread on StackOverflow and modified the render_chart_data to use django serializer like this but I am getting an error: " 'dict' object has no attribute '_meta'

Thanks to all who offered assistance on this.
Two things needed to changed; the ValuesQuerySetToDict function needed to be rewritten as follows:
def ValuesQuerySetToDict(self, vqs):
list_vals = [ ['Date', '# of records'] ]
for item in vqs:
list_vals.append(
# convert datetime object to string otherwise JSON serialization error
[ str(item['date_created']), item['created_count'] ]
)
return list_vals
And the render_chart_data function needed to be rewritten as follows:
def render_chart_data(self, **kwargs):
queryset = LogEntry.objects.filter(user=self.request.user).extra(
{'date_created': 'date(created)'}
).values('date_created').annotate(created_count=Count('id')).order_by('created-date')
modified_list = list(self.ValuesQuerySetToDict(queryset))
json_data = json.dumps(modified_list)
return json_data
Finally, {{ chart_data }} needed to be passed to to the drawStuff function, like so:
function drawStuff() {
var data = new google.visualization.arrayToDataTable(
{{ chart_data|safe }}
);
I've posted views.py and logs.html here.

In your queryset, render created_count as string and not as integer. Json's do not behave well with Integers.
In your JS function drawStuff, chart_data should be parsed as json. See below:
var json_string = '{{chart_data}}';
var json = JSON.parse(json_string);
var data = new google.visualization.arrayToDataTable(json)