Home forums Using CanvasJS Xpages Graph Issues

Tagged: 

This topic contains 4 replies, has 3 voices, and was last updated by  Vishwas R 2 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #22390

    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

    #22408

    Priyanka M S
    Member

    @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

    #22445

    Thanks for the prompt action.

    Let me check and confirm.

    #22448

    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://canvasjs.com/assets/script/canvasjs.min.js”> </script>
    </body>
    </html>
    <!– CanvasJS Charts –>

    </xp:view>

    #22461

    Vishwas R
    Keymaster

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

You must be logged in to reply to this topic.