SOLUTION: Show missing points in tooltip

• August 30, 2016 at 4:13 pm #12157
  
  Eesger

  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;
  			}
  

  • This topic was modified 8 years, 3 months ago by Eesger. Reason: typo
  • This topic was modified 8 years, 3 months ago by Eesger.
  • This topic was modified 8 years, 3 months ago by Eesger. Reason: edited title
  August 31, 2016 at 12:38 pm #12165
  
  Eesger

  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 }
  						}
  
  

  September 2, 2016 at 1:32 pm #12278
  
  Vishwas R

  Eesger,

  Thanks for the posting the solution. It would help others who will be searching for the similar.