String list variable from Python (flask) to label fails, numeric data is ok. Anyone know what to do?

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Antony on 25th August 2016
Hi everyone,

Love the library, but inexperienced in js.

I'm trying to pass a set of strings to the labels of a bar graph from a flask server, but it keeps killing the graph completely.

Numeric data passed in to the function is o.k. and labels defined in the js function are o.k (as per the examples) but once they come from flask (as strings) they fail, even if I try to run them through a json dump (in fact the lists fail completely as I sort of expected under the json.dump(py_label) method).

No site example, sorry but code below...

Flask side:
py_data = [12,13,16,15,16,19,19,12,23,16,13,24]
py_label = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

return render_template('graph.html', a = py_data, b = py_label)

I can see both jdata and jlabel in the html as I've got them displating in that page to make sure.

This works:
<script>
window.onload = function ()
{
var data = {{ a }};
var bar = new RGraph.Bar(
{
id: 'graph_canvas_1',
data: data,

options: {
textSize: 16,
textAccessible: true,
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
unitsPost: 'k',
shadow: true,
colors: ['red'],
strokestyle: 'rgba(0,0,0,0)',
textSize: 14,
title: 'Title',
numyticks: 5,
noxaxis: true,
gutterLeft: 50
}
}).grow();
};
</script>


as does this:
<script>
window.onload = function ()
{
var bar = new RGraph.Bar(
{
id: 'graph_canvas_1',
data: {{ a }},

options: {
textSize: 16,
textAccessible: true,
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
unitsPost: 'k',
shadow: true,
colors: ['red'],
strokestyle: 'rgba(0,0,0,0)',
textSize: 14,
title: 'Title',
numyticks: 5,
noxaxis: true,
gutterLeft: 50
}
}).grow();
};
</script>

but add this:
<script>
window.onload = function ()
{
var bar = new RGraph.Bar(
{
id: 'graph_canvas_1',
data: {{ a }},

options: {
textSize: 16,
textAccessible: true,
labels: {{ b }},
unitsPost: 'k',
shadow: true,
colors: ['red'],
strokestyle: 'rgba(0,0,0,0)',
textSize: 14,
title: 'Title',
numyticks: 5,
noxaxis: true,
gutterLeft: 50
}
}).grow();
};
</script>

or this:
<script>
window.onload = function ()
{
var data = {{ a }};
var labels = {{ b }};
var bar = new RGraph.Bar(
{
id: 'graph_canvas_1',
data: data,

options: {
textSize: 16,
textAccessible: true,
labels: labels,
unitsPost: 'k',
shadow: true,
colors: ['red'],
strokestyle: 'rgba(0,0,0,0)',
textSize: 14,
title: 'Title',
numyticks: 5,
noxaxis: true,
gutterLeft: 50
}
}).grow();
};
</script>

and it fails.

As I am trying to get relevant data to display for the last 12 months from an sql query for my team at work (i.e. rolling 12 month) the labels need to be dynamic.

Any help would be greatly appreciated as I'm trying to drag people out of the pen and paper age and cool visuals is something they seem to respond to.

-Antony
Posted by Richard on 25th August 2016
Hi there,

What is this?

var data = {{ a }};

I'll assume that it gets changed by your Python script (Flask?). In your browser (view the source in the browser to see what it's receiving from the server) the JavaScript needs to look like this (I've omitted the configuration options):

window.onload = function ()
{
     var data = {{ a }};
     var labels = {{ b }};

     // View source in your browser and the above two lines should look similar to this.
     // Note that there's no quotes around the array nor around the numbers in the data array
     //
     // var data = [4,8,6,3,5,7,5];
     // var labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];

     var bar = new RGraph.Bar({
         id: 'graph_canvas_1',
         data: data,
         options: {
             // Put options here when the chart is working
         }
     }).grow();
};




Richard
Posted by Antony on 25th August 2016
Thanks for the speedy reply,

yes the {{ a }} is a "replace this bit with a" message to the flask server before it serves the template.

once it gets to the javascript it no longer looks like a list, but makes no sense anymore :(


{
   var data = [12, 13, 16, 15, 16, 19, 19, 12, 23, 16, 13, 24];
   var labels = [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;, &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;];
   var bar = new RGraph.Bar(
    {
  etc etc...

As you can see the integers are preserved, but the list of strings is converting the " to the &#39 thing.

running through the json library was what I thought might make it format correctly.

It's definitely a python (flask) to js issue as it's turning up in the html <body> fine., but hopefully someone else has seen it before.

I tried typecasting to a string (str(["jan","feb",......etc]) but it didn't do anything.

Apologies for not posting this bit in the last message, should have thought of it.

below is the returned html that the browser gets (as inspected with firebug). forgive the terrible html layout for testing.

<html>
<head>
</head>
<body>
<section>
[12, 13, 16, 15, 16, 19, 19, 12, 23, 16, 13, 24]
<br>
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
<br>
</section>
<article>
<canvas id="graph_canvas_1"></canvas>
</article>
</body>

<script>

window.onload = function ()
  {
   var data = [12, 13, 16, 15, 16, 19, 19, 12, 23, 16, 13, 24];
   var labels = [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;, &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;];
   var bar = new RGraph.Bar(
    {
     id: 'graph_canvas_1',
     data: data,

     options: {
        textSize: 16,
        textAccessible: true,
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        unitsPost: 'k',
        shadow: true,
        colors: ['red'],
        strokestyle: 'rgba(0,0,0,0)',
        textSize: 14,
        title: 'Title',
        numyticks: 5,
        noxaxis: true,
        gutterLeft: 50
        }
    }).grow();
  };
</script>
</html>
Posted by Richard on 25th August 2016
Hi there,

&#39; in a HTML page is the escaped version of ' It looks as though Flask is doing this for you to try and be helpful (I guess). There will probably be a way to turn this escaping off and just output the raw, unescaped version of the string.

Does this help?

stackoverflow.com/questions/5572225/text-escaped-when-i-want-it-to-show-up-as-html-in-flask-jinja2



Richard
Posted by Antony on 25th August 2016
Thank you so much.

I was trying to treat it at the python end, but {{ b|safe }} looks like the correct way to do it obviously.

I searched for hours, but not knowing what &#39 was I was clearly looking for the wrong thing (I'm an mech engineer, not a computer guy).

works a treat now, can graph SQL based maintenance records completed by time to my heart's content!!

Thanks again
-Antony
Posted by Richard on 25th August 2016
Hi there,

Thank you!




Richard

Add a reply




« Back to message list