How to insert array variable from Python to Javascript

Question

I have this issue passing the data from an array variable to the python javascript function. Below is the entire script

 array1 =[['X-val', 'Y-val'], [4, 5], [8, 12], [11, 14]];

self.response.out.write('<script type="text/javascript">'+
                        'google.load("visualization", "1", {packages:["corechart"]});'+
                        'google.setOnLoadCallback(drawChart);'+
                        'function drawChart() { '+
                        'var data = google.visualization.arrayToDataTable({0});' +
                        'var chart = new google.visualization.LineChart(document.getElementById("casestrend"));chart.draw(data);} '+
                        '</script> '.json.dumps(array1))

This is the javascript code which i want to convert to the python format wherein the array required for arrayToDataTable() will be fetched through queries. Currently static version of it (array1 above) doesn't work

<script type="text/javascript">                                                                                       
 google.load("visualization", "1", {packages:["corechart"]});                                                        
 google.setOnLoadCallback(drawChart);                                                                                
 function drawChart() {                                                                                              
 var data = google.visualization.arrayToDataTable([['X-val', 'Y-val'], [4, 5], [8, 12], [11, 14]]);                
 var chart = new google.visualization.LineChart(document.getElementById('chart'));                                 
 chart.draw(data);                                                                                                 
 }                                                                                                                   
 </script>

Please let me know how to pass the data (array) from the python to the javascript so that the chart gets loaded.

What do you mean by Python? Which web framework are you using? — Selcuk
– Selcuk, Commented Mar 18, 2016 at 9:44
I am using webapp2 framework for writing python codes. I was working on creating charts using the google charts wherein the data it needs is in array format. Having trouble passing the same from python array to javascript — Mindfreak
– Mindfreak, Commented Mar 18, 2016 at 9:56

Mikhail Gerasimov · Accepted Answer · 2016-03-18 09:59:38Z

2

Your current solution doesn't work because format (you missed it, right?) calls before strings concatenated.

In current case I would prefer concatenation over format to prevent braces escaping:

js_code = '''
          <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() { 
          var data = google.visualization.arrayToDataTable(''' + json.dumps(array1) + ''');
          var chart = new google.visualization.LineChart(document.getElementById("casestrend"));chart.draw(data);} 
          </script>
          '''

answered Mar 18, 2016 at 9:59

Mikhail Gerasimov

40.1k20 gold badges126 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mhawke Over a year ago

Note that this subtly changes the resulting string into a multi-line string. I doubt that it's going to be a problem... just saying.

Mikhail Gerasimov Over a year ago

@mhawke, thanks, that's true. Based on expected output in question it might be what author want.

Mindfreak Over a year ago

Thank you so much @germn. Made my day!

chamal sapumohotti · Accepted Answer · 2016-03-18 10:09:03Z

2

This will work.

array1 =[['X-val', 'Y-val'], [4, 5], [8, 12], [11, 14]];

self.response.out.write("""<script type="text/javascript">
    google.load("visualization", "1", {{packages:["corechart"]}});
    google.setOnLoadCallback(drawChart);
    function drawChart() {{ 
    var data = google.visualization.arrayToDataTable({0});
    var chart = new google.visualization.LineChart(document.getElementById("casestrend"));chart.draw(data);}}
    </script> """.format(json.dumps(array1)))

answered Mar 18, 2016 at 10:09

chamal sapumohotti

3012 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to insert array variable from Python to Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related