Google Charts API with SQL data in Python

[Michael Syring]

I have looked over the other questions addressing this, but they don't answer my questions specifically. I am trying to use data returned from SQL in Flask, and passing it to the Google Charts API. It's a basic weight/calorie tracker, and I need to return date and weight for the chart. My 'userdata' for one user returns from SQL query

userdata = db.execute("SELECT * FROM history WHERE id = :id", id=session["user_id"])

[{'id': 1, 'weight': 180, 'calories': 2100, 'rewards': 1, 'date': '2018-04-14'}, {'id': 1, 'weight': 185, 'calories': 1800, 'rewards': -1, 'date': '2018-04-15'}, {'id': 1, 'weight': 180, 'calories': 1600, 'rewards': 1, 'date': '2018-04-13'}, {'id': 1, 'weight': 180, 'calories': 1900, 'rewards': -2, 'date': '2018-04-12'}, {'id': 1, 'weight': 186, 'calories': 1111, 'rewards': 5, 'date': '2018-04-16'}, {'id': 1, 'weight': 184, 'calories': 1200, 'rewards': 5, 'date': '2018-04-17'}, {'id': 1, 'weight': 184, 'calories': 1400, 'rewards': 3, 'date': '2018-04-18'}, {'id': 1, 'weight': 180, 'calories': 2100, 'rewards': -4, 'date': '2018-04-11'}]

I am not familiar with PHP which I see pop up often, but I am OK with Python, and just learning JavaScript. It appears I need to jsonify the data to pass, but I'm not sure how to do that. I read through the Google Charts documentation, but I'm still not quite sure how to pass this info into the chart code.

Any help you can give is MUCH appreciated!

[Michael Syring]

OK, I think I have the data formatted correctly, and returning json.dumps().  I can get the Google Charts to display a chart where I manually enter the data in the script, but when I pass the variable to use I get `undefined: Request could not be proxied!` error in Chrome when I try to access the page.  Here is a larger snippet of my code, I hope it helps.  (I'm new to programming, so please keep that in mind :/)

Python route - this returns what I initially put:

@app.route("/charting", methods=["GET", "POST"])
@login_required
def charting():

    rows = db.execute("SELECT * FROM history WHERE id = :id", id=session["user_id"])

    jsonData = (json.dumps(rows))

    return render_template("charting.html"), jsonData

JavaScript - works with manually entered data, but doesn't work with the passed variable `jsonData`
`:

google.charts.load('current', {
              packages: ['corechart']
            }).then(function () {
              // create chart
              var container = $('#chart_div').get(0);
              var chart = new google.visualization.LineChart(container);
              var options = {
                legend: {
                  position: 'top'
                }
              };


              // create data table
              var data = new google.visualization.DataTable();
              data.addColumn('string', 'Date');
              data.addColumn('number', 'Weight');
              data.addColumn('number', 'Calories');


              // get data
              $.ajax({
                url: '/charting',
                dataType: 'json'
              }).done(function (jsonData) {
              });


              // load json data
              function loadData(jsonData) {
                $.each(jsonData, function(index, row) {
                  data.addRow([
                    row.date,
                    row.weight,
                    row.calories
                  ]);
                });
                drawChart();
              }


              // draw chart
              $(window).resize(drawChart);
              function drawChart() {
                chart.draw(data, options);
              }
            });

[Michael Syring]

The last line was cut off and I couldn't edit the post...it should read:

`return render_template("charting.html"), jsonData`

[Cheryl Evans]

I don't know if this helps at all, but javascript has a JSON.stringify method

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/81b7eb7c-3e46-40eb-9c65-b122ce0268e7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Michael Syring]

I was hoping to pass the formatted JSON data to the HTML template.
I have all the chart code done, and it works with manually entered data, but I can't seem to pass the JSON formatted data correctly.

I'll see if the stringify method would work, but I'd like to stick with the AJAX/JSON approach if I can.

To post to this group, send email to google-visua...@googlegroups.com.

[Michael Syring]

I do also have these "unexpected token" errors, but I can't seem to get them to format correctly either (I said I was a beginner!).