Django and apexjs datetime issues

Question

I try to view some date from the DB on an Apex Char it already worked but now I only get Date or Datetime issues so pls somebody can Help me with this.

The Model that I am Using is this:

class Temperature (models.Model):
    temperature = models.DecimalField(max_digits=5,decimal_places=2)
    sensor_id=models.CharField(max_length=50)
    created = models.DateTimeField(auto_now_add=True)

    class Meta:
        ordering = ['created']

Then I build view to get the Data sorted in all last6days ans last week:

def temperature_all_data_view(request):
    data = Temperature.objects.all().values('created', 'temperature')
    data_list = [{'created': entry['created'].isoformat(), 'temperature': entry['temperature']} for entry in data]
    return JsonResponse(data_list, safe=False)
def temperature_last_six_hours_data_view(request):
    six_hours_ago = datetime.now() - timedelta(hours=6)
    data = Temperature.objects.filter(created__gte=six_hours_ago).values('created', 'temperature')
    data_list = [{'created': entry['created'].isoformat(), 'temperature': entry['temperature']} for entry in data]
    return JsonResponse(data_list, safe=False)
def temperature_last_seven_days_data_view(request):
    seven_days_ago = datetime.now() - timedelta(days=7)
    data = Temperature.objects.filter(created__gte=seven_days_ago).values('created', 'temperature')
    data_list = [{'created': entry['created'].isoformat(), 'temperature': entry['temperature']} for entry in data]
    return JsonResponse(data_list, safe=False)

then I fetch the Data in JS and try to sort them into the ApexChart:

let chart = null;

async function fetchData(url) {
  const response = await fetch(url);
  const data = await response.json();

  data.sort((a, b) => new Date(a.created) - new Date(b.created));

  return data;
}

function renderChart(x_data, y_data, html_name) {
  if (chart) {
    chart.destroy();
  }
  
  const options = {
    chart: {
      height: 300,
      type: "area"
    },
    dataLabels: {
      enabled: false
    },
    series: [
      {
        name: "Temperature",
        data: y_data
      }
    ],
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.7,
        opacityTo: 0.9,
        stops: [0, 90, 100]
      }
    },
    xaxis: {
      categories: x_data,
      type: 'datetime'
    }
  };
  
  chart = new ApexCharts(document.querySelector(html_name), options);
  chart.render();
}

async function timeFrameTemperature(period) { 
  let data = null;
  
  if (period.value === 'all') {
    data = await fetchData('all_data_view/');  
  } else if (period.value === 'last_six_hours') {
    data = await fetchData('last_six_hours_data_view/');
  } else if (period.value === 'last_seven_days') {
    data = await fetchData('last_seven_days_data_view/');
  }
  
  const x_data = data.map(entry => new Date(entry.created));
  const y_data = data.map(entry => entry.temperature);

  renderChart(x_data, y_data, "#TemperatureChart");
}

async function Temperature_init() {
  const data = await fetchData('all_data_view/');
  const x_data = data.map(entry => new Date(entry.created));
  const y_data = data.map(entry => entry.temperature);

  renderChart(x_data, y_data, "#TemperatureChart");
}

Temperature_init();

But I see nothing I tried everything but I always get 2 issuses in the Browser log:

Uncaught (in promise) Error: You have provided invalid Date format. Please provide a valid JavaScript Date
    at c (apexcharts:6:122063)
    at t.value (apexcharts:6:123235)
    at t.value (apexcharts:6:125633)
    at t.value (apexcharts:14:37373)
    at t.create (apexcharts:6:4708)
    at apexcharts:14:36373
    at new Promise (<anonymous>)
    at t.value (apexcharts:14:21677)
    at renderChart (area_chart.js:57:9)
    at Temperature_init (area_chart.js:81:3)

and:

area_chart.js:70 Uncaught (in promise) TypeError: Object.prototype.toLocaleString called on null or undefined
    at toLocaleString (<anonymous>)
    at area_chart.js:70:36
    at Array.map (<anonymous>)
    at timeFrameTemperature (area_chart.js:70:23)

Thank you for your Help :) LG Erik

I tried to format the Date for Apex but nothing changed. 1 week ago it worked I tried to get the Time to the right Timezone and then I got this problem.

Django and apexjs datetime issues

0 Answers0