chart.js - ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip -

chart.js - ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip -

i'm trying create graph has show business relationship motion each customer.

what i'm trying do

i've tree lines ; first line : minimum balance, if client has less min. balance, balance auto load bank account.

second line : current balance

third line: maximum balance : if client has more max. balance become difference scheme on bank account.

my problem

link picture : chartjs tooltip problem

as see in tooltip 3 values. values of straight lines irrelevant client because limits (max , min setted client own) .

to accomplish can extend line graph add together alternative show/hide tool-tips on per dataset basses. annoying thing there few changes whole methods have overridden changes in there below looks lot 3 changes next methods

initialize - added alternative store showtooltip alternative in each point

getpointsatevent - added check create sure want disaply tool tip when getting points

showtooltip - added check 1 time again create sure want dispaly tool tip

to utilize chart set same instead create linetooltip (thats have called extended chart) , pass anextra alternative in datasets phone call showtoolip.

datasets: [{ label: "my first dataset", fillcolor: "rgba(220,220,220,0.5)", strokecolor: "rgba(220,220,220,0.8)", highlightfill: "rgba(220,220,220,0.75)", highlightstroke: "rgba(220,220,220,1)", showtooltip: false, //new alternative don"t need include if want display won"t wound if data: [15, 10, 10, 10, 10, 10, 10] }, { label: "my sec dataset", fillcolor: "rgba(220,220,220,0.5)", strokecolor: "rgba(220,220,220,0.8)", highlightfill: "rgba(220,220,220,0.75)", highlightstroke: "rgba(220,220,220,1)", showtooltip: false, //new alternative don"t need include if want display won"t wound if data: [100, 100, 100, 100, 100, 100, 100] }, { label: "my 3rd dataset", fillcolor: "rgba(151,187,205,0.5)", strokecolor: "rgba(151,187,205,0.8)", highlightfill: "rgba(151,187,205,0.75)", highlightstroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] }]

i have added bigger comment banners in below code seek , highlight changes got made. have added feature fork of chartjs useful more people https://github.com/leighquince/chart.js, using can utilize normal line chart , add together showtooltip

below illustration of extending line custom chart include feature, ive called in linetooltip called that.

class="snippet-code-js lang-js prettyprint-override">chart.types.line.extend({ name: "linetooltip", /* * have add together 1 item in init need rewrite 1 time again here 1 edit */ initialize: function(data) { //have helpers using outside chart declared 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) { homecoming (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, showtooltip: dataset.showtooltip, points: [] }; this.datasets.push(datasetobject); helpers.each(dataset.data, function(datapoint, index) { //add new point each piece of data, passing required info draw. datasetobject.points.push(new this.pointclass({ /* * set wether show tooltip or not, left beingness able undfined * , default true */ showtooltip: dataset.showtooltip === undefined ? true : dataset.showtooltip, 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(); }, /* * need edit how points @ event works uses points want show tool tip */ getpointsatevent: function(e) { //have helpers using outside chart declared var helpers = chart.helpers; var pointsarray = [], eventposition = helpers.getrelativeposition(e); helpers.each(this.datasets, function(dataset) { helpers.each(dataset.points, function(point) { if (point.inrange(eventposition.x, eventposition.y) && point.showtooltip) pointsarray.push(point); }); }, this); homecoming pointsarray; }, /* * need alter how core showtooltip functions otherwise, trys helpful * , grab points thinks need displayed */ showtooltip: function(chartelements, forceredraw) { //have helpers using outside chart declared var helpers = chart.helpers; var each = helpers.each; var indexof = helpers.indexof; var min = helpers.min; var max = helpers.min; // redraw chart if we've changed we're hovering on. if (typeof this.activeelements === 'undefined') this.activeelements = []; var ischanged = (function(elements) { var changed = false; if (elements.length !== this.activeelements.length) { changed = true; homecoming changed; } each(elements, function(element, index) { if (element !== this.activeelements[index]) { changed = true; } }, this); homecoming changed; }).call(this, chartelements); if (!ischanged && !forceredraw) { return; } else { this.activeelements = chartelements; } this.draw(); if (chartelements.length > 0) { // if have multiple datasets, show multitooltip of info points @ index if (this.datasets && this.datasets.length > 1) { var dataarray, dataindex; (var = this.datasets.length - 1; >= 0; i--) { dataarray = this.datasets[i].points || this.datasets[i].bars || this.datasets[i].segments; dataindex = indexof(dataarray, chartelements[0]); if (dataindex !== -1) { break; } } var tooltiplabels = [], tooltipcolors = [], medianposition = (function(index) { // points @ particular index var elements = [], datacollection, xpositions = [], ypositions = [], xmax, ymax, xmin, ymin; helpers.each(this.datasets, function(dataset) { datacollection = dataset.points || dataset.bars || dataset.segments; /* *check create sure want show point */ if (datacollection[dataindex] && datacollection[dataindex].hasvalue() && (datacollection[dataindex].showtooltip === undefined || datacollection[dataindex].showtooltip)) { elements.push(datacollection[dataindex]); } }); helpers.each(elements, function(element) { xpositions.push(element.x); ypositions.push(element.y); //include colour info element tooltiplabels.push(helpers.template(this.options.multitooltiptemplate, element)); tooltipcolors.push({ fill: element._saved.fillcolor || element.fillcolor, stroke: element._saved.strokecolor || element.strokecolor }); }, this); ymin = min(ypositions); ymax = max(ypositions); xmin = min(xpositions); xmax = max(xpositions); homecoming { x: (xmin > this.chart.width / 2) ? xmin : xmax, y: (ymin + ymax) / 2 }; }).call(this, dataindex); new chart.multitooltip({ x: medianposition.x, y: medianposition.y, xpadding: this.options.tooltipxpadding, ypadding: this.options.tooltipypadding, xoffset: this.options.tooltipxoffset, fillcolor: this.options.tooltipfillcolor, textcolor: this.options.tooltipfontcolor, fontfamily: this.options.tooltipfontfamily, fontstyle: this.options.tooltipfontstyle, fontsize: this.options.tooltipfontsize, titletextcolor: this.options.tooltiptitlefontcolor, titlefontfamily: this.options.tooltiptitlefontfamily, titlefontstyle: this.options.tooltiptitlefontstyle, titlefontsize: this.options.tooltiptitlefontsize, cornerradius: this.options.tooltipcornerradius, labels: tooltiplabels, legendcolors: tooltipcolors, legendcolorbackground: this.options.multitooltipkeybackground, title: chartelements[0].label, chart: this.chart, ctx: this.chart.ctx }).draw(); } else { each(chartelements, function(element) { var tooltipposition = element.tooltipposition(); new chart.tooltip({ x: math.round(tooltipposition.x), y: math.round(tooltipposition.y), xpadding: this.options.tooltipxpadding, ypadding: this.options.tooltipypadding, fillcolor: this.options.tooltipfillcolor, textcolor: this.options.tooltipfontcolor, fontfamily: this.options.tooltipfontfamily, fontstyle: this.options.tooltipfontstyle, fontsize: this.options.tooltipfontsize, caretheight: this.options.tooltipcaretsize, cornerradius: this.options.tooltipcornerradius, text: template(this.options.tooltiptemplate, element), chart: this.chart }).draw(); }, this); } } homecoming this; }, }); var ctx = document.getelementbyid("chart").getcontext("2d"); var info = { labels: ["january", "february", "march", "april", "may", "june", "july"], datasets: [{ label: "my first dataset", fillcolor: "rgba(220,220,220,0.5)", strokecolor: "rgba(220,220,220,0.8)", highlightfill: "rgba(220,220,220,0.75)", highlightstroke: "rgba(220,220,220,1)", showtooltip: false, //to utilize add together new alternative needs nowadays if setting false data: [15, 10, 10, 10, 10, 10, 10] }, { label: "my sec dataset", fillcolor: "rgba(220,220,220,0.5)", strokecolor: "rgba(220,220,220,0.8)", highlightfill: "rgba(220,220,220,0.75)", highlightstroke: "rgba(220,220,220,1)", showtooltip: false, //to utilize add together new alternative needs nowadays if setting false data: [100, 100, 100, 100, 100, 100, 100] }, { label: "my 3rd dataset", fillcolor: "rgba(151,187,205,0.5)", strokecolor: "rgba(151,187,205,0.8)", highlightfill: "rgba(151,187,205,0.75)", highlightstroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] }] }; var mybarchart = new chart(ctx).linetooltip(data); class="snippet-code-html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.min.js"></script> <canvas id="chart" width="600px"></canvas>

and fiddle if find easy view http://jsfiddle.net/leighking2/1lammwpt/

chart.js