Home forums Using CanvasJS Interactivity not working even when interactivityEnabled set to true

This topic contains 4 replies, has 3 voices, and was last updated by  cgar 3 weeks, 3 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #13292

    cgar
    Member

    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 3 weeks, 5 days ago by  cgar. Reason: added csv links
    #13296

    Bivek Singh
    Moderator

    cgar,

    Please take a look at this jsfiddle.

    #13304

    cgar
    Member

    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?

    #13310

    Vishwas R
    Keymaster

    @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.

    #13322

    cgar
    Member

    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. =)

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

You must be logged in to reply to this topic.