- 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 () {

            getData();

        };

        //Start the connection

        $.connection.hub.start();

        getData();

    });

    function getData() {

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

        $.ajax({

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

            type: 'GET',

            datatype: 'json',

            success: function (data) {

                $tbl.empty();

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

                    $tbl.append

                        (

                            //'<tr>' +

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

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

                            //'</tr>'

                             model.Value

                        );

                });

            }

        });

    }

</script>

- This is Chart.js code : 

<script>

    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: [

                                '#00b5e9',

                                '#fa4251',

                                '#006400'

                            ],

                            hoverBackgroundColor: [

                                '#00b5e9',

                                '#fa4251',

                                '#006400'

                            ],

                            borderWidth: [

                                0, 0, 0

                            ],

                            hoverBorderColor: [

                                'transparent',

                                'transparent',

                                'transparent'

                            ]

                        }

                    ],

                    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,

                    }

                }

            });

        }

</script>