django-nvd3 does not show any graph
Question
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>
2 answers
solution1
1 2015-09-01 16:11:39
确保您的NVD3和D3静态文件可用，然后检查JS控制台中是否存在任何类型的错误。
solution2
0 ACCPTED 2015-09-01 16:35:58
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. :))
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.