You must be logged in to post your query.
Home › Forums › Feature Requests & Feedback › SOLUTION: Show missing points in tooltip
Tagged: tooltip missing datapints
Some time ago I asked in ‘toolTip‘ a question for the possibility to show “missing datapoints” in the tooltip.
I understood that was not possible. But I made “the impossible possible” with the ‘contentFormatter’ in toolTip:
Somewhere in your code (near the render):
var dataPointsNameNumber = new Object(); for (var i = 0; i < chart.options.data.length; i++) { dataPointsNameNumber[chart.options.data[i].name] = i; }
In your toolTip:
contentFormatter: function ( e ) { var content = '<div style="width: 100%; font-weight: bold; text-align: right;">' +CanvasJS.formatDate(e.entries[0].dataPoint.x, "DDD DD-MM-YY HH:mm",chart.options.culture) +'</div><table>'; var dataPoints = new Object(); for (var i = 0; i < e.entries.length; i++) { dataPoints[ e.entries[i].dataSeries.name ] = e.entries[i].dataPoint.y; } var content_p = ''; for (var i = 0; i < chart.options.data.length; i++) { var x1 = 0; var x0 = 0; var y1 = 0; var y0 = 0; var ii = 0; var ii_start = 0; if( document.getElementById("xData"+i) ) { // to speed up the search! ii_start = document.getElementById("xData"+i).innerHTML-2; if (ii_start < 0 ) { ii_start = 0 } } if (typeof(dataPoints[ chart.options.data[i].name ]) == 'undefined') { for (ii = ii_start; ii < chart.options.data[i].dataPoints.length; ii++) { x0 = x1; y0 = y1; x1 = chart.options.data[i].dataPoints[ii].x; y1 = chart.options.data[i].dataPoints[ii].y; if (x1 > e.entries[0].dataPoint.x) { content_p+= "<p id='xData"+i+"' style='display:none;'>"+ii+"</p>"; // to speed up the search! break; } } if (x0 && x1 && x1 > e.entries[0].dataPoint.x ) { var delta = (x0.getTime() - e.entries[0].dataPoint.x.getTime()) / (x0.getTime() - x1.getTime()); dataPoints[ chart.options.data[i].name ] = y0+delta*(y1-y0); } } if (typeof(dataPoints[ chart.options.data[i].name ]) != 'undefined') { content += "<tr><td>" +"<span style=\"color: " +chart.options.data[i].color + ";\">■</span>"+" " +chart.options.data[i].name +"</td><td style=\"text-align: right; padding-left: 5px;\">" +CanvasJS.formatNumber(dataPoints[ chart.options.data[i].name ],'#,###',chart.options.culture) +"</td></tr>"; } } content += "</table></div>" +"<p id='xData' style='display:none;'>"+ e.entries[0].dataPoint.x+ "</p>"+content_p; return content; }
Slight improvement, On large datasets the “search speed up” doesn’t work right.
Change this section:
if( document.getElementById("xData"+i) ) { // to speed up the search! ii_start = document.getElementById("xData"+i).innerHTML-2; if (ii_start < 0 ) { ii_start = 0 } } if (typeof(dataPoints[ chart.options.data[i].name ]) == 'undefined') {
with:
if (typeof(dataPoints[ chart.options.data[i].name ]) == 'undefined' ) { if( document.getElementById("xData"+i) ) { // to speed up the search! ii_start = parseInt(document.getElementById("xData"+i).innerHTML); if (ii_start > 0 ) { while (ii_start > 0 && e.entries[0].dataPoint.x.getTime() - chart.options.data[i].dataPoints[ii_start].x.getTime() < 0) { ii_start = parseInt(ii_start*.9)-6; } } ii_start-= 6; if (ii_start < 0 ) { ii_start = 0 } }
Eesger,
Thanks for the posting the solution. It would help others who will be searching for the similar.
You must be logged in to reply to this topic. Login/Register