title: Django and ChartJS
body: <p>I'm trying to understand if it it's possible to incorporate dynamic data into a Django Chart JS architecture.  I went through a couple of tutorials and ultimately got Django to work with ChartJS and it's very good when I'm able to hard code values and then display the related graphs.  What I'm ultimately trying to do is this same exercise with dynamic data from my database.  I found this identical question in SO, <a href="https://stackoverflow.com/questions/47575896/dynamic-chart-using-django-and-chart-js#_=_">https://stackoverflow.com/questions/47575896/dynamic-chart-using-django-and-chart-js#<em>=</em></a> but it wasn't answered by anyone.  This is exactly what I'm trying to achieve.  I've explore serializers a bit, do I need to serialize the data first?  Thanks in advance for your thoughts and feedback.</p>
  
  <p>Per the feedback, I have added context to the chart in question but the data is still not coming through.  Here is my view:</p>
  
  <pre><code>class ChartView(LoginRequiredMixin, TemplateView):
  
      model = Myobject 
      template_name = 'director/chart.html'
  
        def get_context_data(self, **kwargs):
            context = super(ChartView, self).get_context_data(**kwargs)  
            myobject = Myobject.objects.filter(field__in=self.request.user.userprofile.field.all())
            print(myobject)
            context['myobject'] = myobject
            return context
  </code></pre>
  
  <p>I'm just getting a blank screen, no chart at all, suggesting that something is obviously amiss.  Do I need to make additional changes to the Javascript in order to tell it about the object?  My assumption is no, that I'm passing this information view the context_data.</p>
  
  <p>I'm also using Ajax, so I'm not sure if that is a complicating factor.  Here is my javascript.</p>
  
  <pre><code>&lt;script&gt;
  var endpoint = '{% url "myobject:chart_data" %}'
  var defaultData = [];
  var labels = [];
  $.ajax({
      method: "GET",
      credentials: 'same-origin',
      url: endpoint,
      success: function(data){
          labels = data.labels
          defaultData = data.default
          var ctx = document.getElementById("myChart");
          var myChart = new Chart(ctx, {
              type: 'pie',
              data: {
                  labels: [{% for i in myobject %}{{ i.labels }},{% endfor %}],
                  datasets: [{
                      data: [{% for i in myobject %}{{ i.data }},{% endfor %}]
                      backgroundColor: [
                          'rgba(255, 99, 132, 0.2)',
                          'rgba(153, 102, 255, 0.2)',
                      ],
                      borderColor: [
                          'rgba(255,99,132,1)',
                          'rgba(153, 102, 255, 1)',
                      ],
                      borderWidth: 1
                  }]
              }
          })
      },
      error: function(error_data){
          console.log("error")
          console.log(error_data)
      }
  })
  &lt;/script&gt;
  </code></pre>