google-charts not getting displayed on the server

My code:

<html>
  <head>
   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['FileName', 'Frequency'],
        {% for l in list1 %}
              [{{l.file_name}},{{l.frequency_count}}], 
        {% endfor %}
        ]);

        var options = {
        title: 'Search Performance',
        hAxis: {title: 'FileName', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
   </script>
  </head>
  <body>
     <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

JavaScript
​x
 
<html>  <head>   <script type="text/javascript" src="https://www.google.com/jsapi"></script>   <script type="text/javascript">      google.load("visualization", "1", {packages:["corechart"]});      google.setOnLoadCallback(drawChart);      function drawChart() {        var data = google.visualization.arrayToDataTable([        ['FileName', 'Frequency'],        {% for l in list1 %}              [{{l.file_name}},{{l.frequency_count}}],         {% endfor %}        ]);​        var options = {        title: 'Search Performance',        hAxis: {title: 'FileName', titleTextStyle: {color: 'red'}}        };​        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));        chart.draw(data, options);      }   </script>  </head>  <body>     <div id="chart_div" style="width: 900px; height: 500px;"></div>  </body></html>​

On running my app (created in Django) on the server this chart is not getting displayed, why? This page is “results.html” which is directed from my views.py file. Here “list1” contains the data stored in the table namely “file_name” and “frequency_count”. Why is this happening?

I’m new to Django, google-charts and JavaScript.

Answer

You may have a problem in the loop that prints the javacript array of values for the chart. I guess the filenames are strings, and as such they need to be delimited with ' or ", like this:

{% for l in list1 %}
    ['{{ l.file_name }}', {{ l.frequency_count }}], 
{% endfor %}

JavaScript
 
{% for l in list1 %}    ['{{ l.file_name }}', {{ l.frequency_count }}], {% endfor %}​

To test this, I just got rid of the loop and put a couple of rows of sample static data, like this:

var data = google.visualization.arrayToDataTable([
        ['FileName', 'Frequency'],
            ['this', 100],
            ['that', 200]
        ]);

JavaScript
 
var data = google.visualization.arrayToDataTable([        ['FileName', 'Frequency'],            ['this', 100],            ['that', 200]        ]);​

And I got the chart working:

enter image description here

Advertisement

Answer