CODEWITHSUNDEEP
pythondjangogoogle-visualization
Zhubei Federer
Zhubei Federer

Reputation: 1268

How to draw Google Charts (Combo Chart) with django template?

I create a dictionary in a list in django:

myList = [{'time':'week1','val':'0'},{'time':'week2','val':'1'}]

I wanted to show on html page using google Combo Chart,but it not show:

var data = google.visualization.arrayToDataTable([['Week', 'val']]);
                {% for i in myList%}
                    data.addRows([['{{i.time}}','{{i.val}}']]);
                {% endfor %}

and than, I add an empty row behind ,it can finally show the chart.

var data = google.visualization.arrayToDataTable([['Week', 'val'],['',  0]]);
                {% for i in myList%}
                    data.addRows([['{{i.time}}','{{i.val}}']]);
                {% endfor %}

my question is :

1.why "arrayToDataTable" need 2 row when create?

2.and how can I create Combo Chart use django template, without insert an empty row?

very thanks!

Upvotes: 0

Views: 240

Answers (1)

cwhisperer
cwhisperer

Reputation: 1926

The data needed should be called via ajax or should be passed directly to the template. Here an example on how to do it via ajax:

function drawVisualization() {
    // Some raw data
    var json = $.ajax({
                    url: 'get_json_rank.php',
                    dataType: 'json',
                    async: false
                }).responseText;

    var data = new google.visualization.DataTable(json);

    var options = {
        title : 'Restaurant Ranking Stats',
        vAxis: {title: "Business Growth"},
        hAxis: {title: "Restaurants"},
        seriesType: "bars",
        series: {1: {type: "line"}}
    };              
    var chart = new 
google.visualization.ComboChart(document.getElementById('rank_chart'));
chart.draw(data, options);
}

Upvotes: 1

Related Questions