score:30

Accepted answer

in chartjs, label is a category cartesian axis. since you mentioned linear interpolation in your code, i assume the strings like 2017-01-06 18:39:30 are not categories, they represent the numeric values of the x-axis. so we need to inform chartjs that the strings in the x axis are actually time. we do this in the scale options.

var s1 = {
  label: 's1',
  bordercolor: 'blue',
  data: [
    { x: '2017-01-06 18:39:30', y: 100 },
    { x: '2017-01-07 18:39:28', y: 101 },
  ]
};

var s2 = {
  label: 's2',
  bordercolor: 'red',
  data: [
    { x: '2017-01-07 18:00:00', y: 90 },
    { x: '2017-01-08 18:00:00', y: 105 },
  ]
};

var ctx = document.getelementbyid('mychart').getcontext('2d');
var chart = new chart(ctx, {
  type: 'line',
  data: { datasets: [s1, s2] },
  options: {
    scales: {
      xaxes: [{
        type: 'time'
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.1/chart.min.js"></script>
<canvas id="mychart"></canvas>

you can find more information in chart.js documentation.

score:4

you can have data of the form [{x:"value", y:"value"}] when your graph is of type scatter.

so to make your graph work, do this.

var canvas = document.getelementbyid("graph");
var s1 = [{x:"2017-01-06 18:39:30",y:"100"},{x:"2017-01-07 18:39:28",y:"101"}];
var s2 = [{x:"2017-01-07 18:00:00",y:"90"},{x:"2017-01-08 18:00:00",y:"105"}];

var graphparams = {
	type:"scatter",
	data:{
		datasets: [{
			label:"series 1",
			data:s1,
			bordercolor:"red",
			backgroundcolor:"transparent",
		},
		{
			label:"series 2",
			data:s2,
			bordercolor:"blue",
			backgroundcolor:"transparent",
		}],
	},
	options:{
		maintainaspectratio:false,
		responsive:false,	
		scales:{
			xaxes:[{
				type:"time",
				distribution: "series",
			}],
		}
	}

}
ctx = new chart(canvas, graphparams);
<canvas id="graph" height="500" width="700"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.2.1/chart.bundle.min.js"></script>


Related Query

More Query from same tag