How to get a value from function javascript and print it to the chart
Question
I get stuck when I try to print my result or value from function on javascript to the chart. This is how I call my function from javascript:
<script type="text/javascript">
$(document).ready(function(){
var testModel = id3(examples_personality,'kepribadian',features_personality);
document.getElementById("akurasi").innerText = calcError(samples_personality,testModel,'kepribadian');
});
</script>
and I try to print the result like this :
<span id='akurasi'></span>
it's work fine if I use it on html, the value show up, but when I try to use for the chart, it does not work. this is my code chart:
// Data Training Chart
new Chart(document.getElementById("Data-Training-chart"), {
type: 'polarArea',
data: {
labels: ["Data Training (%)", "Data Testing (%)"],
datasets: [
{
label: "jumlah ",
backgroundColor: ["#3e95cd", "#ff4137"],
data: [<span id='akurasi'></span>,100]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Data Training'
}
}
});
For information I using chartjs for the chart from this : Link chart
1 answers
solution1
0 ACCPTED 2017-12-10 14:40:43
As this doc-side states you have to use an array of data points (numbers), but within your data the first item is not a number:
data: [<span id='akurasi'></span>,100]
You can query this value by using getElementById for instance:
data: [+document.getElementById("akurasi").innerText,100]
It should work if your calcError function returns a numeric value to show it with akurasi :
<span id='akurasi'>35</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello!</title> </head> <body> <canvas id="chart" width="100" height="100"></canvas> <span id='akurasi'></span> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script> <script type="text/javascript"> $(document).ready(function(){ // ... document.getElementById("akurasi").innerText = 35; var chart = setupChart(); // you can do whatever you want with this chart here... }); function setupChart(){ return new Chart(document.getElementById("chart"), { type: 'polarArea', data: { labels: ["Data Training (%)", "Data Testing (%)"], datasets: [ { label: "jumlah ", backgroundColor: ["#3e95cd", "#ff4137"], data: [+document.getElementById("akurasi").innerText,100] } ] }, options: { legend: { display: false }, title: { display: true, text: 'Data Training' } } }); } </script> </html>
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.