You must be logged in to post your query.
Home › Forums › Chart Support › Xpages Graph Issues
Tagged: Xpages
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
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
Thanks for the prompt action.
Let me check and confirm.
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>
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.
—
Vishwas R
Team CanvasJS
Tagged: Xpages
You must be logged in to reply to this topic.