This specific JavaScript code is designed to showcase table data in the form of a chart.
<script type="text/javascript">
$(function () {
$('#container').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Results'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
}
});
});
</script>
Included below is the HTML markup that holds the necessary data:
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>Pears</th>
<td>2</td>
<td>0</td>
</tr>
</tbody>
</table>
Additionally, I have these values within my HTML and wish to implement them into the chart instead of the default data (Jane, John, Apples, Pears).
<div id="name"> </div>
<div id="age"></div>
"name" and "age" contain unique values. Is it possible to incorporate these values into the chart rather than the existing ones? Any suggestions on how to achieve this?
Explore this link for reference on current functionality.
The current display of my chart resembles what's showcased in the provided link. Can I update it to show "name" and "age" instead?