Maybe my getElementByID returns null ?

- Hi guys! I build a web application asp.net mvc and use SIGNALR for real-time data from my database.  In HTML I display data by using <h2> tag with id ="tblValue" comes from my signalr javascript. And now I get data from HTML and put into data of Chart.js using getElementByID('tblValue').innerHTML.parseFloat but nothing display in my chart. Anything goes wrong? I need your support. Thank you.

 - This is signalr code : 

<script type="text/javascript">

    $(function () {

        //Proxy created on the fly

        var cus = $.connection.cusHub;

        //Declare a function on the job hub so the server can invoke

        cus.client.displayValue = function () {



        //Start the connection




    function getData() {

        var $tbl = $('#tblValue');


            url: $("#Get").val(),

            type: 'GET',

            datatype: 'json',

            success: function (data) {


                $.each(data.listCus, function (i, model) {



                            //'<tr>' +

                            //'<td>' + model.DeviceID + '</td>' +

                            //'<td>' + model.Value + '</td>' +









- This is Chart.js code : 


    var ctx = document.getElementById("percent-chart2");

    var my_val = document.getElementById('#"+tblValue.Value+"').innerHTML;

    //var my_val1 = $('#tblValue');

    if (ctx) {

            ctx.height = 209;

            var myChart = new Chart(ctx, {

                type: 'doughnut',

                data: {

                    datasets: [


                            label: "My First dataset",

                            //data: [my_val1, my_val1, my_val1],

                            data: [my_val, my_val, my_val],

                            backgroundColor: [





                            hoverBackgroundColor: [





                            borderWidth: [

                                0, 0, 0


                            hoverBorderColor: [







                    labels: [

                        'STATION 1',

                        'STATION 2',

                        'STATION 3'



                options: {

                    maintainAspectRatio: false,

                    responsive: true,

                    cutoutPercentage: 87,

                    animation: {

                        animateScale: true,

                        animateRotate: true


                    legend: {

                        display: false,

                        position: 'bottom',

                        labels: {

                            fontSize: 14,

                            fontFamily: "Poppins,sans-serif"



                    tooltips: {

                        titleFontFamily: "Poppins",

                        xPadding: 15,

                        yPadding: 10,

                        caretPadding: 0,

                        bodyFontSize: 16,







I don't know a lot of js but to use "getElementByID " information you must assure that the screen is completely  rendered  before the script starts running.  Some times you must delay the start of the script for that. 

Stay safe 


Huyen Nguyen

Thanks for your comment!!


If you're building an ASP.NET MVC application, this is the wrong forum to ask that question.


But ofcourse we should offer this developer a nice url where he can learn Outsystems. because with outtsystems you wont have to use this javascript. Its better maintainable and better readable with less errors.

Start here:


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.