I do fear that similar questions have been asked in the past, however I was not able to derive a solution for my specific issue.
I am sending data from a Django function to Charts.js The chart gets rendered correctly and displays with the exception of the date formatting on the X-Axis.
Django Data:
'''class UnitChartData(APIView):
def get(self, request, format=None):
material_code = request.session['material_code']
plant_code = request.session['plant_code']
qs_mat = DPoList.objects.filter(plant_code=plant_code).filter(material_code=material_code).order_by('delivery_date')
unit_price_list=[]
for items in qs_mat:
if items.gr_received is None or items.invoiced_usd is None:
unit_price = 0
unit_price_list.append(unit_price)
else:
unit_price=items.invoiced_usd/items.gr_received
unit_price_list.append(unit_price)
date_list=[]
for items in qs_mat:
date_list.append(items.delivery_date)
labels = date_list
default_items = unit_price_list
data = {
"labels": labels,
"default": default_items,
}
return Response(data)'''
Chart.js script
'''var endpoint = '/d/api/unitchart/data/'
var defaultData = []
var labels = [];
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
labels = data.labels
defaultData = data.default
setChart()
},
error: function(error_data){
console.log("error")
console.log(error_data)
}
})
function setChart(){
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'PO#',
data: defaultData,
fill: false,
borderColor: [
'rgba(54, 162, 235, 1)',
],
borderWidth: 2
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
min: 2
}
}]
}
}
});
}'''
The Django Datetime object turns into an ISO date format: 2016-08-05T04undefined000Z - this is what gets displayed instead of just the month or date on the X-Axis. I am trying to change that in the Javascript, either in the Charts.js or an additional function. from what I could find on Stackoverflow you can convert the date format through moments.js and in a second step set the xAxis to:
'''options: { scales: { xAxes: { type: 'time' } } }'''
However, I have not been ale to figure out how to do that and certainly not in an efficient way, any help would be greatly appreciated.