title: Create Line Chart and populate with database information
body: <p>I want to create a line chart on my html, and the information has to be from the database. </p>
  
  <p>This is the view:</p>
  
  <pre><code>def data(request, id):
      return render(request, 'interface/data.html', {'user_id': id})
  </code></pre>
  
  <p>This user_id, is the primary key of the model User. This user has multiple 'Data'. The data model is the following:</p>
  
  <pre><code>class Data(models.Model):
      user = models.ForeignKey(User, on_delete=models.CASCADE)
      timestamp = models.IntegerField(default=0)
      x = models.IntegerField(default=0)
      y = models.IntegerField(default=0)
      z = models.IntegerField(default=0)
  </code></pre>
  
  <p>And this is the html:</p>
  
  <pre><code>{% extends './default.html' %}
  {% block child_content %}
  
  &lt;body&gt;
      &lt;h2 class="square_margin" style="text-align:center"&gt; Información paciente: &lt;strong&gt; {{ user_id }} &lt;/strong&gt; &lt;/h2&gt;
  
      &lt;!-- HERE GOES THE LINE CHART --&gt;
  
      &lt;form class="square square_margin"&gt; &lt;button class="btn btn-warning btn-md btn-block" formaction="{% url 'interface:modify' user_id %}"&gt; Modificar Ajustes Paciente &lt;/button&gt;&lt;/form&gt;
  &lt;/body&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>I want to populate that line chart with the Data information of that User. </p>
  
  <p>On the X axis is going to be the time (Data has a timestamp). And the Y axis the acceleration, that is represented by x,y,z from the Data model. </p>
  
  <p>How I can do that with <a href="http://www.chartjs.org" rel="nofollow noreferrer">chart.js</a></p>
  
  <p>I need something like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/C8PZz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C8PZz.png" alt="enter image description here"></a></p>