带有Django的NVD3图表 - 网页在通话时没有响应

时间:2014-07-24 16:41:56

标签: python django charts nvd3.js

我的django项目中有以下视图;

def ChartView(request):

connection = SQLSeverConnection('MSSQLServerDataSource')

times = connection.getColumnData('DateTimeStamp', 'reqColumn', '2011-01-01 00:00:00.000', '2011-01-21 19:30:00.000')
string_times = []
for theTime in times:
    string_times.append(theTime.DateTimeStamp)

start = string_times[0]
end = string_times[-1]

start_time = int(time.mktime(start.timetuple()))
end_time = int(time.mktime(end.timetuple()))

xdata = range(start_time, end_time, 1)
xdata = map(lambda x: start_time + x * 1000000000, xdata)

ydata = connection.getColumnData('AIKE0G_1_MVAr', 'DunbarGen', '2011-01-01 00:00:00.000', '2011-01-21 19:30:00.000')

tooltip_date = "%d %b %Y %H:%M:%S %p"
extra_serie = {"tooltip": {"y_start": "Value was ", "y_end": " units"},
               "date_format": tooltip_date}

chartdata = {
    'x': xdata,
    'name1': 'series 1', 'y1': ydata, 'extra1': extra_serie,
}

charttype = "lineWithFocusChart"
chartcontainer = 'linewithfocuschart_container' # container name
data = {
    'charttype': charttype,
    'chartdata': chartdata,
    'chartcontainer': chartcontainer,
    'extra': {
        'x_is_date': True,
        'x_axis_format': '%d %b %Y %H',
        'tag_script_js': True,
        'jquery_on_ready': True,
    }
}

pdb.set_trace()

return render_to_response('chart_view.html', data)

没有错误(会导致500页)但是当转到chart_view时页面永远不会加载。

.getColumnData()返回的对象类型是pyodbc.row,我已成功转换为int(我假设nvd3解释了日期时间)

有人可以帮忙吗?这是使用nvd3的好方法吗?如果有更好的方法,那么如果你想提供一个例子,我将非常感激。

模板;

{% load nvd3_tags %}
<head>
    {% include_chart_jscss %}
{# Jquery CDN : Needed when using jquery_on_ready=True #}
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
{% load_chart charttype chartdata chartcontainer extra %}
</head>
<body>
{% include_container chartcontainer 400 '100%' %}
 </body>

谢谢!

1 个答案:

答案 0 :(得分:0)

所以我得到了它,谢天谢地。问题出在我的ydata上。从数据库查询,它采用以下格式;

[(4.4, ), (4.8, ), (4.2, ), (4.0, ), (4.2, ), (4.8, ), (2.0, ), (2.4, ), (3.0, )]

nvd3应该看起来像这样;

[4.4, 4.8, 4.2, 4.0, 4.2, 4.8, 2.0, 2.4, 3.0]

执行转换;

ydata_badForm = connection.getColumnData('<column>', '<table>', '2011-01-01 00:00:00.000', '2011-01-21 19:30:00.000')

ydata = map(lambda x: x[0], ydata_badForm)

这会创建一个名为ydata的新列表,其中ydata的元组第一个元素被写入每个索引。

从这里开始,ydata采用了正确的列表格式(不是元组列表),刷新后得到了一些不错的图表!