You must be logged in to post your query.
Home › Forums › Chart Support › Canavas Chart is not supporting X-Pages IBM Domino Platform
Tagged: X-Pages Canvas Chart is not support
Dear Team, We have tried to use canvas graph in our application but unable to bind it.
It is showing some error like Uncaught ReferenceError: CanvasJS is not defined.
And, application page is showing blank.
Technology: IBM Notes Domino Platform X-Pages Code Support : Javascript, Javascript server side, client side. Error Occured:
dojo.js:15 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/. req.getText @ dojo.js:15 _32 @ dojo.js:15 _9 @ dojo.js:15 (anonymous) @ dojo.js:15 _37 @ dojo.js:15 _76 @ dojo.js:15 (anonymous) @ dojo.js:15 _9 @ dojo.js:15 _7a @ dojo.js:15 _ee @ dojo.js:15 _32 @ dojo.js:15 _24a @ dojo.js:15 $DDN4_ @ dojo.js:15 (anonymous) @ CHARTTEST.xsp:9 CHARTTEST.xsp:13 Uncaught ReferenceError: CanvasJS is not defined at CHARTTEST.xsp:13 (anonymous) @ CHARTTEST.xsp:13 ____________________________________________________________________________________________________ e.g. your code
<html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { exportEnabled: true, animationEnabled: true, title:{ text: "Car Parts Sold in Different States" }, subtitles: [{ text: "Click Legend to Hide or Unhide Data Series" }], axisX: { title: "States" }, axisY: { title: "Oil Filter - Units", titleFontColor: "#4F81BC", lineColor: "#4F81BC", labelFontColor: "#4F81BC", tickColor: "#4F81BC" }, axisY2: { title: "Clutch - Units", titleFontColor: "#C0504E", lineColor: "#C0504E", labelFontColor: "#C0504E", tickColor: "#C0504E" }, toolTip: { shared: true }, legend: { cursor: "pointer", itemclick: toggleDataSeries }, data: [{ type: "column", name: "Oil Filter", showInLegend: true, yValueFormatString: "#,##0.# Units", dataPoints: [ { label: "New Jersey", y: 19034.5 }, { label: "Texas", y: 20015 }, { label: "Oregon", y: 25342 }, { label: "Montana", y: 20088 }, { label: "Massachusetts", y: 28234 } ] }, { type: "column", name: "Clutch", axisYType: "secondary", showInLegend: true, yValueFormatString: "#,##0.# Units", dataPoints: [ { label: "New Jersey", y: 210.5 }, { label: "Texas", y: 135 }, { label: "Oregon", y: 425 }, { label: "Montana", y: 130 }, { label: "Massachusetts", y: 528 } ] }] }); chart.render(); function toggleDataSeries(e) { if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } e.chart.render(); } } </script> </head> <body> <div id="chartContainer" style="height: 300px; width: 100%;"></div> <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>
For your reference Xpages application like
https://www.openntf.org/main.nsf/project.xsp?r=project/SmartNSF
@ajeetkumar786,
Based on the error that you have shared Uncaught ReferenceError: CanvasJS is not defined., it seems like CanvasJS script is not loaded in your application. Can you kindly try after adding script in your app?
Uncaught ReferenceError: CanvasJS is not defined.
The HTML code that you have shared seems to be working fine. It would be helpful for us to understand the issue you are facing if you could share your app reproducing the issue over Google-Drive or Onedrive.
— Vishwas R Team CanvasJS
Dear Team, Thanks for the prompt action. As suggested, we have changed and check but same issues.
For your information, please check the below details of view page source.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> <link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/2Ojcore.css&2Ojdojo.css&2OkblueTheme.css&2OkdojoTheme.css&@Da&@Ib&@Th&@Ti&@Tj.css" /> <script type="text/javascript">var dojoConfig = {locale: 'en-us'};</script> <script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.3/dojo/dojo.js"></script> <script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.en-us/@Iq.js"></script> <script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspClientDojo")</script> </head> <body class="xsp lotusui tundra"> <form id="view:_id1" method="post" action="/Apps/OMM/ommcrm.nsf/CHARTTEST.xsp" class="lotusForm" enctype="multipart/form-data"> <html><head><script>window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, exportEnabled: true, theme: "light1", // "light1", "light2", "dark1", "dark2" title:{ text: "Simple Column Chart with Index Labels" }, data: [{ type: "column", //change type to bar, line, area, pie, etc //indexLabel: "{y}", //Shows y value on all Data Points indexLabelFontColor: "#5A5757", indexLabelPlacement: "outside", dataPoints: [ { x: 10, y: 71 }, { x: 20, y: 55 }, { x: 30, y: 50 }, { x: 40, y: 65 }, { x: 50, y: 92, indexLabel: "Highest" }, { x: 60, y: 68 }, { x: 70, y: 38 }, { x: 80, y: 71 }, { x: 90, y: 54 }, { x: 100, y: 60 }, { x: 110, y: 36 }, { x: 120, y: 49 }, { x: 130, y: 21, indexLabel: "Lowest" } ] }] }); chart.render(); }</script></head><body><div id="chartContainer" style="height: 300px; width: 100%;"></div><script src="assets/script/canvasjs.min.js"></script></body></html> <input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!f3lggqibnx!" /> <input type="hidden" name="$$xspsubmitid" /> <input type="hidden" name="$$xspexecid" /> <input type="hidden" name="$$xspsubmitvalue" /> <input type="hidden" name="$$xspsubmitscroll" /> <input type="hidden" name="view:_id1" value="view:_id1" /></form> </body> </html>
The code that you have shared seems to be working fine across browsers. Can you kindly share sample project reproducing the issue over Google-Drive or Onedrive so that we can look into it and help you out?
Application deployed on Domino Platform. How to access.
You must be logged in to reply to this topic. Login/Register