Home › Forums › Chart Support › Interactivity not working even when interactivityEnabled set to true

Interactivity not working even when interactivityEnabled set to true

Viewing 7 posts - 1 through 7 (of 7 total)
  • November 10, 2016 at 2:41 am #13292

    cgar

    Hello, fantastic library, does pretty much what I need it to and really is fast.

    However after creating a simple page that displays information about network speed tests and latency I’ve noticed that the interactivity of the charts are no longer working. I have 2 charts with 2 lines on each coming from 2 separate CSV files.

    The interactivity used to work but somewhere along the line it seems to have stopped. I apparently didn’t notice and kept making more changes.

    I tried to get it working on JSFiddle but it wouldn’t work. I then tried forking the example provided but that didn’t work also.

    This is the index html:

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Speedtests/Latency</title>

		<style>
			body {background-color: black;}
			div {width:100%; height:520px;}
			table {width:100%; height:520px; color: white; border: 1px solid white;}
			tr td {width: 50%; border: 1px solid white; text-align: center;}
		</style>

		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script type="text/javascript" src="canvasjs.min.js"></script>

		<script type="text/javascript">
			$(document).ready(function () {
				$.ajax({
					type: "GET",
					url:"speedtests.csv",
					dataType: "text",
					success: function(data) {processCSV(data, "downUpContainer", "Upload & Download Speed", "Speed (MBps)", "Download", "Upload");}
				});

				$.ajax({
					type: "GET",
					url:"pings.csv",
					dataType: "text",
					success: function(data) {processCSV(data, "pingsContainer", "ISP & Google Ping", "Latency (ms)", "ISP Gateway", "Google");}
				});

				$.ajax({
					type: "GET",
					url:"hiLoAvg.txt",
					dataType: "text",
					success: function(data) {populateTable(data);}
				});
			});

			function processCSV(allText, containerID, titleText, axYTitle, legend1Text, legend2Text) {
				var allLinesArray = allText.split("\n");
				if( allLinesArray.length > 0 ){
					var dataPoints1 = [];
					var dataPoints2 = [];
					for (var i = 0; i <= allLinesArray.length-1; i++) {
						var rowData = allLinesArray[i].split(",");
						if(rowData && rowData.length > 1) {
							dataPoints1.push({ y:parseFloat(rowData[0]) });
							dataPoints2.push({ y:parseFloat(rowData[1]) });
						}
					}

					var chart = new CanvasJS.Chart(containerID, {
						interactivityEnabled: true,
						animationEnabled: true,
						zoomEnabled: true,
						backgroundColor: "black",
						title:{
							text: titleText,
							fontColor: "white",
							fontSize: 25
						},
						axisX:{
							title:"Test Number",
							labelFontColor: "white",
							titleFontColor: "white",
							titleFontSize: 20,
							labelFontSize: 15
						},
						axisY:{
							title: axYTitle,
							labelFontColor: "white",
							titleFontColor: "white",
							titleFontSize: 20,
							labelFontSize: 15,
							interval: 1,
							gridThickness: 0.25,
							interlacedColor: "#06060d"
						},
						legend: {
							horizontalAlign: "center",
							verticalAlign: "top",
							fontSize: 15,
							fontColor: "white"
						},
						data: [{
							type: "line",
							lineThickness: 1,
							showInLegend: true,
							markerType: "circle",
							legendText: legend1Text,
							dataPoints: dataPoints1
						},
						{
							type: "line",
							lineThickness: 1,
							showInLegend: true,
							markerType: "triangle",
							legendText: legend2Text,
							dataPoints: dataPoints2
						}]
					});
					chart.render();
				}
			}

			function populateTable(allText) {
				var ids = ['avDown', 'av100Down', 'avUp', 'av100Up', 'highestDownDate', 'highestDown', 'lowestDownDate', 'lowestDown', 'highestUpDate', 'highestUp', 'lowestUpDate', 'lowestUp' ];

				var allLinesArray = allText.split("\n");

				for (var i = 0; i < ids.length; i++) {
					document.getElementById(ids[i]).innerHTML = allLinesArray[i];
				}
			}

		</script>
	</head>
	<body>
		<div id="downUpContainer"></div>
		<br />
		<div id="pingsContainer"></div>
		<br />
		<table>
			<tr>
				<td>Average Download</td><td id="avDown"></td>
			</tr>
			<tr>
				<td>Last 100 Average Download</td><td id="av100Down"></td>
			</tr>
			<tr>
				<td>Average Upload</td><td id="avUp"></td>
			</tr>
			<tr>
				<td>Last 100 Average Upload</td><td id="av100Up"></td>
			</tr>
			<tr>
				<td rowspan=2>Highest Download</td><td id="highestDownDate"></td>
			</tr>
			<tr>
				<td id="highestDown"></td>
			</tr>
			<tr>
				<td rowspan=2>Lowest Download</td><td id="lowestDownDate"></td>
			</tr>
			<tr>
				<td id="lowestDown"></td>
			</tr>
			<tr>
				<td rowspan=2>Highest Upload</td><td id="highestUpDate"></td>
			</tr>
			<tr>
				<td id="highestUp"></td>
			</tr>
			<tr>
				<td rowspan=2>Lowest Upload</td><td id="lowestUpDate"></td>
			</tr>
			<tr>
				<td id="lowestUp"></td>
			</tr>
		</table>
	</body>
</html>

    speedtest.csv looks like this: http://pastebin.com/raw/KMit3naJ
    pings.csv looks like this: http://pastebin.com/raw/jcAACBzU
    hiLoAvg.txt looks like this: http://pastebin.com/raw/FqnW0zE8

    • This topic was modified 8 years ago by cgar. Reason: added csv links
    November 10, 2016 at 10:29 am #13296

    Bivek Singh

    cgar,

    Please take a look at this jsfiddle.

    November 10, 2016 at 11:06 pm #13304

    cgar

    Thank you so much!

    How strange that setting the container div sizes in the head section breaks interactivity. I take it thats a bug?

    And thanks for showing me how to get it working on jsFiddle. I see now that trying to add document.ready to the javascript was what was causing it to break.

    Should I now create a bug report?

    November 11, 2016 at 10:16 am #13310

    Vishwas R

    @cgar,

    It’s not a bug. ToolTip is a Dom-element, so whenever you assign height to all div elements, it will be applicable even for tooltip. It’s suggested to apply height based on class or id of div.

    November 12, 2016 at 8:07 pm #13322

    cgar

    Ah I see. I thought I should ask just in case. I’ve changed it to:
    #downUpContainer, #pingsContainer {height: 520px; width: 100%;}
    and it works fine.

    Thank you for your help. =)

    June 15, 2017 at 12:55 pm #15314

    subaram

    CanvasJS is not defined at window.onload?chart not loading but page occupy

    June 16, 2017 at 10:50 am #15319

    Bivek Singh

    @subaram

    Make sure the library is loaded before initializing the chart. If that doesn’t solve your problem, please create the jsFiddle, so that we can look into it and help you out.

    —-
    Bivek Singh

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

You must be logged in to reply to this topic.