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.
Advertisement
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 %}
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:
