score:0

another solution that worked great for me, was to just use the line type for the chart, configure it for using dates for the x axis, and addtionally disable the lines, so that it just looks like a scatterplot.

new chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                x: 2017-07-08t06:15:02-0600,
                y: 23.375
              },{
                x: 2017-07-08t06:20:02-0600,
                y: 23.312
              },{
                x: 2017-07-08t06:25:02-0600,
                y: 23.312
              },{
                x: 2017-07-08t06:30:02-0600,
                y: 23.25
            }]
          },
          options: {
            showline: false,
            scales: {
              x:{
                type: 'time',
                display: true,
                title: {
                  display: true,
                  text: 'date'
                },
              },
            }
          }
       }
    );

i see this as a quite elegant solution. the documentation even specifies:

the scatter chart supports all of the same properties as the line chart. by default, the scatter chart will override the showline property of the line chart to false.

score:7

that advice isn't quite right. the javascript moment.js makes it possible to plat scatter data using dates as the x axis value. for some reason the bundled version in chart.bundle.js wasn't working for me, so i downloaded moment.js directly. i'm using this to setup:

<script src="js/moment.js"></script>
<script src="js/chart.min.js"></script>

and this for my chart.js data details:

data: [
  {x: moment("2017-07-08t06:15:02-0600"), y: 23.375},
  {x: moment("2017-07-08t06:20:02-0600"),y: 23.312},
  {x: moment("2017-07-08t06:25:02-0600"),y: 23.312},
  {x: moment("2017-07-08t06:30:02-0600"),y: 23.25}
],

it's working great!

score:8

according to the documentation of scatter charts:

unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.

so you can't use values like 2017-07-08t06:15:02-0600. you can convert dates into numbers and use them in your data.

in your case:

data: [{
        x: 1499516102000,
        y: 23.375
    }, {
        x: 1499516402000,
        y: 23.312
    }, {
        x: 1499516702000,
        y: 23.312
    }, {
        x: 1499517002000,
        y: 23.25
    }
]

now your xaxes will be with numbers, so you can use a callback to modify xaxes labels.


Related Query