Canvas doens't display in SAPUI5

Question

(Sorry if i make mistakes with my english)

I'm trying to display a graph with the library chart.js

I included it in my index.html :

        <script type ="text/javascript" src="app/utils/Chart.js"></script>

Then, i called the canvas in my view :

<!DOCTYPE xml>
<mvc:View controllerName="Metrology.controllers.Pentagone" xmlns="sap.m"
xmlns:layout="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml">   
<html:canvas id="radarChart" width="800" height="650"></html:canvas>   

And after that, i create the graph in my onBeforeRendering function of my controller :

onBeforeRendering : function () {

            //radar chart data
        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).Radar(radarData);

            //new Chart(pentagone).Radar(radarData);
    }

And this isn't working at all. I got no error in my console, and the canvas doesn't appear at all on my application. We can select it, inspect it, but it's not even like grey or something, it's just invisible.

I tried almost everything so if you can help me guys, that would be wonderful ! :)

Best Regards

Answer 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>

Answer 2

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