using django-nvd3 for charting, chart not showing
Question
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>
2 answers
solution1
1 2013-12-25 20:53:06
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)
solution2
0 ACCPTED 2013-12-25 19:04:27
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.