CODEWITHSUNDEEP
javascriptdjangocharts
larapsodia
larapsodia

Reputation: 624

Javascript Pie Chart in Django App - Problems displaying dynamic data

I can't figure this out: I've got a Django application, and I have a little JavaScript code on the index page's template to make a pie chart. I don't really know JavaScript, but got a bit of code from somewhere and it works. My problem is, the code works when when I type the data in directly, but when I try to get the data dynamically, the pie chart disappears.

The thing that confuses me is that, when I look at the page source, the data is there. It has successfully pulled it from the database and put it in the correct format for the chart data. So it looks like it should be working.

Below I have the page source: the first lines of data are the dynamically-produced ones, then the ones after that (that are commented out) are the statically-typed ones. If I comment out the dynamic ones, and un-comment the static ones, the pie chart is there. Vis-versa, and it disappears. The two sets of data look exactly the same to me -- what's going one?

$(function () {
    // data
    var data = [

        { label: "Blogs",  data: 87102},

        { label: "Conversation (Phone)",  data: 2652},

        { label: "Folktales",  data: 47981},

        { label: "Internet Forums",  data: 75900},

        { label: "Jokes",  data: 5833},

        { label: "Literature",  data: None},

        { label: "Opinion",  data: 19231},

        { label: "Plays",  data: 9512},

        { label: "Poem",  data: 404},

        { label: "Political Speeches",  data: 733},

        { label: "Proverbs",  data: 1081},

        { label: "Radio",  data: 13774},

        { label: "Recipes",  data: 215},

        { label: "Songs",  data: 3161},

        { label: "Sports",  data: 8732},

        { label: "Television (Drama)",  data: 142029},

        { label: "Web",  data: 336919},

        // { label: "Web",  data: 337972},
        // { label: "Television",  data: 142029},
        // { label: "Blogs",  data: 86049},
        // { label: "Internet Forums",  data: 74058},
        // { label: "Folktales",  data: 30698},
        // { label: "Opinion",  data: 19231},
        // { label: "Plays",  data: 9512},
        // { label: "Sports",  data: 8732},
        // { label: "Radio (News)",  data: 7438},
        // { label: "Radio (Interviews)",  data: 6286},
        // { label: "Jokes",  data: 5833},
        // { label: "Songs",  data: 3161},
        // { label: "Conversation (Phone)",  data: 2652},
        // { label: "Proverbs",  data: 1081},
        // { label: "Political Speeches",  data: 733},
        // { label: "Poem",  data: 404},
        // { label: "Recipes",  data: 215},
        // { label: "Radio (Listener Responses)",  data: 53},

    ];

Here's the full code for the chart, in case you need it:

{% block javascript %}
        <script language="javascript" type="text/javascript" src="/media/js/flot/jquery.flot.js"></script>
        <script language="javascript" type="text/javascript" src="/media/js/flot/jquery.flot.pie.js"></script>

        <script type="text/javascript">
$(function () {
    // data
    var data = [
        {% for cat,count in cat_wordcount %}
        { label: "{{ cat }}",  data: {{ count }}},
        {% endfor %}
        // { label: "Web",  data: 337972},
        // { label: "Television",  data: 142029},
        // { label: "Blogs",  data: 86049},
        // { label: "Internet Forums",  data: 74058},
        // { label: "Folktales",  data: 30698},
        // { label: "Opinion",  data: 19231},
        // { label: "Plays",  data: 9512},
        // { label: "Sports",  data: 8732},
        // { label: "Radio (News)",  data: 7438},
        // { label: "Radio (Interviews)",  data: 6286},
        // { label: "Jokes",  data: 5833},
        // { label: "Songs",  data: 3161},
        // { label: "Conversation (Phone)",  data: 2652},
        // { label: "Proverbs",  data: 1081},
        // { label: "Political Speeches",  data: 733},
        // { label: "Poem",  data: 404},
        // { label: "Recipes",  data: 215},
        // { label: "Radio (Listener Responses)",  data: 53},

    ];

    var series = Math.floor(Math.random()*10)+1;

    // GRAPH 7
     $.plot($("#graph7"), data,
    {
            series: {
                pie: {
                    show: true,
                    combine: {
                        color: '#999',
                        threshold: 0.03
                    }
                }
            },
            legend: {
                show: false
            }
    });

});

Upvotes: 0

Views: 610

Answers (1)

atc
atc

Reputation: 605

I think the problem is at 

{ label: "Literature",  data: None},

None is not a valid js expression

Edit: To avoid the None problema you should have something like this at your template:

{ label: "{{ cat }}",  data: {% if count %} {{ count }}} {% else %} 0 {% endif %},

Upvotes: 1

Related Questions