Python data from Django to Javascript

Question

I am busy on a Django app which analyzes a variety of data (largely using pandas) and then displays the results using Google charts.

Im having trouble figuring out the best way to pass my data from the django view.py which will generally be in a Pandas dataframe or a dict, through to be used in the template files (which use javascript for the google charts).

Here's some code showing a javascript function for displaying one of the charts. In this example i've hard coded the data into the chart (ie: The years and the sales have been manually typed in). However what needs to be done is to instead use the data from the pandas dataframe.

function drawChart() {

    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales'],
        ['2004',  1000],
        ['2005',  1170],
        ['2006',  660],
        ['2007',  1030]
    ]);

    var options = {
        title: 'Company Performance',
        hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    }

It's easy enough to pass through single variables or even lists using the django template language {{ var }}. However im not entirely sure how to pass through more complicated dataframes, dicts, etc to be used in javascript functions.

Many thanks.

Do you want to pass data or options or both?

laike9m
– laike9m

2014-11-02 11:57:24 +00:00
Commented Nov 2, 2014 at 11:57 — laike9m
– laike9m, Commented Nov 2, 2014 at 11:57
I want to pass data from a pandas dataframe

darkpool
– darkpool

2014-11-02 11:59:58 +00:00
Commented Nov 2, 2014 at 11:59 — darkpool
– darkpool, Commented Nov 2, 2014 at 11:59

laike9m · Accepted Answer · 2014-11-02 13:05:35Z

2

Is this what you want?

views.py:

import json

def some_view_func(request):
    data = [
        ['Year', 'Sales'],
        ['2004',  1000],
        ['2005',  1170],
        ['2006',  660],
        ['2007',  1030]
    ]
    render(request, 'template.html', {'data': json.dumps(data)})

template.html:

<script>
    var data = google.visualization.arrayToDataTable(JSON.parse({{data}}));
</script>

answered Nov 2, 2014 at 13:05

laike9m

19.6k23 gold badges117 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

darkpool Over a year ago

Thank you for the reply. Unfortunately this doesn't seem to work. My template loads however where the chart should be, there is nothing at all.

laike9m Over a year ago

@darkpool what do you mean there is nothing at all?

darkpool Over a year ago

My template should display a bar chart. That is what the javascript function does. However when trying your suggestion, the bar chart is not displayed. Nothing is displayed, ie: it does not work. If it helps, the code for the google chart that im using is from here: developers.google.com/chart/interactive/docs/gallery/…. So I need to replace the hardcoded year/sales figures with a pandas dataframe passed through from views.py

laike9m Over a year ago

@darkpool There are many possible reasons the chart is not displayed, but I can assure you that data is restored to an Array by JSON.parse({{data}}).You can console.log to check its value.

darkpool Over a year ago

Ok thanks. Well if the chart is showing for you then I guess there must be something im doing wrong. It should be fairly simple. It is probably something with the google function (it uses the google API so I dont know how it works under the hood (developers.google.com/chart/interactive/docs/gallery/…). But all im doing is replacing their year/sales with my own data from views.py. Will have to keep trying. Thanks.

|

abhi · Accepted Answer · 2014-11-02 13:49:16Z

1

this is the way to achieve what I think you want

def view_func(request):
    data =pd.DataFrame(np.random.randn(20, 5)) 

    render(request, 'template.html', {'data': data.to_html()})

See the documentation for extra details on CSS styling and other things.

Also implement data as 'safe' in your template as follows:

{{ data | safe }}

edited Nov 2, 2014 at 13:49

answered Nov 2, 2014 at 13:43

abhi

3666 silver badges17 bronze badges

3 Comments

darkpool Over a year ago

Thank you for trying to help. However my template loads, but there is no bar chart. Nothing is displayed.

abhi Over a year ago

there is a library django-pandas for such kind of work. See it might help

abhi Over a year ago

or skip to.html() in views.py and do this {{ data.to_html(classes="table table-striped") | safe}} in your template

Collectives™ on Stack Overflow

Python data from Django to Javascript

2 Answers 2

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related