Skip to Content
0
Former Member
Jun 23, 2016 at 03:01 PM

Canvas doesn't display

454 Views

Hello guys

I'm pretty new in SAPUI5, and i'm not experimented in programmation. I explain my problem :

I have to make a radar Chart with the library chart.js (because the chart i want isn't available with vizFrame)

So i made the code of my chart in my controller :

onAfterRendering : 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);
    },

Of course, i included my library in my index.html :

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

And in my view, i called the canvas like this :

<!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">

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

<html:canvas id="radarChart" width="800" height="650"></html:canvas>

</mvc:View>

But it doesn't work. I got no error message in debug, but the canvas is invinsible. I can select it, and inspect it in my browser, but there isn't my graph.

And i know my graph is good, i tried it in a html file on notepad, and it was working great.

Best Regards