Chartjs-Canvas doens't display in SAPUI5

by

1👍

Two mistakes in your code:

  1. You are calling it in event hook onBeforeRendering, which makes no sense because no DOM is yet rendered, i.e. element with ID radarChart will never be found. Move your code to event hook onAfterReendering instead
  2. The id of your canvas will not be radarChart but something like __xmlview1-radarchart (which you could have seen upon inspecting the DOM. There would also be an error in your console, probably because method getContext could not be resolved)

Better use

<core:HTML preferDOM="true" content="&lt;canvas id='radarChart' width='800' height='650'/&gt;" />

instead so you can reference your canvas correctly

EDIT:

See this working example using your code:

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
    },

    onAfterRendering : function() {
        var radarData = {
            labels : ["Performance","Security","Robustness","Changeability","Transferability",],
            datasets : [
                {
                     fillColor: "rgba(102,45,145,.1)",
                    strokeColor: "rgba(102,45,145,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    data : [70,70,70,70,70]
                },
                {
                    fillColor: "rgba(63,169,245,.1)",
                    strokeColor: "rgba(63,169,245,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : [70,70,70,70,70]
                }
            ]
        }
        //Create Radar chart
        var pentagone = document.getElementById("radarChart").getContext("2d");
        var myNewChart = new Chart(pentagone, {
            type: "radar",
            data: radarData
        });
    }

});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc" >
        <core:HTML preferDOM="true" content="&lt;canvas id='radarChart' width='800' height='650'/&gt;" />
        <Button id="myButton" change="doClick" />
    </mvc:View>
</script>

0👍

thanks for answering.

I put everything in onAfterRendering

But my view doenst accepte

“The prefix “core” for element “core:html” is not bound.”

And i’m sorry i don’t know what this “DOM” things, i’m a trainee, i’m really not experimented in SAPUI5, or even in Web

Leave a comment