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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -