Observation:
def view_page(request,
template = 'home.html'):
if request.user.is_authenticated():
data = [['jan'],[12],[-12]]
context = {
'data' : data,
}
return render(
request, template, context)
Design:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number');
data.addColumn('number');
data.addRows({{ data|safe }});
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title: "blabla",
width:600, height:400,
bar: { groupWidth: '90%' },
isStacked:"true",
legend:"none" }
);
}
</script>
I am attempting to pass the array values to the chart rows, but facing difficulties. The chart is not being rendered even though other functionalities are working properly.
The main objective is to extract model fields into an array and utilize it for chart representation. If I cannot achieve this, progress will be hindered.
Upon displaying {{ data }} in the template, the following result is obtained:
[[0], [12], [-12]]
Could this be the incorrect format? How can I modify it for Google Charts to comprehend it as row values?
Any form of guidance or assistance would be highly appreciated.
Thank you in advance