Django jquery flot chart multiple series -
i use flot chart in django app. want draw every day chart has many data series (lines chart). each day, serial number change , don't know how handle flot. code more or less this:
test.py
data_day_1 = [[1,56],[2,65],[3,45]] data_day_2 = [[1,45],[2,23],[3,89]] return render_to_response('test.html', {'data_day_1': data_day_1, 'data_day_2': data_day_2, }, context_instance=requestcontext(request))
test.html
<div class="portlet-body"> <div id="site_statistics" class="chart"></div> </div> <script type="text/javascript"> var data1 = []; {% x, y in data_day_1 %} data1.push([{{x}},{{y}}]) {% endfor %} var data2 = []; {% x, y in data_day_2 %} data2.push([{{x}},{{y}}]) {% endfor %} $(function () { var options = { lines: {show: true}, } $.plot($("#site_statistics"), [{data: data1, color: "#454d7d", points: {show: true}, label: "data_day_1", }, {data: data2, color: "#454d7d", points: {show: true}, label: "data_day_2", } ],options); });
another day might have set (eg data_day_3) , not know how do. how can manage transfer of data , design of new line dynamically? help.
you can encode data in json:
from django.utils import simplejson json data_all_days = [ {'label': 'day 1', 'data': [[1, 4], [1,8], [9, 8]], 'color': '#000', }, {'label': 'day 2', 'data':..., 'color': ..., }, ...] render_to_response( ... {'charts': json.dumps(data_all_days)})
and in template use json javascript code:
var chart_data = {{ charts|safe }}; $.plot($('#site_statistics'), chart_data);
you'll have structure of data_all_days
in js code , parse cycle. read on jquery.each.
while running code, open in chrome or firefox , open developer tools (ctrl+i or f12) , see debug console, show if there errors in javascript.
|safe
template filter prevent code being html-quoted.
Comments
Post a Comment