Home/ Questions/Q 8188743
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:01:13+00:00

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

  • 0

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>

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 %}

    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]
        ]);

    And I got the chart working:

    enter image description here

    • 0