CODEWITHSUNDEEP
pythondjangod3.jschartsnvd3.js
Happy Ahmad
Happy Ahmad

Reputation: 1087

django-nvd3 does not show any graph

I'm still newbie to python 3.4 and django 1.7. I tried to draw a chart using django-nvd3. I tried to run something like:

class Report(TemplateView):
    def report_page(request):
        extra_serie = {}
        xdata = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        ydata = [3, 5, 7, 8, 3, 5, 3, 5, 7, 6, 3, 1]
        chartdata = {
            'x': xdata,
            'name1': 'series 1', 'y1': ydata, 'extra1': extra_serie,
        }
        charttype = "lineChart"
        chartcontainer = 'linechart_container' # container name
        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('Report.html', data)

where Report.html is as follows:

<head>
     {% load nvd3_tags %}
     <script type="application/javascript">{% load_chart charttype chartdata chartcontainer extra %}</script>
</head>
<body>
    <div class="main">
        {% include_container chartcontainer 400 600 %}
    </div>
</body>

but no chart does appear. I read somewhere from areski that: "We use include the Javascript and CSS code for D3/NVD3." So I added these statements to my template:

<link href="{% static "nvd3-master/build/nv.d3.css" %}" rel="stylesheet" type="text/css" media="screen" />
<script src="{% static "D3/d3.js" %}" type="text/javascript"></script>
<script src="{% static "nvd3-master/build/nv.d3.min.js" %}" type="text/javascript"></script>

but still no chart is drawn on my web page! Here is the output HTML:

<head>
    <link href="/static/nvd3-master/build/nv.d3.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="/static/D3/d3.js" type="text/javascript"></script>
    <script src="/static/nvd3-master/build/nv.d3.min.js" type="text/javascript"></script>
    <script type="application/javascript">
    <script>
    data_linechart_container=[{"key": "series 1", "yAxis": "1", "values": [{"y": 3, "x": 1}, {"y": 5, "x": 2}, {"y": 7, "x": 3}, {"y": 8, "x": 4}, {"y": 3, "x": 5}, {"y": 5, "x": 6}, {"y": 3, "x": 7}, {"y": 5, "x": 8}, {"y": 7, "x": 9}, {"y": 6, "x": 10}, {"y": 3, "x": 11}, {"y": 1, "x": 12}]}];
    nv.addGraph(function() {
    var chart = nv.models.lineChart();
    chart.margin({top: 30, right: 60, bottom: 20, left: 60});
    var datum = data_linechart_container;
    chart.color(d3.scale.category20().range());
            chart.yAxis
            .tickFormat(d3.format(',.02f'));
      chart.showLegend(true);
        d3.select('#linechart_container svg')
        .datum(datum)
        .transition().duration(500)
        .attr('height', 450)
        .call(chart);
    });
    </script>
    </script>
</head>
<body>
     <div class="main">
             <div id="linechart_container"><svg style="width:600px;height:400px;"></svg></div>
     </div>
 </body>

Upvotes: 0

Views: 853

Answers (2)

Happy Ahmad
Happy Ahmad

Reputation: 1087

Thanks a lot from Areski Belaid (@areski) that helped me to find the issue. I changed:

    <script type="application/javascript">{% load_chart charttype chartdata chartcontainer extra %}</script>

to:

    {% load_chart charttype chartdata chartcontainer extra %}

And now it works. :))

Upvotes: 0

areski
areski

Reputation: 391

Make sure your static files for NVD3 and D3 are available, then check if there is any type of error in the JS console.

Upvotes: 1

Related Questions