Difference Chart.js between points

Question

I cannot figure out how (or if possible) to create a space in the line chart in chart.js.

Example:

I have data for each year:

2010|20.3 2011|-1 2012|21.4 2013|26.5 

-1 represents a year without data. In this case, there should only be a line connecting 2012 and 2013.

How it's done? I managed to hide the point, but I can’t hide the lines connecting 2011 without deleting the entire line connecting the other points.

Answer 1

EDIT: here is the fill version working http://jsfiddle.net/leighking2/sLgefm04/6/

Thus, one way to do this is to extend the line graph. The only problem is that you need to override the entire initialization method so that all points are saved correctly. Here is a fiddle showing its own graph that does what you describe http://jsfiddle.net/leighking2/sLgefm04/

important bits that were changed from the original graphic, I put large blocks of comments, so here are the main points, in the example o they used null to represent spaces, but it could just be replaced with -1

in the initialization method, the data is processed and included in the points, this is where the change should occur to allow the missing data to still be included

 helpers.each(dataset.data, function(dataPoint, index) { /** * * Check for datapoints that are null */ if (helpers.isNumber(dataPoint) || dataPoint === null) { //Add a new point for each piece of data, passing any required data to draw. datasetObject.points.push(new this.PointClass({ /** * add ignore field so we can skip them later * */ ignore: dataPoint === null, value: dataPoint, label: data.labels[index], datasetLabel: dataset.label, strokeColor: dataset.pointStrokeColor, fillColor: dataset.pointColor, highlightFill: dataset.pointHighlightFill || dataset.pointColor, highlightStroke: dataset.pointHighlightStroke || dataset.pointStrokeColor })); } }, this); 

then in the drawing method, whenever we are at a data point that we want to ignore or just past, we move the pen and not draw

  helpers.each(dataset.points, function(point, index) { /** * no longer draw if the last point was ignore (as we don;t have anything to draw from) * or if this point is ignore * or if it the first */ if (index > 0 && !dataset.points[index - 1].ignore && !point.ignore) { if (this.options.bezierCurve) { ctx.bezierCurveTo( dataset.points[index - 1].controlPoints.outer.x, dataset.points[index - 1].controlPoints.outer.y, point.controlPoints.inner.x, point.controlPoints.inner.y, point.x, point.y ); } else { ctx.lineTo(point.x, point.y); } } else if (index === 0 || dataset.points[index - 1].ignore) { ctx.moveTo(point.x, point.y); } }, this); 

the only problem with this was the filling looking proper funky, so I commented on this and this is just a line graph.

Answer 2

Now you can do this by setting the spanGaps property to true in the dataset array.

http://www.chartjs.org/docs/latest/charts/line.html