OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do i insert a value into a chart?

  • Thread starter Thread starter Bagas Catur s
  • Start date Start date
B

Bagas Catur s

Guest
So i have this code that makes a bar chart that would shows a teaching points an university has. But, when i try to choose a university, the value of teaching1, 2 and 3 would just sit empty. Heres the HTML:

Code:
<th width="300px">
            <select class="form-control" id="select1" onchange="item1(this.value)">
              <option value="0">-- Select Anyone --</option>
            </select>
          </th>
          <th width="300px">
            <select class="form-control" id="select2" onchange="item2(this.value)">
              <option value="0">-- Select Anyone --</option>
            </select>
          </th>
          <th width="300px">
            <select class="form-control" id="select3" onchange="item3(this.value)">
              <option value="0">-- Select Anyone --</option>
            </select>
          </th>

Code:
 <tr>
          <th>Teaching</th>
          <td id="teaching1">N/A</td>
          <td id="teaching2">N/A</td>
          <td id="teaching3">N/A</td>
        </tr>

Javascript:

Code:
var ctxTeaching = document.getElementById('chartTeaching').getContext('2d');
new Chart(ctxTeaching, {
  type: 'bar',
  data: {
    labels: ['University 1', 'University 2', 'University 3'],
    datasets: [{
      label: 'Teaching',
      data: [
        document.getElementById("teaching1").innerHTML,
        document.getElementById("teaching2").innerHTML,
        document.getElementById("teaching3").innerHTML
      ],
      backgroundColor: 'rgba(75, 192, 192, 0.6)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

i tried using ais and stuff but i just still cant get a clue of whats wrong with the code

Before i use the new code, i did this and it works just fine. But, it will shows all the Unviersities from the JS file

Code:
var ctxTeaching = document.getElementById('chartTeaching').getContext('2d');
new Chart(ctxTeaching, {
  type: 'bar',
  data: {
    labels: teachingValues.map((_, i) => `University ${i + 1}`),
    datasets: [{
      label: 'Teaching',
      data: teachingValues,
      backgroundColor: 'rgba(75, 192, 192, 0.6)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

<p>So i have this code that makes a bar chart that would shows a teaching points an university has. But, when i try to choose a university, the value of teaching1, 2 and 3 would just sit empty. Heres the HTML:</p>
<pre><code><th width="300px">
<select class="form-control" id="select1" onchange="item1(this.value)">
<option value="0">-- Select Anyone --</option>
</select>
</th>
<th width="300px">
<select class="form-control" id="select2" onchange="item2(this.value)">
<option value="0">-- Select Anyone --</option>
</select>
</th>
<th width="300px">
<select class="form-control" id="select3" onchange="item3(this.value)">
<option value="0">-- Select Anyone --</option>
</select>
</th>
</code></pre>
<pre><code> <tr>
<th>Teaching</th>
<td id="teaching1">N/A</td>
<td id="teaching2">N/A</td>
<td id="teaching3">N/A</td>
</tr>

</code></pre>
<p>Javascript:</p>
<pre><code>var ctxTeaching = document.getElementById('chartTeaching').getContext('2d');
new Chart(ctxTeaching, {
type: 'bar',
data: {
labels: ['University 1', 'University 2', 'University 3'],
datasets: [{
label: 'Teaching',
data: [
document.getElementById("teaching1").innerHTML,
document.getElementById("teaching2").innerHTML,
document.getElementById("teaching3").innerHTML
],
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</code></pre>
<p>i tried using ais and stuff but i just still cant get a clue of whats wrong with the code</p>
<p>Before i use the new code, i did this and it works just fine. But, it will shows all the Unviersities from the JS file</p>
<pre><code>var ctxTeaching = document.getElementById('chartTeaching').getContext('2d');
new Chart(ctxTeaching, {
type: 'bar',
data: {
labels: teachingValues.map((_, i) => `University ${i + 1}`),
datasets: [{
label: 'Teaching',
data: teachingValues,
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</code></pre>
 

Latest posts

Top