FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Xpages Graph Issues

Xpages Graph Issues

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

Tagged: 

  • August 26, 2018 at 6:40 pm #22390

    ajeetkumar786

    Good day to you !

    We have tried to bind the Canvas Chart API with IBM X-Pages web based application, but unable view the expected results in Canvas Chart.

    We have taken input field and set the default values which have given in one of Canvas Chart API Examples. We are trying to take the values from JavaScript eg: document.getElementById(“#{id:txtValues}”).value, but not able to fetch the data.

    However, when same details, we tried to put on Click Button and prompted the alert values, it shows data correctly. Whereas, while using script we are getting issues with No Data in Chart.

    Thanks

    Ajeet

    August 28, 2018 at 11:43 am #22408

    Priyanka M S

    @ajeetkumar786,

    You need to make sure that the dataPoints are updated before rendering the chart. If the axis is rendered and the plot area is blank, then there is a possibility that the dataPoints are not passed to chart before rendering it.

    Passing the valid dataPoints to chart before calling chart.render() method, should work fine in your case.

    __
    Priyanka M S
    Team CanvasJS

    August 30, 2018 at 3:12 pm #22445

    ajeetkumar786

    Thanks for the prompt action.

    Let me check and confirm.

    August 30, 2018 at 3:34 pm #22448

    ajeetkumar786

    Hi,

    We have tried to do,but still same issues. Please find the below code details.

    <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel style="width:100%">
	<xp:table style="width:100.0%">
		<xp:tr>
			<xp:td>Parameter</xp:td>
			<xp:td>
				<xp:inputText id="inputText1"><xp:this.defaultValue><![CDATA[#{javascript:"[{ label: \"apple\",  y: 10  },{ label: \"orange\", y: 15  },{ label: \"banana\", y: 25  },{ label: \"mango\",  y: 30  },{ label: \"grape\",  y: 28  }]"}]]></xp:this.defaultValue></xp:inputText></xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td></xp:td>
			<xp:td>
				<xp:button value="Save" id="button1">
					<xp:eventHandler event="onclick" submit="false">
						<xp:this.script><![CDATA[alert(document.getElementById("#{id:inputText1}").value)]]></xp:this.script>
					</xp:eventHandler>
				</xp:button>
			</xp:td>
		</xp:tr>
	</xp:table>
</xp:panel>

<!--  CanvasJS Charts -->
<html>
<head>

<script type="text/javascript">
//var dps=[{ label: "apple",  y: 10  },{ label: "orange", y: 15  },{ label: "banana", y: 25  },{ label: "mango",  y: 30  },{ label: "grape",  y: 28  }];
//var dps=document.getElementById("#{id:inputText1}").value;
window.onload = function(){

	require(['CanvasJS'], function(CanvasJS) {
       var dps=document.getElementById("#{id:inputText1}").value;
		var chart = new CanvasJS.Chart("chartContainer", {
			theme: "light1", // "light2", "dark1", "dark2"
			animationEnabled: false, // change to true		
			title:{
				text: "Basic Column Chart"
			},
			data: [
			{
				// Change type to "bar", "area", "spline", "pie",etc.
				type: "column",
				dataPoints: dps
				
				
				
			}]
		});
		chart.render();

	});
}
</script>
</head>
<body>
	<div id="chartContainer" style="height: 370px; width: 100%;"></div>
	<script src="https://cdn.canvasjs.com/canvasjs.min.js"> </script>
</body>
</html>
<!-- CanvasJS Charts -->

</xp:view>
    August 31, 2018 at 5:39 pm #22461

    Vishwas R

    @ajeetkumar786,

    You can render chart once the chart-container is loaded. Incase of XPages, you need to create and render charts on onClientLoad event. Also the dataPoints that you pass to the chart should be in the format accepted by CanvasJS, I would suggest you to accept valid JSON from input field. Please download working code from Google-Drive.
    CanvasJS Charts in XPages

    —
    Vishwas R
    Team CanvasJS

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

Tagged: 

You must be logged in to reply to this topic.