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

This topic contains 6 replies, has 4 voices, and was last updated by  Bivek Singh 1 month, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 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 8 months, 2 weeks 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. =)

    #15314

    subaram
    Member

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

    #15319

    Bivek Singh
    Moderator

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