SOLUTION: Show missing points in tooltip

[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, 2 months ago by Eesger. Reason: typo
• This topic was modified 8 years, 2 months ago by Eesger.
• This topic was modified 8 years, 2 months ago by Eesger. Reason: edited title

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

[Vishwas R]

Eesger,

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