I using SignalR by Js to update my data from the database and put my data to Chart.js . But maybe my syntax goes wrong. Could you help me to edit my code? Thank you very much.
My signalR function 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>
I display data in HTML by ID “tblValue” and my browser is “1000” :
<h2 id="tblValue"> </h2>
And I get data with getElementByID from id “tblValue” into data of Chart.js but it is null and there is nothing in my chart :
<script>
var ctx = document.getElementById("percent-chart2");
var my_val = document.getElementById('tblValue').innerHTML;
var vals = parseFloat(my_val);
if (ctx) {
ctx.height = 209;
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
label: "My First dataset",
data: [vals , vals, vals ],
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>
I haven’t learned about web building but my thesis relates to it. So I really need your support. Please help me.