Django jquery flot chart несколько серий

Question

Я использую Flot для диаграммы в своем приложении Django. Я хочу каждый день рисовать диаграмму с множеством серий данных (диаграмма строк). Каждый день серийный номер может меняться, и я не знаю, как справиться с этим с помощью флота. Мой код является более или менее это:

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 = []; 
{% for x, y in data_day_1 %} 
data1.push([{{x}},{{y}}]) 
{% endfor %} 

var data2 = []; 
{% for 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); 
});  

Еще один день я мог бы иметь другой набор (например, data_day_3) и не знаете, как это сделать. Как я могу управлять динамикой передачи данных и дизайна новой строки? Спасибо за вашу помощь.

Answer 1

Вы можете кодировать данные в формате JSON:

from django.utils import simplejson as 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)}) 

и в шаблоне просто использовать JSON как код JavaScript:

var chart_data = {{ charts|safe }}; 

$.plot($('#site_statistics'), chart_data); 

Вы будете иметь структуру data_all_days в коде JS и будет анализировать его с помощью цикла. Читайте об jquery.each.

При запуске этого кода откройте его в Chrome или FireFox и откройте инструменты разработчика (Ctrl + I или F12) и увидите консоль отладки, и он покажет, есть ли ошибки в JavaScript.

|safe - это шаблонный фильтр, предотвращающий html-код.