How to pass python variable to javascript in django template for Dygraph

Question

I want to send a pandas dataframe output that is in Django Views.py, to the template in order to graph in a Dygraph.

The Dygraph will display if I leave the array definition in the template with the Dygraph script. If I copy that same array definition to views.py and render it to the template the graph won't display.

The example array from Dygraphs (http://dygraphs.com/data.html#array). And it works correctly. output.html:

<div id="graphdiv"></div>

<script>
new Dygraph(
document.getElementById("graphdiv"),

[
              [1,10,100],
              [2,20,80],
              [3,50,60],
              [4,70,80]
            ]
,
);
</script>

Below is my intent with the array defined in views.py, but this won't render the graph.

Views.py:

def output(request): 

    DAT =   [
                [1,10,100],
                [2,20,80],
                [3,50,60],
                [4,70,80]
              ]

    #DAT = json.dumps(DAT) This doesn't seem to help either.

    data = {
     'DAT': DAT,
    }
    return render(request, 'cylon/output.html', data)
 ------------------------------------------------------
Output.html:

<div id="graphdiv"></div>

<script>
new Dygraph(
document.getElementById("graphdiv"),

"{{DAT}}"
,
);
</script>

Answer 1

I think you need to pass json data and after decode it.

Python

import json

def output(request): 
    DAT = [
        [1,10,100],
        [2,20,80],
        [3,50,60],
        [4,70,80]
    ]

    data = {
     'DAT': json.dumps(DAT),
    }
    return render(request, 'cylon/output.html', data)

HTML

<script>
  var coordinates = JSON.parse('{{ DAT }}');
  new Dygraph(document.getElementById("graphdiv"), coordinates);
</script>