jsGraph icon indicating copy to clipboard operation
jsGraph copied to clipboard

Tooltip

Open heinemannj opened this issue 3 years ago • 6 comments

Is there any possibility to add a free configurable Tooltip (HTML DIV element) when moving the mouse over data points? Google chart which I'm using right now has a lot of other limitations.

Examples and goals:

image

heinemannj avatar Dec 10 '21 07:12 heinemannj

I've found the following workarround:

const jsgraphStyle = {
	id: 'chart0',
	width: 1200,
	height: 600,
	XAxisForceMin: 100,
	XAxisForceMax: 1300,
	YAxisForceMin: 0,
	YAxisForceMax: 100,
	backgroundImage: null
}

graph.tracking( {
	mode: 'individual',
	textMethod: function(output) {
		let txt = '';
		let i = 0;
		let documentClassId = document.getElementById(jsgraphStyle.id).getElementsByClassName('trackingLegend')[1];

		for (i in output) {
			if (!output[i].closestPoint) {
				continue;
			}
			if (i >= 1) {
				txt += '<br>';
			}
			txt += `${output[i].serie.getName()}: <br>
				${jsgraph.axes.x.label}: 
				${output[i].serie.getXAxis().valueToHtml(output[i].closestPoint.xClosest, true, true, 0)} 
				${jsgraph.axes.x.unit}`;
			txt += `<br> ${jsgraph.axes.y.label}: 
				${output[i].serie.getYAxis().valueToHtml(output[i].closestPoint.yClosest, true, true, 2)} 
				${jsgraph.axes.y.unit}<br>`;
		}
		documentClassId.style.backgroundColor = `rgb(${255 - output[i].closestPoint.xClosest * 0.3}, ${255 - output[i].closestPoint.xClosest * 0.3}, ${255 - output[i].closestPoint.xClosest * 0.3})`;

		return txt;
	},
	series: [ jsgraph.series[0].name ],
	legend: true,
	legendType: 'common',
	serieOptions: {
		withinPx: 10
	},
} );

However - A marker on the graph is missing with above:

image

heinemannj avatar Dec 22 '21 08:12 heinemannj

Same here, I think d8c805d should fix this issue

NPellet avatar Dec 26 '21 11:12 NPellet

Which is now published as v2.4.13 on npm.

Again, waiting for confirmation before closing

NPellet avatar Dec 29 '21 17:12 NPellet

Tested again with v2.4.13 - Not working as expected.

Above graph has not changed.

heinemannj avatar Dec 30 '21 14:12 heinemannj

You need to use dist/jsGraph.js

I'm phasing out the other versions

On Thu, 30 Dec 2021, 15:23 Joerg Heinemann, @.***> wrote:

Tested again with v2.4.13 - Not working as expected.

Above graph has not changed.

— Reply to this email directly, view it on GitHub https://github.com/NPellet/jsGraph/issues/294#issuecomment-1003051302, or unsubscribe https://github.com/notifications/unsubscribe-auth/AALKLW7G73UD3QHIPLI267DUTRTOPANCNFSM5JYO54NA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

NPellet avatar Dec 30 '21 16:12 NPellet

npm run build is broken in last commit https://github.com/NPellet/jsGraph/commit/d74f971a677d4e9e6b6ece47fa4c590af56074e8:

ERROR in ./src/graph.ts 36:44-82
Module not found: Error: Can't resolve './series/graph.serie.box.js'

heinemannj avatar Dec 31 '21 03:12 heinemannj