Passing data to Google Charts with Django

Question

This question has been asked but not answered like this one.

In my view.py I have data pulled from MySQL, example of the array:

(Decimal('13'), Decimal('6'), Decimal('13'))
(Decimal('207'), Decimal('18'), Decimal('129'))
(Decimal('301'), Decimal('38'), Decimal('193'))
(Decimal('204'), Decimal('32'), Decimal('150'))
(Decimal('159'), Decimal('25'), Decimal('88'))

args = {'array':array}
return render_to_response('page2.html', args)

Trying to put it into Google Chart

function drawChart() {
    var djangoData = JSON.parse('{{ args }}');
    var data = google.visualization.arrayToDataTable(djangoData);

Also tried var djangoData = {{ array }}; Both with no luck!

Edit:

Suggested

return render_to_response('page2.html', {'array': json.dumps(array)})

Looks like it would work, except that the db produces incompatible type. Is there a way to do this without converting every item to int type. Or if there if there is a pythonic way to convert it?

score 7 · Accepted Answer · edited May 23 '17 at 10:34

7

You should try this in view.py (do not forget to add the import json):

array = [['X', 'Y', 'Z'], [1, 2, 3], [4, 5, 6]]
return render_to_response('page2.html', {'array': json.dumps(array)})

Then in the template use the raw value array without quotes:

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

EDIT: using a custom JSONEncoder to handle the Decimal type, stolen from this question:

class DecimalEncoder(json.JSONEncoder):
    def default(self, o):
        if isinstance(o, decimal.Decimal):
            return float(o)
        return super(DecimalEncoder, self).default(o)

Then in the view:

array = [['X', 'Y', 'Z'], [Decimal('1'), Decimal('2'), Decimal('3')]]
return render_to_response('page2.html', {
    'array': json.dumps(array, cls=DecimalEncoder),
})

edited May 23 '17 at 10:34

Community

1
1

answered Dec 29 '13 at 22:31

Nicolas Cortot

6,591
34
44

Get Decimal('13') is not JSON serializable, which seems to be a problem due to the DB output. Is there a way to deal with that without remaking the output into different type? Not familiar with this aspect at all. Thanks tho, this seems like the right track for sure – rodling Dec 29 '13 at 22:38
1

You will need to convert your array (e.g. `Decimal` to `int`), or use a custom JSON serializer to handle the conversion on the fly (it's really not that complicated). Please update your question with an example of your array. – Nicolas Cortot Dec 29 '13 at 22:41
Now there is some witchcraft going on. So `var data = google.visualization.arrayToDataTable([['X', 'Y', 'Z'], [1, 2, 3], [4, 5, 6]])` works fine but when i do `google.visualization.arrayToDataTable({{array}}) with data like `[["X", "Y", "Z"], [13.0, 6.0, 13.0], [207.0, 18.0, 129.0]]` I get nothing. That is a snippet from print in `html`. Data seems to be all correct and I pass column names... but nothing – rodling Dec 30 '13 at 16:03
Fixed it! Needed to change `{{array}}` to `{{array|safe}}` – rodling Dec 30 '13 at 17:13
I was wondering if it is possible to use arrayToDataTable to create a positive/negative column bar chart? I have successfully passed data from view to draw the chart, but can't seem to draw a normal column chart, but struggling to produce a positive/negative column chart. Someone take this to chat. – almost a beginner Sep 26 '16 at 11:30

Passing data to Google Charts with Django

1 Answers1