Tooltip date value

This topic has 2 replies, 2 voices, and was last updated 7 years, 1 month ago by jckruger.
Viewing 3 posts - 1 through 3 (of 3 total)
October 18, 2017 at 8:48 am #17340
Hi,
This firstly is exactly what I am after but one thing I can’t quite get working is the tooltip to show the full date and time. Here is a test copy of what I am trying to do.
The json data that I am using is a timestamp in ms

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="refresh" content="300" />
<script src="jquery-1.12.4.min.js"></script>
<script src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
$(function () {
var chart = new CanvasJS.Chart("chartContainer", {
	theme: "theme1",
	zoomEnabled: true,
	animationEnabled: true,
	title: {
		text: "Test -> Latency"
	},
	toolTip:{             
       	content: "{x}: {y}"
       },
	axisX: {
		fontFamily: "verdana",
		title: "Date",
		//interval: 288,
		//labelAutoFit: true,
		valueFormatString: "DD/MM/YYYY HH:mm:ss",
			labelFormatter: function(e) {
	       	return CanvasJS.formatDate(e.value, "DD-MM-YYYY HH:mm:ss");
	       }
	},
	axisY: {
		fontFamily: "verdana",
		title: 'Latency / Secs'
	},
	subtitles:[
		{   text: "(Every datapont should be 2 minutes. 60 secs is a timeout. Graph is zoomable by click and drag)" }
	],
	data: [
	{
		type: "line",
		xValueType: "dateTime",
		dataPoints: [{"x":1508206694000,"y":0.29},{"x":1508206876000,"y":0.3},{"x":1508207052000,"y":0.31},{"x":1508207234000,"y":0.33},{"x":1508207419000,"y":0.3},{"x":1508207593000,"y":0.38},{"x":1508207774000,"y":0.31},{"x":1508207955000,"y":0.3},{"x":1508208138000,"y":0.3},{"x":1508208314000,"y":0.32},{"x":1508208492000,"y":0.32},{"x":1508208675000,"y":0.3},{"x":1508208854000,"y":0.3},{"x":1508209035000,"y":0.33},{"x":1508209213000,"y":0.31},{"x":1508209398000,"y":0.32},{"x":1508209572000,"y":0.31},{"x":1508209753000,"y":0.3},{"x":1508209932000,"y":0.33},{"x":1508210114000,"y":0.29},{"x":1508210293000,"y":0.36},{"x":1508210477000,"y":0.38},{"x":1508210651000,"y":0.31},{"x":1508210839000,"y":0.3},{"x":1508211013000,"y":0.33},{"x":1508211196000,"y":0.29},{"x":1508211374000,"y":0.32},{"x":1508211559000,"y":0.39},{"x":1508211733000,"y":0.3},{"x":1508211919000,"y":0.32},{"x":1508212093000,"y":0.3},{"x":1508212275000,"y":0.3},{"x":1508212452000,"y":0.3},{"x":1508212634000,"y":0.33},{"x":1508212813000,"y":0.3},{"x":1508212993000,"y":0.3},{"x":1508213174000,"y":0.47},{"x":1508213359000,"y":0.3},{"x":1508213533000,"y":0.3},{"x":1508213714000,"y":0.32},{"x":1508213892000,"y":0.32},{"x":1508214080000,"y":0.32},{"x":1508214254000,"y":0.3},{"x":1508214435000,"y":0.31},{"x":1508214613000,"y":0.3},{"x":1508214796000,"y":1.59},{"x":1508214974000,"y":0.54},{"x":1508215155000,"y":0.41},{"x":1508215338000,"y":0.33},{"x":1508215515000,"y":0.3},{"x":1508215692000,"y":0.3},{"x":1508215875000,"y":0.3},{"x":1508216053000,"y":0.31},{"x":1508216243000,"y":0.29},{"x":1508216412000,"y":0.31},{"x":1508216594000,"y":1.19},{"x":1508216783000,"y":0.31},{"x":1508216953000,"y":0.29},{"x":1508217141000,"y":0.3},{"x":1508217313000,"y":0.31},{"x":1508217496000,"y":0.59},{"x":1508217676000,"y":0.29},{"x":1508217855000,"y":0.4},{"x":1508218033000,"y":0.29},{"x":1508218214000,"y":0.44},{"x":1508218395000,"y":0.31},{"x":1508218573000,"y":0.33},{"x":1508218754000,"y":0.3},{"x":1508218934000,"y":0.3},{"x":1508219114000,"y":0.32},{"x":1508219296000,"y":0.31},{"x":1508219474000,"y":0.33},{"x":1508219655000,"y":0.31},{"x":1508219834000,"y":0.3},{"x":1508220013000,"y":0.32},{"x":1508220194000,"y":0.3},{"x":1508220374000,"y":0.3},{"x":1508220558000,"y":0.31},{"x":1508220734000,"y":0.32},{"x":1508220913000,"y":0.38},{"x":1508221094000,"y":0.3},{"x":1508221274000,"y":0.32},{"x":1508221454000,"y":0.3},{"x":1508221635000,"y":0.3},{"x":1508221824000,"y":0.3},{"x":1508221993000,"y":0.31},{"x":1508222175000,"y":0.3},{"x":1508222361000,"y":0.3},{"x":1508222535000,"y":0.29},{"x":1508222714000,"y":0.3},{"x":1508222894000,"y":0.3},{"x":1508223076000,"y":0.32},{"x":1508223253000,"y":0.28},{"x":1508223434000,"y":0.31},{"x":1508223619000,"y":0.28},{"x":1508223797000,"y":1.42},{"x":1508223973000,"y":0.3},{"x":1508224154000,"y":0.29},{"x":1508224333000,"y":0.3},{"x":1508224514000,"y":0.32},{"x":1508224693000,"y":0.29},{"x":1508224874000,"y":0.3},{"x":1508225057000,"y":0.3},{"x":1508225234000,"y":0.31},{"x":1508225413000,"y":0.34},{"x":1508225596000,"y":0.29},{"x":1508225774000,"y":0.29},{"x":1508225953000,"y":0.3},{"x":1508226133000,"y":0.3},{"x":1508226314000,"y":0.31},{"x":1508226494000,"y":0.29},{"x":1508226676000,"y":0.31},{"x":1508226860000,"y":0.32},{"x":1508227034000,"y":0.3},{"x":1508227214000,"y":0.31},{"x":1508227399000,"y":0.29},{"x":1508227572000,"y":0.29},{"x":1508227752000,"y":0.29},{"x":1508227934000,"y":0.29},{"x":1508228113000,"y":0.3},{"x":1508228294000,"y":0.3},{"x":1508228473000,"y":0.29},{"x":1508228655000,"y":0.3},{"x":1508228840000,"y":0.3},{"x":1508229015000,"y":0.3},{"x":1508229193000,"y":0.39},{"x":1508229376000,"y":0.3},{"x":1508229554000,"y":0.29},{"x":1508229734000,"y":0.29},{"x":1508229915000,"y":0.3},{"x":1508230093000,"y":0.29},{"x":1508230274000,"y":0.31},{"x":1508230454000,"y":0.29},{"x":1508230634000,"y":0.29},{"x":1508230816000,"y":0.3},{"x":1508230994000,"y":0.3},{"x":1508231174000,"y":0.29},{"x":1508231359000,"y":0.29},{"x":1508231535000,"y":0.3},{"x":1508231719000,"y":0.32},{"x":1508231896000,"y":0.3},{"x":1508232078000,"y":0.3},{"x":1508232254000,"y":0.29},{"x":1508232436000,"y":0.3},{"x":1508232614000,"y":0.32},{"x":1508232796000,"y":0.29},{"x":1508232973000,"y":0.28},{"x":1508233153000,"y":0.3},{"x":1508233336000,"y":0.3},{"x":1508233513000,"y":0.3},{"x":1508233695000,"y":0.34},{"x":1508233876000,"y":0.89},{"x":1508234055000,"y":0.29},{"x":1508234232000,"y":0.32},{"x":1508234414000,"y":0.3},{"x":1508234594000,"y":0.3},{"x":1508234773000,"y":0.3},{"x":1508234953000,"y":0.3},{"x":1508235133000,"y":0.29},{"x":1508235313000,"y":0.3},{"x":1508235494000,"y":0.29},{"x":1508235681000,"y":0.3},{"x":1508235854000,"y":0.34},{"x":1508236040000,"y":0.31},{"x":1508236215000,"y":0.31},{"x":1508236405000,"y":0.34},{"x":1508236573000,"y":0.3},{"x":1508236754000,"y":0.29},{"x":1508236933000,"y":0.3},{"x":1508237117000,"y":0.3},{"x":1508237295000,"y":0.31},{"x":1508237475000,"y":0.81},{"x":1508237655000,"y":0.28},{"x":1508237835000,"y":0.3},{"x":1508238013000,"y":0.29},{"x":1508238197000,"y":0.33},{"x":1508238375000,"y":0.57},{"x":1508238555000,"y":0.3},{"x":1508238733000,"y":0.33},{"x":1508238915000,"y":0.31},{"x":1508239094000,"y":0.29},{"x":1508239284000,"y":0.3},{"x":1508239458000,"y":0.34},{"x":1508239634000,"y":0.3},{"x":1508239819000,"y":0.29},{"x":1508240001000,"y":0.3},{"x":1508240175000,"y":0.31},{"x":1508240355000,"y":0.3},{"x":1508240534000,"y":0.31},{"x":1508240720000,"y":0.38},{"x":1508240892000,"y":0.29},{"x":1508241075000,"y":0.29},{"x":1508241254000,"y":0.32},{"x":1508241436000,"y":0.3},{"x":1508241616000,"y":0.31},{"x":1508241836000,"y":0.3},{"x":1508241972000,"y":0.3},{"x":1508242154000,"y":0.31},{"x":1508242334000,"y":0.3},{"x":1508242520000,"y":1.45},{"x":1508242694000,"y":0.31},{"x":1508242873000,"y":0.29},{"x":1508243056000,"y":0.31},{"x":1508243233000,"y":0.3},{"x":1508243419000,"y":0.31},{"x":1508243594000,"y":0.31},{"x":1508243773000,"y":0.31},{"x":1508243952000,"y":0.34},{"x":1508244134000,"y":0.29},{"x":1508244315000,"y":0.3},{"x":1508244494000,"y":0.31},{"x":1508244676000,"y":0.33},{"x":1508244854000,"y":0.29},{"x":1508245034000,"y":0.31},{"x":1508245216000,"y":0.36},{"x":1508245394000,"y":0.29},{"x":1508245584000,"y":0.32},{"x":1508245758000,"y":0.31},{"x":1508245936000,"y":0.44},{"x":1508246114000,"y":0.36},{"x":1508246295000,"y":0.33},{"x":1508246475000,"y":0.31},{"x":1508246654000,"y":0.28},{"x":1508246837000,"y":0.31},{"x":1508247016000,"y":1.03},{"x":1508247205000,"y":0.32},{"x":1508247375000,"y":0.33},{"x":1508247557000,"y":0.29},{"x":1508247733000,"y":0.28},{"x":1508247914000,"y":0.31},{"x":1508248096000,"y":0.33},{"x":1508248282000,"y":0.29},{"x":1508248456000,"y":0.4},{"x":1508248635000,"y":0.3},{"x":1508248816000,"y":0.37},{"x":1508248997000,"y":0.31},{"x":1508249175000,"y":0.32},{"x":1508249356000,"y":0.3},{"x":1508249539000,"y":0.29},{"x":1508249715000,"y":1.18},{"x":1508249897000,"y":0.3},{"x":1508250076000,"y":0.3},{"x":1508250257000,"y":0.31},{"x":1508250438000,"y":1.34},{"x":1508250630000,"y":0.31},{"x":1508250796000,"y":0.39},{"x":1508250974000,"y":0.3},{"x":1508251160000,"y":0.36},{"x":1508251333000,"y":0.31},{"x":1508251514000,"y":0.43},{"x":1508251695000,"y":0.31},{"x":1508251875000,"y":0.7},{"x":1508252053000,"y":0.29},{"x":1508252235000,"y":0.3},{"x":1508252413000,"y":0.37},{"x":1508252596000,"y":0.49},{"x":1508252776000,"y":0.37},{"x":1508252954000,"y":0.3},{"x":1508253139000,"y":0.29},{"x":1508253313000,"y":0.31},{"x":1508253493000,"y":0.32},{"x":1508253674000,"y":0.32},{"x":1508253853000,"y":0.31},{"x":1508254035000,"y":0.29},{"x":1508254215000,"y":0.38},{"x":1508254393000,"y":0.3},{"x":1508254573000,"y":0.42},{"x":1508254754000,"y":0.29},{"x":1508254938000,"y":0.31},{"x":1508255113000,"y":0.29},{"x":1508255292000,"y":0.31},{"x":1508255479000,"y":0.3},{"x":1508255660000,"y":0.32},{"x":1508255833000,"y":0.3},{"x":1508256027000,"y":0.34},{"x":1508256194000,"y":0.31},{"x":1508256372000,"y":0.31},{"x":1508256554000,"y":0.31},{"x":1508256733000,"y":0.3},{"x":1508256923000,"y":0.3},{"x":1508257103000,"y":0.31},{"x":1508257276000,"y":1.97},{"x":1508257452000,"y":0.29},{"x":1508257633000,"y":0.3},{"x":1508257819000,"y":0.29},{"x":1508257996000,"y":0.33},{"x":1508258173000,"y":0.3},{"x":1508258354000,"y":0.28},{"x":1508258534000,"y":0.29},{"x":1508258713000,"y":0.39},{"x":1508258892000,"y":0.31},{"x":1508259074000,"y":0.29},{"x":1508259253000,"y":0.3},{"x":1508259433000,"y":0.29},{"x":1508259615000,"y":0.41},{"x":1508259793000,"y":0.38},{"x":1508259983000,"y":0.3},{"x":1508260158000,"y":0.29},{"x":1508260333000,"y":0.29},{"x":1508260514000,"y":0.31},{"x":1508260692000,"y":0.3},{"x":1508260874000,"y":0.3},{"x":1508261054000,"y":0.3},{"x":1508261234000,"y":0.3},{"x":1508261414000,"y":0.31},{"x":1508261593000,"y":0.31},{"x":1508261773000,"y":0.28},{"x":1508261954000,"y":0.31},{"x":1508262137000,"y":0.29},{"x":1508262315000,"y":0.3},{"x":1508262493000,"y":0.3},{"x":1508262675000,"y":0.34},{"x":1508262853000,"y":0.3},{"x":1508263033000,"y":0.31},{"x":1508263214000,"y":0.29},{"x":1508263397000,"y":0.3},{"x":1508263574000,"y":0.31},{"x":1508263753000,"y":0.3},{"x":1508263934000,"y":0.29},{"x":1508264115000,"y":0.29},{"x":1508264295000,"y":0.31},{"x":1508264477000,"y":0.31},{"x":1508264653000,"y":0.37},{"x":1508264833000,"y":0.29},{"x":1508265013000,"y":0.3},{"x":1508265194000,"y":0.3},{"x":1508265372000,"y":0.3},{"x":1508265553000,"y":0.3},{"x":1508265733000,"y":0.29},{"x":1508265918000,"y":0.28},{"x":1508266093000,"y":0.31},{"x":1508266279000,"y":0.29},{"x":1508266452000,"y":0.33},{"x":1508266634000,"y":0.29},{"x":1508266813000,"y":0.3},{"x":1508266993000,"y":0.29},{"x":1508267174000,"y":0.3},{"x":1508267354000,"y":0.3},{"x":1508267533000,"y":0.29},{"x":1508267713000,"y":0.31},{"x":1508267893000,"y":0.3},{"x":1508268074000,"y":0.29},{"x":1508268258000,"y":0.29},{"x":1508268435000,"y":0.28},{"x":1508268612000,"y":0.3},{"x":1508268795000,"y":0.29},{"x":1508268974000,"y":0.29},{"x":1508269153000,"y":0.29},{"x":1508269333000,"y":0.33},{"x":1508269514000,"y":0.29},{"x":1508269692000,"y":0.29},{"x":1508269874000,"y":0.31},{"x":1508270052000,"y":0.29},{"x":1508270238000,"y":0.3},{"x":1508270415000,"y":0.28},{"x":1508270593000,"y":0.28},{"x":1508270772000,"y":0.28},{"x":1508270952000,"y":0.29},{"x":1508271132000,"y":0.3},{"x":1508271313000,"y":0.29},{"x":1508271493000,"y":0.29},{"x":1508271674000,"y":0.28},{"x":1508271853000,"y":0.28},{"x":1508272038000,"y":0.29},{"x":1508272212000,"y":0.3},{"x":1508272398000,"y":0.29},{"x":1508272572000,"y":0.29},{"x":1508272758000,"y":0.3},{"x":1508272938000,"y":0.28},{"x":1508273131000,"y":0.29},{"x":1508273296000,"y":0.3},{"x":1508273473000,"y":0.28},{"x":1508273653000,"y":0.29},{"x":1508273833000,"y":0.29},{"x":1508274014000,"y":0.29},{"x":1508274192000,"y":0.29},{"x":1508274372000,"y":0.29},{"x":1508274558000,"y":0.3},{"x":1508274732000,"y":0.29},{"x":1508274914000,"y":0.28},{"x":1508275092000,"y":0.29},{"x":1508275273000,"y":0.29},{"x":1508275457000,"y":0.29},{"x":1508275634000,"y":0.29},{"x":1508275812000,"y":0.28},{"x":1508276003000,"y":0.28},{"x":1508276172000,"y":0.29},{"x":1508276353000,"y":0.28},{"x":1508276532000,"y":0.29},{"x":1508276713000,"y":0.28},{"x":1508276895000,"y":0.28},{"x":1508277078000,"y":0.28},{"x":1508277253000,"y":0.29},{"x":1508277432000,"y":0.29},{"x":1508277614000,"y":0.3},{"x":1508277792000,"y":0.29},{"x":1508277973000,"y":0.3},{"x":1508278152000,"y":0.3},{"x":1508278333000,"y":0.29},{"x":1508278512000,"y":0.32},{"x":1508278695000,"y":0.3},{"x":1508278872000,"y":0.29},{"x":1508279052000,"y":0.29},{"x":1508279233000,"y":0.29},{"x":1508279413000,"y":0.3},{"x":1508279593000,"y":0.28},{"x":1508279773000,"y":0.29},{"x":1508279953000,"y":0.3},{"x":1508280134000,"y":0.31},{"x":1508280321000,"y":0.3},{"x":1508280498000,"y":0.31},{"x":1508280673000,"y":0.3},{"x":1508280853000,"y":0.3},{"x":1508281033000,"y":0.3},{"x":1508281213000,"y":0.31},{"x":1508281392000,"y":0.3},{"x":1508281572000,"y":0.28},{"x":1508281752000,"y":0.31},{"x":1508281933000,"y":0.29},{"x":1508281977000,"y":0.28},{"x":1508282113000,"y":0.3},{"x":1508282293000,"y":0.3},{"x":1508282473000,"y":0.29},{"x":1508282653000,"y":0.3},{"x":1508282832000,"y":0.29},{"x":1508283016000,"y":0.29},{"x":1508283192000,"y":0.3},{"x":1508283373000,"y":0.29},{"x":1508283559000,"y":0.31},{"x":1508283734000,"y":0.29},{"x":1508283920000,"y":0.28},{"x":1508284095000,"y":0.36},{"x":1508284274000,"y":1.12},{"x":1508284453000,"y":0.29},{"x":1508284638000,"y":0.3},{"x":1508284812000,"y":0.29},{"x":1508284993000,"y":0.3},{"x":1508285173000,"y":0.29},{"x":1508285354000,"y":0.29},{"x":1508285533000,"y":0.3},{"x":1508285715000,"y":0.32},{"x":1508285893000,"y":0.3},{"x":1508286073000,"y":0.29},{"x":1508286256000,"y":0.29},{"x":1508286432000,"y":0.3},{"x":1508286615000,"y":0.31},{"x":1508286792000,"y":0.31},{"x":1508286973000,"y":0.31},{"x":1508287158000,"y":0.3},{"x":1508287333000,"y":0.3},{"x":1508287514000,"y":0.3},{"x":1508287698000,"y":0.31},{"x":1508287875000,"y":0.31},{"x":1508288054000,"y":0.33},{"x":1508288234000,"y":0.55},{"x":1508288427000,"y":6.71},{"x":1508288598000,"y":0.31},{"x":1508288776000,"y":0.3},{"x":1508288958000,"y":0.29},{"x":1508289133000,"y":0.29},{"x":1508289314000,"y":0.31},{"x":1508289493000,"y":0.28},{"x":1508289673000,"y":0.28},{"x":1508289860000,"y":0.37},{"x":1508290034000,"y":0.29},{"x":1508290222000,"y":0.54},{"x":1508290402000,"y":0.29},{"x":1508290573000,"y":0.3},{"x":1508290752000,"y":0.31},{"x":1508290938000,"y":0.3},{"x":1508291115000,"y":0.3},{"x":1508291293000,"y":0.3},{"x":1508291474000,"y":0.3},{"x":1508291653000,"y":0.34},{"x":1508291833000,"y":0.29},{"x":1508292013000,"y":0.3},{"x":1508292192000,"y":0.28},{"x":1508292374000,"y":0.3},{"x":1508292557000,"y":0.29},{"x":1508292734000,"y":0.3},{"x":1508292912000,"y":0.3},{"x":1508293095000,"y":0.3},{"x":1508293274000,"y":0.29},{"x":1508293456000,"y":0.41},{"x":1508293633000,"y":0.36},{"x":1508293813000,"y":0.29},{"x":1508293994000,"y":0.29},{"x":1508294173000,"y":0.29},{"x":1508294352000,"y":0.29},{"x":1508294534000,"y":0.29},{"x":1508294719000,"y":0.29},{"x":1508294893000,"y":0.31},{"x":1508295074000,"y":0.3},{"x":1508295254000,"y":0.31},{"x":1508295434000,"y":0.31},{"x":1508295616000,"y":0.4},{"x":1508295798000,"y":0.3},{"x":1508295976000,"y":0.29},{"x":1508296156000,"y":0.3},{"x":1508296333000,"y":0.31}]	}
	]
});
chart.render();
});
</script>
</body> 
</html>
Some help on this would be great.
Cheers
Justin
This topic was modified 7 years, 1 month ago by jckruger. Reason: Url is not accessible externally
October 18, 2017 at 11:18 am #17345
Vishwas R
Justin,
You can use xValueFormatString to format x-values that appear on toolTip or indexLabels.
—
Vishwas R
Team CanvasJS
October 18, 2017 at 11:27 am #17346
jckruger
Legend. Worked perfectly.
Thank you
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.
FORUMS

Tooltip date value

Quick Links

Server Side Technologies

Front Side Technologies

Contact

FORUMS

Login to Ask a Question or Reply

Tooltip date value
