2

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.

S. Pynewb22
  • 113
  • 3
  • 10

0 Answers0