chart.js - How could I skip drawing empty/zero value and its value on tooltip -
i want skip points zero value
on line chart of chartjs
.
how ?
expected result
sampledata
:labels => [ [ 0] "10/01 (thu)", [ 1] "10/02 (fri)", [ 2] "10/03 (sat)", [ 3] "10/04 (sun)", [ 4] "10/05 (mon)", [ 5] "10/06 (tue)", [ 6] "10/07 (wed)", [ 7] "10/08 (thu)", [ 8] "10/09 (fri)", [ 9] "10/10 (sat)", [10] "10/11 (sun)", [11] "10/12 (mon)", [12] "10/13 (tue)", [13] "10/14 (wed)", [14] "10/15 (thu)", [15] "10/16 (fri)", [16] "10/17 (sat)", [17] "10/18 (sun)", [18] "10/19 (mon)", [19] "10/20 (tue)", [20] "10/21 (wed)", [21] "10/22 (thu)", [22] "10/23 (fri)", [23] "10/24 (sat)", [24] "10/25 (sun)", [25] "10/26 (mon)", [26] "10/27 (tue)", [27] "10/28 (wed)", [28] "10/29 (thu)", [29] "10/30 (fri)", [30] "10/31 (sat)", [31] "11/01 (sun)" ] { :label => "sample1(14:35)", :data => [ [ 0] 5098.0, [ 1] 5098.0, [ 2] 5098.0, [ 3] 3898.0, [ 4] 4498.0, [ 5] 0, [ 6] 5898.0, [ 7] 5898.0, [ 8] 6698.0, [ 9] 6698.0, [10] 3898.0, [11] 4498.0, [12] 4498.0, [13] 4498.0, [14] 5898.0, [15] 7698.0, [16] 5098.0, [17] 4498.0, [18] 5898.0, [19] 3398.0, [20] 3398.0, [21] 3898.0, [22] 3398.0, [23] 3898.0, [24] 0, [25] 0, [26] 0, [27] 0, [28] 0, [29] 0, [30] 0, [31] 0 ], :label => "sample1(14:35)", :data => [ [ 0] 5098.0, [ 1] 5098.0, [ 2] 5098.0, [ 3] 3898.0, [ 4] 4498.0, [ 5] 6698.0, [ 6] 5898.0, [ 7] 0, [ 8] 0, [ 9] 0, [10] 3898.0, [11] 4498.0, [12] 4498.0, [13] 4498.0, [14] 5898.0, [15] 7698.0, [16] 5098.0, [17] 4498.0, [18] 5898.0, [19] 3398.0, [20] 3398.0, [21] 3898.0, [22] 3398.0, [23] 3898.0, [24] 0, [25] 0, [26] 0, [27] 0, [28] 0, [29] 0, [30] 0, [31] 0 ],
you can use onanimationcomplete function disable points , tooltip display
var ctx = document.getelementbyid("mychart").getcontext("2d"); var mylinechart = new chart(ctx).line(data, { animation: false, onanimationcomplete: function () { // prevents update triggering infinite loop if (!this.clearcycle) { this.clearcycle = true; this.datasets.foreach(function (dataset) { dataset.points.foreach(function (point) { if (point.value === 0) { point.display = false; point.hasvalue = function () { return false; } } }) }) this.update(); } else delete this.clearcycle; } });
fiddle - http://jsfiddle.net/u7dsy6ep/
if using animation, logic needs moved onanimationprogress , executed once, unless don't mind seeing dots while animation in progress.
Comments
Post a Comment