You must be logged in to post your query.
Home › Forums › Chart Support › Interactivity not working even when interactivityEnabled set to true
Tagged: interactivityEnabled interactivity
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
cgar,
Please take a look at this jsfiddle.
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?
@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.
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.
#downUpContainer, #pingsContainer {height: 520px; width: 100%;}
Thank you for your help. =)
CanvasJS is not defined at window.onload?chart not loading but page occupy
@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
You must be logged in to reply to this topic. Login/Register