Home forums Feature Requests & Feedback SOLUTION: Show missing points in tooltip

This topic contains 2 replies, has 2 voices, and was last updated by  Vishwas R 3 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #12157

    Eesger
    Member

    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 3 months, 1 week ago by  Eesger. Reason: typo
    • This topic was modified 3 months, 1 week ago by  Eesger.
    • This topic was modified 3 months, 1 week ago by  Eesger. Reason: edited title
    #12165

    Eesger
    Member

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

    Vishwas R
    Keymaster

    Eesger,

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.