Make a start on sparse data for line charts

This commit is contained in:
Nick Downie 2014-07-08 22:40:32 +01:00
parent e25fd5e37c
commit 2f59921f7a

View File

@ -98,19 +98,16 @@
helpers.each(dataset.data,function(dataPoint,index){ helpers.each(dataset.data,function(dataPoint,index){
//Best way to do this? or in draw sequence...?
if (helpers.isNumber(dataPoint)){
//Add a new point for each piece of data, passing any required data to draw. //Add a new point for each piece of data, passing any required data to draw.
datasetObject.points.push(new this.PointClass({ datasetObject.points.push(new this.PointClass({
value : dataPoint, value : dataPoint,
label : data.labels[index], label : data.labels[index],
datasetLabel: dataset.label, datasetLabel: dataset.label,
strokeColor : dataset.pointStrokeColor, strokeColor : dataset.pointStrokeColor,
fillColor : dataset.pointColor, fillColor : dataset.pointColor,
highlightFill : dataset.pointHighlightFill || dataset.pointColor, highlightFill : dataset.pointHighlightFill || dataset.pointColor,
highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
})); }));
}
},this); },this);
this.buildScale(data.labels); this.buildScale(data.labels);
@ -217,17 +214,15 @@
//Map the values array for each of the datasets //Map the values array for each of the datasets
helpers.each(valuesArray,function(value,datasetIndex){ helpers.each(valuesArray,function(value,datasetIndex){
if (helpers.isNumber(value)){ //Add a new point for each piece of data, passing any required data to draw.
//Add a new point for each piece of data, passing any required data to draw. this.datasets[datasetIndex].points.push(new this.PointClass({
this.datasets[datasetIndex].points.push(new this.PointClass({ value : value,
value : value, label : label,
label : label, x: this.scale.calculateX(this.scale.valuesCount+1),
x: this.scale.calculateX(this.scale.valuesCount+1), y: this.scale.endPoint,
y: this.scale.endPoint, strokeColor : this.datasets[datasetIndex].pointStrokeColor,
strokeColor : this.datasets[datasetIndex].pointStrokeColor, fillColor : this.datasets[datasetIndex].pointColor
fillColor : this.datasets[datasetIndex].pointColor }));
}));
}
},this); },this);
this.scale.addXLabel(label); this.scale.addXLabel(label);
@ -264,10 +259,12 @@
//We can use this extra loop to calculate the control points of this dataset also in this loop //We can use this extra loop to calculate the control points of this dataset also in this loop
helpers.each(dataset.points,function(point,index){ helpers.each(dataset.points,function(point,index){
point.transition({ if (helpers.isNumber(point.value)){
y : this.scale.calculateY(point.value), point.transition({
x : this.scale.calculateX(index) y : this.scale.calculateY(point.value),
}, easingDecimal); x : this.scale.calculateX(index)
}, easingDecimal);
}
},this); },this);
@ -296,24 +293,26 @@
ctx.strokeStyle = dataset.strokeColor; ctx.strokeStyle = dataset.strokeColor;
ctx.beginPath(); ctx.beginPath();
helpers.each(dataset.points,function(point,index){ helpers.each(dataset.points,function(point,index){
if (index>0){ if (helpers.isNumber(point.value)){
if(this.options.bezierCurve){ if (index>0){
ctx.bezierCurveTo( if(this.options.bezierCurve){
dataset.points[index-1].controlPoints.outer.x, ctx.bezierCurveTo(
dataset.points[index-1].controlPoints.outer.y, dataset.points[index-1].controlPoints.outer.x,
point.controlPoints.inner.x, dataset.points[index-1].controlPoints.outer.y,
point.controlPoints.inner.y, point.controlPoints.inner.x,
point.x, point.controlPoints.inner.y,
point.y point.x,
); point.y
);
}
else{
ctx.lineTo(point.x,point.y);
}
} }
else{ else{
ctx.lineTo(point.x,point.y); ctx.moveTo(point.x,point.y);
} }
}
else{
ctx.moveTo(point.x,point.y);
} }
},this); },this);
ctx.stroke(); ctx.stroke();
@ -332,7 +331,9 @@
//A little inefficient double looping, but better than the line //A little inefficient double looping, but better than the line
//lagging behind the point positions //lagging behind the point positions
helpers.each(dataset.points,function(point){ helpers.each(dataset.points,function(point){
point.draw(); if (helpers.isNumber(point.value)){
point.draw();
}
}); });
},this); },this);