javascript - How to add an empty data point to a linechart on Chart.js? -
i'm trying add empty data points throughout line chart using chart.js. have this:
var data = { labels: [ "1","2","3","4","5","6","7","8","9","10" ], datasets: [ { label: "traffic", data: null,null,20,40,null,null,null,10,20,null } ] };
the problem linechart recognizes first 2 "nulls" being empty data points , doesn't display them. however, nulls come after, line (connecting previous , next valid datapoint) shown, makes seem if "null"-datapoints exist. there way not display null-values in linecharts? (similar canvas.js offer: http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/empty-null-data-points-chart/)
i read through chart.js documentation , stackoverflow not find answer. can me?
posting summary of answer @ line chartjs empty / null values doesn't break line (slight) corrections question above
extend line chart
chart.types.line.extend({ name: "linealt", draw: function () { chart.types.line.prototype.draw.apply(this, arguments); // draw segments var ctx = this.chart.ctx this.datasets.foreach(function (dataset) { ctx.strokestyle = dataset.strokecolor var previouspoint = { value: null }; dataset.points.foreach(function (point) { if (previouspoint.value !== null && point.value !== null) { ctx.beginpath(); ctx.moveto(previouspoint.x, previouspoint.y); ctx.lineto(point.x, point.y); ctx.stroke(); } previouspoint = point; }) }) } });
you have call linealt thus
var mylinechart = new chart(ctx).linealt(data, { datasetstrokewidth: 0.01, datasetfill: false, pointdotradius : 2, pointdotstrokewidth: 3 });
other changes made question - data should array , not comma separated set of values value
fiddle - http://jsfiddle.net/zu3p2nky/
edit aug 2016
this works out of box without need extension, using null
data point.
Comments
Post a Comment