Generate multiple line charts in Django with ChartJS

Question

(my english is not good) i'm working in Django, to draw some graph in function of my modules. ie: if i have 2 modules, i want 2 charts , if 8 modules, 8 charts. Modules are integreted in a plugin. so i can list all modules found in a plugin. i did this in Django:

def plugin_graph(request, hub_uid, plugin_uid):
request.session['is_admin'] = True
hub = Hub.objects.get(mac=hub_uid)
fields = []
if request.method == 'GET':
    if 'field' in request.GET:
        fields.append(request.GET['field'])
plugin = Plugin.objects.get(uid=plugin_uid, hub=Hub.objects.get(mac=hub_uid))
#on recupere lensemble desmodules de ce plug
modules = plugin.get_modules_list()
#pour chak module, tracer son graph
for m in modules:
    modules_list = {'uid':m.uid,
        'name':m.name,
        'version':m.version,
        'type':m.type,
        'time':m.last_time(),
        'rssi':m.rssi(),
        'status_icon':m.status_icon()}
    module = Module.objects.get(uid=m.uid, plugin=Plugin.objects.get(uid=plugin_uid, hub=Hub.objects.get(mac=hub_uid)))
    historic = sorted(ModuleDocument.objects.filter(module=module), key=getKey)
    values = get_graph_values(historic=historic, dates=None, fields=fields)
    print values
    field = None if len(fields) < 1 else fields[0]
return render(request, "admin/graph2.html",
        {
            'values': values,
            'hub': hub_uid,
            'plugin': plugin_uid,
            'uid': m.uid,
            'module': module,
            'fields': module.get_number_fields(),
            'field': field,
            'level': 'module',
        }
    )

After recovering all my modules i draw the charts like that in javascript:

   <script>
  var ctx = document.querySelector("#chart");
  var data = JSON.parse('{{ values }}'.replace(/&quot;/g, '"'));
  var labels = [];
  var values = [];
  var beginAtZero = true;
  for (obj in data) {
    labels.push(data[obj].x);
    values.push(data[obj].y);
    if (data[obj].y < 0) {
      beginAtZero = false;
    }
  }
  var lineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: "{{field}}",
          data: values,
          borderColor: '#97168F'
        }]
      },
      options: {
         scales: {
            xAxes: [{
                time: {
                    unit: 'day'
                }
            }], 
            yAxes: [{
               ticks: {
                   beginAtZero:beginAtZero
               }
            }]
         }
     }
  });
</script>

My problem is just one chart is printed. i would like to put it in a for loop to recuperate all data & labels of each module to draw normally all charts i want.

Thank u for your help

Answer 1

You need to utilise the forloop.counter method in the django template to dynamically name a number of items, otherwise the charts will just get overwritten each time and you are just left with the last chart. Its worth noting that I include this code in the block content not a specific js block.

In the example below, the items that are dynamically named are;

• The container div

<div id = 'emg-{{forloop.counter}}'>

• The canvas

<canvas id="myChart-{{forloop.counter}}">

• The chart JS function name

var func_name = "container-{{forloop.counter}}";
func_name = new Chart(
    document.getElementById('myChart-{{forloop.counter}}'),{
    type: 'scatter', 

I've included the full code below. I appreciate my example is different from your posted code, but it demonstrates the concept of dynamically creating certain elements.

    {% for time, name_list, value_list, latitude_list, longitude_list, polyline_list in data %}
    {% with forloop.counter as track_object_counter %}
    <div id = 'emg-{{forloop.counter}}'>
    {% for item in emg_data %}
    {% if item.loop_id == track_object_counter %}
    <div id = "emg-plot" style="height:15rem; padding-top: 1rem;">
      <canvas id="myChart-{{forloop.counter}}">
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
          var y_data  = {{item.data|strip_apostrophe}}
          var x_data = '{{item.name}}'

          var func_name = "container-{{forloop.counter}}";
          func_name = new Chart(
            document.getElementById('myChart-{{forloop.counter}}'),{
              type: 'scatter',
              data: {
                datasets: [{
                  showLine: true,
                  label: x_data,
                  data:  y_data,
                  backgroundColor: 'rgba(141,49,123,0.7)',
                  borderWidth: 2,
                  borderColor: 'rgba(141,49,123,0.7)'
                }],
              },                              
          });
        </script>
      </canvas>
    </div>
    {% endif %}
    {% endfor %}
    </div>
    {% endwith %}
    {% endfor %}