javascript - How to shade between 2 lines on a line graph using chart.js version2 -
i'm new chart.js , i'm having trouble shading between 2 lines on line graph. below example of id achieve:
but base functionality in chart.js version 2 seems shade between line , 0 on y-axis.
here code graph have far. shade between gtupper , gtlower lines these describe range.
<html> <div> <canvas id="mychart"></canvas> </div> </html> <script> function gengraph(y) { // function generate graph chart.js $(document).ready(function(){ var roomcap = 220 var prediction = [62, 65, 135, 145, 140, 120, 135, 189, 180, 175, 100, 25] var gndtruthupper = [75, 100, 150, 175, 150, 150, 175, 200, 175, 150, 125, 100] var gndtruthlower = [50, 50, 75, 50, 25, 50, 75, 100, 125, 150, 125, 100, 75] var data = { labels: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"], datasets: [{ label: 'prediction', fill: false, pointradius: 0, bordercolor: 'blue', data: prediction },{ label: 'gtupper', fill: true, pointradius: 0, borderdash: [10, 10], bordercolor: 'black', data: gndtruthupper },{ label: 'gtlower', fill: false, pointradius: 0, borderdash: [10, 10], bordercolor: 'black', data: gndtruthlower }] }; var options = { scales: { yaxes: [{ ticks: { min: 0, max: roomcap } }] } }; var ctx = document.getelementbyid("mychart").getcontext("2d"); var mychart = new chart(ctx, { type: 'line', data: data, options: options }); }); }; </script> my issue similar stackoverflow posts refer v1 , syntax seems have changed v1 v2. i'm bit lost how can extend base functionality in way myself. appreciated.
this should trick.
, here fiddle of plugin fill between 2 datasets.
https://jsfiddle.net/ke5n5lnl/26/
code:
<html> <div> <canvas id="mychart"></canvas> </div> </html> <script> var fillbetweenlinesplugin = { afterdatasetsdraw: function (chart) { var ctx = chart.chart.ctx; var xaxis = chart.scales['x-axis-0']; var yaxis = chart.scales['y-axis-0']; var datasets = chart.data.datasets; ctx.save(); (var d = 0; d < datasets.length; d++) { var dataset = datasets[d]; if (dataset.fillbetweenset == undefined) { continue; } // meta both data sets var meta1 = chart.getdatasetmeta(d); var meta2 = chart.getdatasetmeta(dataset.fillbetweenset); ctx.beginpath(); // vars tracing var curr, prev; // trace set1 line (var = 0; < meta1.data.length; i++) { curr = meta1.data[i]; if (i === 0) { ctx.moveto(curr._view.x, curr._view.y); ctx.lineto(curr._view.x, curr._view.y); prev = curr; continue; } if (curr._view.steppedline === true) { ctx.lineto(curr._view.x, prev._view.y); ctx.lineto(curr._view.x, curr._view.y); prev = curr; continue; } if (curr._view.tension === 0) { ctx.lineto(curr._view.x, curr._view.y); prev = curr; continue; } ctx.beziercurveto( prev._view.controlpointnextx, prev._view.controlpointnexty, curr._view.controlpointpreviousx, curr._view.controlpointpreviousy, curr._view.x, curr._view.y ); prev = curr; } // connect set1 set2 backwords trace set2 line (var = meta2.data.length - 1; >= 0; i--) { curr = meta2.data[i]; if (i === meta2.data.length - 1) { ctx.lineto(curr._view.x, curr._view.y); prev = curr; continue; } if (curr._view.steppedline === true) { ctx.lineto(prev._view.x, curr._view.y); ctx.lineto(curr._view.x, curr._view.y); prev = curr; continue; } if (curr._view.tension === 0) { ctx.lineto(curr._view.x, curr._view.y); prev = curr; continue; } // reverse bezier ctx.beziercurveto( prev._view.controlpointpreviousx, prev._view.controlpointpreviousy, curr._view.controlpointnextx, curr._view.controlpointnexty, curr._view.x, curr._view.y ); prev = curr; } ctx.closepath(); ctx.fillstyle = dataset.fillbetweencolor || "rgba(0,0,0,0.1)"; ctx.fill(); } } // end afterdatasetsdraw }; // end fillbetweenlinesplugin chart.pluginservice.register(fillbetweenlinesplugin); function gengraph(y) { // function generate graph chart.js $(document).ready(function(){ var roomcap = 220 var prediction = [62, 65, 135, 145, 140, 120, 135, 189, 180, 175, 100, 25] var gndtruthupper = [75, 100, 150, 175, 150, 150, 175, 200, 175, 150, 125, 100] var gndtruthlower = [50, 50, 75, 50, 25, 50, 75, 100, 125, 150, 125, 100, 75] var data = { labels: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"], datasets: [{ label: 'prediction', fill: false, pointradius: 0, bordercolor: 'blue', data: prediction },{ label: 'gtupper', fill: false, pointradius: 0, borderdash: [10, 10], bordercolor: 'black', data: gndtruthupper, fillbetweenset: 2, fillbetweencolor: 'rgba(0,0,0,0.1)' },{ label: 'gtlower', fill: false, pointradius: 0, borderdash: [10, 10], bordercolor: 'black', data: gndtruthlower }] }; var options = { scales: { yaxes: [{ ticks: { min: 0, max: roomcap } }] } }; var ctx = document.getelementbyid("mychart").getcontext("2d"); var mychart = new chart(ctx, { type: 'line', data: data, options: options }); }); }; gengraph(); </script>
Comments
Post a Comment