HTML/Chart JS deserialize JSON from Python Flask

Question

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: "{&#34;datasets&#34;: [{&#34;label&#34;: &#34;Door_08&#34;, &#34;data&#34;: [{&#34;x&#34;: &#34;2018-10-23 00:22:43&#34;, &#34;description&#34;: &#34;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&#34;, &#34;y&#34;: 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?

score 2 · Accepted Answer · answered Oct 31 '18 at 22:15

2

Apply the tojson filter to object_returned:

var myChart = new Chart(ctx, {
    type: 'line',
    data: "{{ object_returned|tojson|safe }}",
    ...

answered Oct 31 '18 at 22:15

jordiburgos

5,964
4
46
80

No success yet. The returned data in inspection is: `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},` – Nikko Nov 01 '18 at 04:26
Now it worked! I returned the `class 'dict'` instead of the `json`. Also I removed the quotation marks on the `"{{ object_returned|tojson|safe }}"` as it makes the data as string. Thank you! – Nikko Nov 01 '18 at 06:30

score 0 · Answer 2 · answered Nov 01 '18 at 06:32

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,

HTML/Chart JS deserialize JSON from Python Flask

2 Answers2