context_report.py

new_candidates = CompanyCandidate.objects.filter(company=obj,date__range=[date_initial, date_end])
truncate_newcand = connection.ops.date_trunc_sql('month', 'date')
context['new_candidates_total'] = len(new_candidates)
context['new_candidates_ext'] = new_candidates.extra({'month': truncate_newcand}).values(
    'month').annotate(jcount=Count('pk')).order_by('month')

gistfile1.txt

<script type="text/javascript" src="{% static 'company/js/tableExport.js' %}"></script>
<script type="text/javascript" src="{% static 'company/js/jquery.base64.js' %}"></script>
<script type="text/javascript" src="{% static 'combo/js/Chart.js' %}"></script>
<script src="{% static 'live/js/moment.min.js' %}"></script>
<script type="text/javascript">
ar ncc = document.getElementById("NewCandChart");
	var ncc_myChart = new Chart(ncc, {
	    type: 'bar',
	    data: {
	        labels: [
				{% with new_candidates as cand %}
					{% for i in new_candidates_ext %}
						moment("{% language 'en' %}{{ i.month }}{% endlanguage %}", 'MMM DD YYYY hh a').add(1, 'month').format('MM/YYYY'),
					{% endfor %}
				{% endwith %}
			],
	        datasets: [{
	            label: '{% trans "Novos Candidatos" %}',
	            data: [
					{% with new_candidates as cand %}
						{% for i in new_candidates_ext %}
							{{ i.jcount }},
						{% endfor %}
					{% endwith %}
				],
	            backgroundColor: [
					{% for i in date_result %}
	                'rgba(75, 192, 192, 1)',
					{% endfor %}
	            ],
	        }]
	    },
	    options: {
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 20,
                    bottom: 0
                }
            },
            responsive: true,
	        scales: {
	            yAxes: [{
	                ticks: {
	                    beginAtZero:true
	                }
	            }]
	        },
			title: {
				padding:20,
				display: true,
				position: 'top',
				fontSize: 16,
				text: '{% trans "Novos Candidatos" %}' + ': {{ new_candidates_total }}',
			},
			legend: {
				display: false
			},
			tooltips: {
				enabled: false,
			},
			animation: {
			    duration: 1,
		        onComplete: function () {
		            var chartInstance = this.chart,
		            ctx = chartInstance.ctx;
		            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
		            ctx.textAlign = 'center';
		            ctx.textBaseline = 'bottom';
					ctx.fillStyle = '#333';

		            this.data.datasets.forEach(function (dataset, i) {
		                var meta = chartInstance.controller.getDatasetMeta(i);
		                meta.data.forEach(function (bar, index) {
		                    var data = dataset.data[index];
		                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
		                });
		            });
		        }
		    }
	    }
	});
  </script>

report.html

<div class='row' style="margin-top:20px">
    <div class='col-md-6'>
      <canvas id="NewCandChart" width="300" height="150"></canvas>
    </div><!-- end col -->
    <div class='col-md-6'>
      <canvas id="HiredCandChart" width="300" height="150"></canvas>
    </div><!-- end col -->
  </div><!-- end row -->

  {% if date_initial and date_end %}
  <div class='row' style="margin-top:40px">
    <div class='col-md-6' align="center">
      <a href="{% url 'export_data_newcandidates' %}?date_initial={{ date_initial|date:"Y-m-d" }}&date_end={{ date_end|date:"Y-m-d" }}" class='btn btn-sm btn-success' target='_blank'>{% trans 'Download Novos Candidatos' %}</a>
    </div><!-- end col -->
    <div class='col-md-6' align="center">
      <a href="{% url 'export_data_hired' %}?date_initial={{ date_initial|date:"Y-m-d" }}&date_end={{ date_end|date:"Y-m-d" }}" class='btn btn-sm btn-success' target='_blank'>{% trans 'Download Contratados' %}</a>
    </div><!-- end col -->
</div><!-- end row -->
{% endif %}
<hr>