javascript - Chartjs line graph dataset with offset -
how 1 enter datasets offset chart.js, first x values not drawn? e.g 
i cannot seem wrap head around :/
one way can create custom graph allow null values, in previous question answered applied same technique can used here.
in answer explain how have achieved gaps https://stackoverflow.com/a/25319120/2737978
the difference here rather having gaps in 1 datasets data, gaps can used create desired effect.
when setting data make sure 2 datasets lineup labels so,
//labels applied both datasets labels: ["january", "february", "march", "april", "may", "june", "july"], //data sets lineup labels data: [65, 34, 21, null, null, null, null] data: [null, null, 88, 19, 86, 27, 90] fiddle http://jsfiddle.net/leighking2/yoqfwt8o/
the extend line graph
chart.types.line.extend({ // passing in name registers chart in chart namespace in same way name: "missingline", initialize: function(data) { var helpers = chart.helpers; //declare extension of default point, cater options passed in constructor this.pointclass = chart.point.extend({ strokewidth: this.options.pointdotstrokewidth, radius: this.options.pointdotradius, display: this.options.pointdot, hitdetectionradius: this.options.pointhitdetectionradius, ctx: this.chart.ctx, inrange: function(mousex) { return (math.pow(mousex - this.x, 2) < math.pow(this.radius + this.hitdetectionradius, 2)); } }); this.datasets = []; //set tooltip events on chart if (this.options.showtooltips) { helpers.bindevents(this, this.options.tooltipevents, function(evt) { var activepoints = (evt.type !== 'mouseout') ? this.getpointsatevent(evt) : []; this.eachpoints(function(point) { point.restore(['fillcolor', 'strokecolor']); }); helpers.each(activepoints, function(activepoint) { activepoint.fillcolor = activepoint.highlightfill; activepoint.strokecolor = activepoint.highlightstroke; }); this.showtooltip(activepoints); }); } //iterate through each of datasets, , build property of chart helpers.each(data.datasets, function(dataset) { var datasetobject = { label: dataset.label || null, fillcolor: dataset.fillcolor, strokecolor: dataset.strokecolor, pointcolor: dataset.pointcolor, pointstrokecolor: dataset.pointstrokecolor, points: [] }; this.datasets.push(datasetobject); helpers.each(dataset.data, function(datapoint, index) { /** * * check datapoints null */ if (helpers.isnumber(datapoint) || datapoint === null) { //add new point each piece of data, passing required data draw. datasetobject.points.push(new this.pointclass({ /** * add ignore field 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); this.buildscale(data.labels); this.eachpoints(function(point, index) { helpers.extend(point, { x: this.scale.calculatex(index), y: this.scale.endpoint }); point.save(); }, this); }, this); this.render(); }, draw: function(ease) { var helpers = chart.helpers; var easingdecimal = ease || 1; this.clear(); var ctx = this.chart.ctx; this.scale.draw(easingdecimal); helpers.each(this.datasets, function(dataset) { //transition each point first line , point drawing isn't out of sync //we can use loop calculate control points of dataset in loop helpers.each(dataset.points, function(point, index) { point.transition({ y: this.scale.calculatey(point.value), x: this.scale.calculatex(index) }, easingdecimal); }, this); // control points need calculated in seperate loop, because need know current x/y of point // cause issues when there no animation, because y of next point 0, beziers skewed if (this.options.beziercurve) { helpers.each(dataset.points, function(point, index) { //if we're @ start or end, don't have previous/next point //by setting tension 0 here, curve transition straight @ end if (index === 0) { point.controlpoints = helpers.splinecurve(point, point, dataset.points[index + 1], 0); } else if (index >= dataset.points.length - 1) { point.controlpoints = helpers.splinecurve(dataset.points[index - 1], point, point, 0); } else { point.controlpoints = helpers.splinecurve(dataset.points[index - 1], point, dataset.points[index + 1], this.options.beziercurvetension); } }, this); } //draw line between points ctx.linewidth = this.options.datasetstrokewidth; ctx.strokestyle = dataset.strokecolor; var pendown = false; var start = null helpers.each(dataset.points, function(point, index) { /** * no longer draw if last point ignore (as don;t have draw from) * or if point ignore * or if it's first */ if (!point.ignore && !pendown) { ctx.beginpath(); pendown = true; start = point; } 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); } if (((dataset.points.length > index + 1 && dataset.points[index + 1].ignore) || dataset.points.length == index + 1) && !point.ignore) { ctx.stroke(); if (this.options.datasetfill) { ctx.lineto(point.x, this.scale.endpoint); ctx.lineto(start.x, this.scale.endpoint); ctx.fillstyle = dataset.fillcolor; ctx.closepath(); if (point.x != start.x) { ctx.fill(); } } pendown = false; } }, this); //now draw points on line //a little inefficient double looping, better line //lagging behind point positions helpers.each(dataset.points, function(point) { /** * don't draw dot if ignoring */ if (!point.ignore) point.draw(); }); }, this); } }); then use
var ctx = document.getelementbyid("chart").getcontext("2d"); var data = { labels: ["january", "february", "march", "april", "may", "june", "july"], datasets: [{ label: "my first dataset", fillcolor: "rgba(220,220,220,0.2)", strokecolor: "rgba(220,220,220,1)", pointcolor: "rgba(220,220,220,1)", pointstrokecolor: "#fff", pointhighlightfill: "#fff", pointhighlightstroke: "rgba(220,220,220,1)", data: [65, 34, 21, null, null, null, null] }, { label: "my second dataset", fillcolor: "rgba(151,187,205,0.2)", strokecolor: "rgba(151,187,205,1)", pointcolor: "rgba(151,187,205,1)", pointstrokecolor: "#fff", pointhighlightfill: "#fff", pointhighlightstroke: "rgba(151,187,205,1)", data: [null, null, 88, 19, 86, 27, 90] } ] }; var mylinechart = new chart(ctx).missingline(data); 
Comments
Post a Comment