Menu
I am trying to return an object to a Chart JS application. The data was initially from a dataframe in pandas.
So this was the original object generated.
{'datasets': [{'label': 'Door_08', 'data': [{'x': Timestamp('2018-10-23 00:22:43'), 'description': 'Stats: PSN:17019 PNR:0 PER:0 BFL:0 MID:17365 UER:0 WSC:1 NCL:0 NIN:0 NWI:0 WCC:1 CCC:1 LRS:-65 RLC:1145256517', 'y': 1}, ...
However, there had some problem with pandas Timestamp. So, I handled it by converting the object to JSON, got from this answer.
which now looks:
{"datasets": [{"label": "Door_08", "data": [{"x": "2018-10-23 00:22:43", "description": "Stats: PSN:17019 PNR:0 PER:0 BFL:0 MID:17365 UER:0 WSC:1 NCL:0 NIN:0 NWI:0 WCC:1 CCC:1 LRS:-65 RLC:1145256517", "y": 1}, ...
However I am still unable to see my chart. Inspecting the page:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: "{"datasets": [{"label": "Door_08", "data": [{"x": "2018-10-23 00:22:43", "description": "Stats: PSN:17019 PNR:0 PER:0 BFL:0 MID:17365 UER:0 WSC:1 NCL:0 NIN:0 NWI:0 WCC:1 CCC:1 LRS:-65 RLC:1145256517", "y": 1},
So my guess is it is not being decoded properly?
This is how I am getting the object:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: "{{ object_returned }}",
My charset:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{ title }}</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
</head>
and my Flask backend:
@app.route('/logs', methods=['GET', 'POST'])
def eventlogs():
# Do something
return render_template('logs.html', error=error, form=form, object_returned=object_returned)
How would I deserialize the object properly?
744
Apply the tojson filter to object_returned:
var myChart = new Chart(ctx, {
type: 'line',
data: "{{ object_returned|tojson|safe }}",
...
The python returned data is class type 'dict' instead of making it a json.
Make it a json inside the HTML/Java by:
var myVariable = {{ object_returned | tojson }};
The quotation marks were removed as it makes it a string.
and finally:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: myVariable,
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With