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

Popular posts from this blog

javascript - Count length of each class -

What design pattern is this code in Javascript? -

hadoop - Restrict secondarynamenode to be installed and run on any other node in the cluster -