X-axis of Chart.js not taking type : 'time'

Question

I have been trying to plot time series data (from a temperature sensor) using the Chart.js library. The python application uses Flask to pass lists of values and labels to the .html template file.

After some iterations, I managed to get the labels in the right time format - which are now processed by "new Date ()" by chart- and seen as valid dates on the plotted chart X axis ticks.

However readings are equally spaced on X axis(scale distribution is 'linear'), and not as per time gaps. The format of printing ticks also needs to be truncated to HH:mm:ss (as the data range will be within a few hours)

Several answered questions suggest setting options:{scales:{xAxes:[type: as 'time' .. and then resetting various other time scale parameters. However, my code breaks down (chart stops rendering) the moment I add the commented line setting xAxes type to time. Why?? especially as the labels seem to be recognized as date-time stamps!?

I have tried using available code snippets and reading the chart.js documentation - but the solution evaded me. Any suggestions to format the time axis properly, with suitable tick distribution and labels would be greatly appreciated. I am new to javascript, and stackoverflow - so kindly pardon any obvious mistakes and provide guidance. Thanks in advance

Here is the chart being plotted with date-time stamps along X axis

The following is the JS code that produces the chart. It reads the data received from a Python Flask app. The line not working has been commented out:

<script>

 new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels : [{% for item in labels %}
               new Date("{{item}}"),
              {% endfor %}],
    datasets: [{ 
        data : [{% for item in values %}
                      {{item}},
                    {% endfor %}],
        label: "degrees centigrade",
        borderColor: "#3e95cd",
        fill: false
      }
    ]
  },
  options:{
    scales:{xAxes:[

//        type:'time'    //THIS BREAKS DOWN when uncommented

                  ]},
    title: {
      display: true,
      text: 'Temperature Sensor 1'
    	}   
  }
 });
 
</script>

Just for completeness - The Python Flask data that is being sent is as below:

@app.route('/trial', methods=['GET'])
def trial():
    temps_alt = [30.05,30.0,29.5,29.2,30.2,30.50]
    times_alt = ['2013-02-08 09:30:26', '2013-02-08 09:30:36', '2013-02-08 09:30:56',
                 '2013-02-08 09:33:26', '2013-02-08 09:34:26', '2013-02-08 09:34:56']
    return flask.render_template('chart_ts_curve.html', values=temps_alt, labels=times_alt)

nshimiye nshimiye · Accepted Answer · 2018-12-06T22:11:41

3

votes

You forgot to add brackets around.

Complete snippet can be found here

X-axis of Chart.js not taking type : 'time'

1 Answers