Using context variables as javascript parameters

Question

I'm working on a project in Django, for part of it I'm trying to use Googles chart api, which uses a Javascript function to plot the graph. So what I'm trying to do is generate the graph data in my views.py and then pass the data through the context variables to the script. To test this I tried to do:

graphplot = [['Age', 'Weight'],[ 8,      12],[ 4,      5.5],[ 11,     14],[ 4,      5],[ 3,      3.5],[ 6.5,    7]]

context = {
    "graphplot": graphplot,
}

in my views.py then I have:

var data = google.visualization.arrayToDataTable({{graphplot}});

in my template, however this doesn't seem to work.

When I do:

var data = google.visualization.arrayToDataTable([
  ['Age', 'Weight'],
  [ 8,      12],
  [ 4,      5.5],
  [ 11,     14],
  [ 4,      5],
  [ 3,      3.5],
  [ 6.5,    7]
]);

It does show the graph so I know it's not a problem with the JavaScript.

Any help would be appreciated

It just doesn't display the graph on the webpage, which I assume is because the JavaScript failed. — user2320239, Apr 28 '16 at 16:53
That's not useful information. What output does `var data = google.visualization.arrayToDataTable({{graphplot}});` produce? — Halcyon, Apr 28 '16 at 16:53
Sorry I'm very new to this, it doesn't seem to produce any output. — user2320239, Apr 28 '16 at 16:56

score 0 · Accepted Answer · answered Apr 28 '16 at 17:58

0

Try this, It should work.

var plot_data = {{graphplot}};

var data = google.visualization.arrayToDataTable(plot_data);

answered Apr 28 '16 at 17:58

jatinkumar patel

2,920
21
28

Thank you for the reply, but this doesn't seem to work. – user2320239 Apr 28 '16 at 18:09
Try to print console.log(plot_data) , and check what is it printing? – jatinkumar patel Apr 28 '16 at 18:10
Hi, I think I've worked out the problem but I'm not sure how to fix it. When Django renders the page the tag is rendered as: var plot_data = [['Age', 'Weight'], [8, 12], [4, 5.5], [11, 14], [4, 5], [3, 3.5], [6.5, 7]]; so it seems to be rendering the ' character incorrectly. – user2320239 Apr 28 '16 at 18:12
Try this: var plot_data = {{graphplot|safe}}; LEt me know is this worked? – jatinkumar patel Apr 28 '16 at 18:16
Welcome :), safe is a built in django filter. Can you please vote up – jatinkumar patel Apr 28 '16 at 18:19

Using context variables as javascript parameters

1 Answers1