CODEWITHSUNDEEP
djangogoogle-visualization
kikee1222
kikee1222

Reputation: 1996

Django passing data into Google Charts

I have a view in views.py like the below. I am passing data in as it is required in the graph

def home(request): 

     posts = [['day', 'ic'], ['Fri', 3601326.0], ['Mon', 1450340.0], ['Sat', 2094946.0], ['Sun', 2373750.0], ['Thu', 3116066.0], ['Tue', 729403.0], ['Wed', 1934780.0]]
     return render(request, 'kodey/home.html', {'data': posts})

in the HTML I have the below but that chart doesn't show. It does if I pass the same data in within the document, so I am a bit confused,

Can anyone help me?

Thanks

<script type="text/javascript">

    google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data2 = google.visualization.arrayToDataTable(
              {{ data }}              
      );

      var options = {
            chartArea: {
        left: 50,
        top: 5,
        right: 5,
        bottom: 50,
        width: 500,
        height: 300
    },
        hAxis: {
          title: 'Average Interactions',
          minValue: 0
        },

      };

      var days = new google.visualization.BarChart(document.getElementById('days_div'));

      days.draw(data2, options);
}</script>

Upvotes: 1

Views: 235

Answers (1)

willeM_ Van Onsem
willeM_ Van Onsem

Reputation: 476537

This is not a valid JSON blob. You can convert it to a json blob, for example with json.dumps(…) [Django-doc]:

import json

def home(request): 
     posts = [['day', 'ic'], ['Fri', 3601326.0], ['Mon', 1450340.0], ['Sat', 2094946.0], ['Sun', 2373750.0], ['Thu', 3116066.0], ['Tue', 729403.0], ['Wed', 1934780.0]]
     return render(request, 'kodey/home.html', {'data': json.dumps(posts)})

in the template, you can then add the JSON blob with the |safe template filter to avoid HTML escaping it:

var data2 = google.visualization.arrayToDataTable(
    {{ data|safe }}              
);

Upvotes: 2

Related Questions