Home › Forums › Chart Support › Canavas Chart is not supporting X-Pages IBM Domino Platform

Canavas Chart is not supporting X-Pages IBM Domino Platform

Viewing 5 posts - 1 through 5 (of 5 total)
  • August 6, 2018 at 12:31 pm #22129

    ajeetkumar786

    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

    August 6, 2018 at 1:20 pm #22131

    Vishwas R

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

    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

    August 6, 2018 at 2:16 pm #22133

    ajeetkumar786

    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>
    August 6, 2018 at 2:25 pm #22135

    Vishwas R

    @ajeetkumar786,

    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?

    —
    Vishwas R
    Team CanvasJS

    August 6, 2018 at 3:11 pm #22138

    ajeetkumar786

    Application deployed on Domino Platform. How to access.

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

You must be logged in to reply to this topic.