CODEWITHSUNDEEP
javascriptpythondjangonvd3.js
simp
simp

Reputation: 117

using django-nvd3 for charting, chart not showing

So i've been trying to get a chart to show in django with django-nvd3. it's basically the same code as in django-nvd3 introduction. But it doesn't show a chart, it only prints the javascript needed to show the chart. I'm hoping someone can point me to the right direction.
I can see that the script is found. Firebug shows the content of d3.min.js and nv.d3.min.js in the header.
I also tried using jquery just to see if i could get any javascript working, and that worked.

view

def temp_chart_view(request):
    xdata = ["Apple", "Apricot", "avocado"]
    ydata = [10, 20, 30]
    chartdata = {'x': xdata, 'y': ydata}
    charttype = "pieChart"
    chartcontainer = 'piechart_container'
    data = {
        'charttype': charttype,
        'chartdata': chartdata,
        'chartcontainer': chartcontainer,
        'extra': {
            'x_is_date': False,
            'x_axis_format': '',
            'tag_script_js': False,
            'jquery_on_ready': False,
        }
    }
    return render_to_response('temperatures/chart.html', data)

urlpattern

url(r'chart/$', views.temp_chart_view, name='chart'),

temperatures/chart.html

{% load nvd3_tags %}
<head>
    {% include_chart_jscss %}
    {% load_chart charttype chartdata chartcontainer extra %}
</head>
<body>
    <h1>tere</h1>

    {% include_container chartcontainer 400 600 %}
</body>

output HTML(from firebug)

<head>
    <link rel="stylesheet" type="text/css" 
        href="/static/nvd3/src/nv.d3.css" media="all">
    <script type="text/javascript" src="/static/d3/d3.min.js">
    <script type="text/javascript" src="/static/nvd3/nv.d3.min.js">
</head>
<body>
    nv.addGraph(function() {
        var chart = nv.models.pieChart();
        chart.x(function(d) { return d.label })
        .y(function(d) { return d.value });
        chart.height(450);

        chart.showLegend(true);
        chart.showLabels(true);
        d3.select('#piechart_container svg')
        .datum(data_piechart_container[0].values)
        .transition().duration(500)
        .attr('height', 450)
        .call(chart);

        return chart;
    });
    data_piechart_container=[{"values": [
        {"value": 10, "label": "Apple"}, 
        {"value": 20, "label": "Apricot"}, 
        {"value": 30, "label": "avocado"}
    ], "key": "Serie 1"}];


    <h1>tere</h1>

    <div id="piechart_container">
        <svg style="width:600px;height:400px;"></svg>
    </div>
</body>

Answer by bnjnm(in chart.html)

<script>{% load_chart charttype chartdata chartcontainer extra %}</script>

Upvotes: 4

Views: 2027

Answers (2)

areski
areski

Reputation: 391

I just update the documentation to rectify this error. django-nvd3 doesn't include tag script by default in order to offer more flexibility where to add the javascript code.

There is an extra settings that can set in order to output the tag, it's called tag_script_js.

This code should work fine:

xdata = ["Apple", "Apricot", "Avocado", "Banana", "Boysenberries", "Blueberries", "Dates", "Grapefruit", "Kiwi", "Lemon"]
ydata = [52, 48, 160, 94, 75, 71, 490, 82, 46, 17]
chartdata = {'x': xdata, 'y': ydata}
charttype = "pieChart"
chartcontainer = 'piechart_container'
data = {
    'charttype': charttype,
    'chartdata': chartdata,
    'chartcontainer': chartcontainer,
    'extra': {
        'x_is_date': False,
        'x_axis_format': '',
        'tag_script_js': True,
        'jquery_on_ready': False,
    }
}
return render_to_response('piechart.html', data)

Upvotes: 1

bnjmn
bnjmn

Reputation: 4584

It seems that the django-nvd3 is not automatically wrapping the javascript as a script.

Try surrounding the load_chart template tag in templates/chart.html with a <script> tag:

<script>{% load_chart charttype chartdata chartcontainer extra %}</script>

Upvotes: 0

Related Questions