Hi I am new to HTML & javascript and trying to build a website.
I am trying to make a histogram plot in HTML by retrieving data from my database, converting them into Json response, and passing it to HTML.
My Json response
{'bins':[b1,b2,b3,b4...], 'number':[n1,n2,n3,n4...]}
The problem is, if the number of data records retrieved is larger than some value (around 100, not strictly tested), the chart will be there, but it is blank.
If the number of records retrieved is fewer, the chart will be displaying normally.
I've checked the JSON response and the response is indeed sent back every time.
<script>
var endpoint = '/api/data/'
var defaultData = []
var labels = []
$.ajax({
type: "get",
url: endpoint,
success: function(data) {
labels = data.bins
defaultData = data.number
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '# of records',
data: defaultData
}]
}
})
},
error: function(error_data) {
alert('Error: ajax request error！')
console.log('error')
console.log(error_data)
}
})
</script>
<div class='row'>
<div class='col-sm-3' url-endpoint='{% url "api-data" %}'>
<canvas id='myChart' class="plot" data-url='/api/data' width='400px' , height='400px'> </canvas>
</div>
</div>
Many thanks!
Updates My apologize for not mentioning the package I've used. I was using Django and chart.js for this chart plotting. And I found the reason of this problem is actually due to the printing of data after plotting the chart. Please see my code below for more information.
<!-- Plotting the chart -->
<script>
var endpoint = '/api/data/'
var defaultData = []
var labels = []
$.ajax({
type: "get",
url: endpoint,
success: function(data) {
labels = data.bins
defaultData = data.number
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '# of records',
data: defaultData
}]
}
})
},
error: function(error_data) {
alert('Error: ajax request error！')
console.log('error')
console.log(error_data)
}
})
</script>
<div class='row'>
<div class='col-sm-3' url-endpoint='{% url "api-data" %}'>
<canvas id='myChart' class="plot" data-url='/api/data' width='400px' , height='400px'> </canvas>
</div>
</div>
<!-- Printing the data in a table -->
<table class="table table-striped" data-toggle="table"
data-pagination="true" data-side-pagination="client" data-height="700" data-show-columns="true" data-search="true" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar" data-page-size="10" >
<thead>
<tr>
<th>Compound</th>
<th>Standard name</th>
<th>Value</th>
<th>Specifier</th>
<th>DOI</th>
<th>Measurement Wavelength (None for not provided or unextracted)</th>
</tr>
</thead>
<ul>
<tbody>
{% for record in records %}
<tr>
<td>{{ record.compound }}</td>
<td>{{ record.normalised_name }}</td>
<td>{{ record.value }}</td>
<td>{{ record.specifier }}</td>
<td>{{ record.doi }}</td>
<td>{{ record.wavelength }}</td>
</tr>
{% endfor %}
</tbody>
<br><br><br>
</ul>
</table>
If I remove the "printing the data in a table" parts, then no matter how many data are retrieved, the chart can be successfully plotted.
It will be greatly appreciated if someone could help me spot the problem of my code and any suggestions of how to improve it will be very helpful.
