score:0

Accepted answer

your chart config looks just fine after change type: 'time' to type: 'time'. you can run the version below, which substitutes your python template variables.

here are some other things to check

  • after correcting the type typo, look for console errors.
  • make sure moment.js is loading correctly.
  • check the versions of moment.js and chart.js (example below uses 2.26.0 and 2.9.3 respectively).
  • provide the actual html source (instead of the template), because if it's still broken it implies something wrong with the templating/passing values.

const config = {
  // the type of chart we want to create
  type: 'line', //types: bar, horizontalbar, pie, line, doughnut, radar, polararea

  // the data for our dataset
  data: {
    labels: [new date('2019-12-19t13:36:29-08:00'), new date('2019-12-19t13:36:59-08:00'), new date('2019-12-19t13:37:29-08:00'), new date('2019-12-19t13:37:59-08:00'), new date('2019-12-19t13:38:29-08:00')],
    datasets: [{
      label: 'test string dates',
      backgroundcolor: 'rgba(255, 99, 132, 0)',
      bordercolor: 'rgb(117, 4, 28)',
      borderwidth: 1,
      hoverborderwidth: 3,
      hoverbordercolor: '#000',
      data: [0.05, 0.07, 0.15, 0.08, 0.05],
    }]
  },
  options: {
    title: {
      display: true,
      text: 'test string date time',
      fontsize: 25,
    },
    legend: {
      //display:false //to hide legend
      position: 'right',
      labels: {
        fontcolor: '#000'
      }
    },
    tooltips: {
      //enabled:false,
    },
    scales: {
      yaxes: [{
        scalelabel: {
          display: true,
          labelstring: 'mg/m3',
          fontcolor: '#000',
          fontweight: 'bold',
          fontsize: 25
        }
      }],
      xaxes: [{
        type: 'time',
        time: {
          parser: 'hh:mm:ss a', //these formatting values do nothing, i've tried a few different ones
          unit: 'second', //i have tried minutes and hours too, same result
          displayformats: {
            'millisecond': 'hh:mm:ss a', //i have tried without the 'a' too, same result
            'second': 'hh:mm:ss a',
            'minute': 'hh:mm:ss a',
            'hour': 'hh:mm:ss a',
            'day': 'hh:mm:ss a',
            'week': 'hh:mm:ss a',
            'month': 'hh:mm:ss a',
            'quarter': 'hh:mm:ss a',
            'year': 'hh:mm:ss a',
          }
        },
        ticks: {
          source: 'auto'
        },
        scalelabel: {
          display: true,
          labelstring: 'recording time',
          fontcolor: '#000',
          fontweight: 'bold',
          fontsize: 25
        }
      }]
    },
    responsive: true,
    maintainaspectratio: false,
    elements: {
      point: {
        radius: 0
      },
      line: {
        tension: 0
      }
    },
  }

};

const ctx = document.getelementbyid('canvas').getcontext('2d');
new chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.js"></script>

<body>
  <canvas id="canvas" width="600" height="400"></canvas>
</body>


Related Query

More Query from same tag