I am working on a page that uses datatables to retrieve highcharts. Charts for Buttons one and three are fine. The problem I am facing is with Button two – Bar chart. For the chart, I am trying to display the values from column 2022 as Y axis and Percent column as X axis. The legend should also display Y axis columns. What am I missing? Here is my code.
// Function to initialize Highcharts charts
function initializeChart(chartId, chartTitle, chartData, chartType) {
Highcharts.chart(chartId, {
chart: {
type: chartType,
styledMode: false
},
title: {
text: chartTitle
},
colors: ['#1a4480', '#e52207', '#e66f0e', '#ffbe2e', '#fee685', '#538200', '#04c585', '#97d4ea', '#009ec1', '#0076d6', '#adadad', '#8168b3', '#d72d79', '#f2938c'],
tooltip: {
pointFormat: '</b> {point.y:.1f}%'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
format: '{point.y:.1f}%',
style: {
fontSize: "12px"
}
},
showInLegend: true
},
pie: {
dataLabels: {
enabled: true,
format: '{point.y:.1f}%',
style: {
fontSize: "12px"
}
},
showInLegend: true
}
},
legend: {
symbolRadius: 0,
itemStyle: {
color: '#000000',
fontSize: '16px'
}
},
series: [{
data: chartData
}]
});
}
// Function to retrieve chart data from DataTable
function getChartData(table) {
const data = [];
table.rows().every(function () {
const row = this.data();
data.push({
name: row[0],
y: parseFloat(row[1])
});
});
return data;
}
// Check if DataTable and Highcharts are defined before calling the function
if (typeof DataTable !== 'undefined' && typeof Highcharts !== 'undefined') {
initializeCharts();
}
function initializeCharts() {
const table1 = new DataTable('#example1', {
searching: false,
info: true,
paging: false,
sort: false
});
const table2 = new DataTable('#example', {
searching: false,
info: true,
paging: false,
sort: false
});
const chartData1 = getChartData(table1);
const chartData2 = getChartData(table2);
initializeChart('demo-output', 'FY 2023', chartData1, 'pie');
initializeChart('demo-output2', 'FY 2022', chartData2, 'bar');
var categories = [];
var allSeriesData = [];
var table = $("#example2").DataTable({
searching: false,
responsive: true,
lengthChange: false,
ordering: false,
info: false,
paging: false,
initComplete: function (settings, json) {
let api = new $.fn.dataTable.Api(settings);
var headers = api.columns().header().toArray();
headers.forEach(function (heading, index) {
if (index > 0 && index < headers.length) {
categories.push($(heading).html());
}
});
let rows = api.rows().data().toArray();
rows.forEach(function (row) {
group = {
name: '',
data: []
};
row.forEach(function (cell, idx) {
if (idx == 0) {
group.name = cell;
} else if (idx < row.length) {
group.data.push(parseFloat(cell.replace(/,/g, '')));
}
});
allSeriesData.push(group);
});
}
});
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
var myChart = Highcharts.chart("chart-A", {
chart: {
type: "column",
borderColor: 'lightgray',
borderWidth: 1,
marginTop: 50
},
tooltip: {
headerFormat: '{point.key}<br/>',
pointFormat: '{series.name}: <b>{point.y:.1f}%</b>'
},
legend: {
symbolRadius: 0,
itemStyle: {
color: '#000000',
fontSize: '16px'
}
},
colors: ['#003489', '#ED7D31', '#A5A5A5', '#FFC000', '#5B9BD5'],
credits: {
enabled: false
},
title: {
text: "Trends"
},
xAxis: {
categories: categories,
labels: {
style: {
fontWeight: '600',
fontSize: '16px',
color: '#000000'
}
}
},
yAxis: {
title: false,
tickInterval: 10,
max: 60,
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
},
style: {
fontWeight: '600',
fontSize: '16px',
color: '#000000'
}
}
},
series: allSeriesData
});
$('.usa-button').on('click', function () {
var buttonId = $(this).attr('id');
if (buttonId === 'previous') {
$('#chart2').show();
$('#chart1').hide();
$('#chart3').hide();
} else if (buttonId === 'trend') {
$('#chart2').hide();
$('#chart1').hide();
$('#chart3').show();
} else {
$('#chart2').hide();
$('#chart1').show();
$('#chart3').hide();
}
$('.usa-button').removeClass('active');
$(this).addClass('active');
});
$('#current').addClass('active');
}<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/dataTables.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div class="ar-controls grid-row tablet:flex-justify-start">
<div class="tablet:grid-col-auto margin-bottom-205"><button id="current" class="usa-button usa-button--outline" title="Select to see related information below">one</button> <button id="previous" class="usa-button usa-button--outline" title="Select to see related information below">two</button> <button id="trend" class="usa-button usa-button--outline" title="Select to see related information below">three</button></div>
</div>
<div id="chart1">
<div id="demo-output" class="chart-display" style=" margin-bottom: 2em; height: 500px; border: solid 1px lightgray;"></div>
<table id="example1" class="display" style=" width: 100%;"><thead>
<tr>
<th scope="col">2023</th>
<th scope="col">Percent</th>
</tr>
</thead>
<tr>
<td scope="row">ABC</td>
<td>45.9%</td>
</tr>
<tr>
<td scope="row">DEF</td>
<td>22.0%</td>
</tr>
<tr>
<td scope="row">GHI</td>
<td>13.6%</td>
</tr>
</table>
</div>
<div id="chart2" style=" display: none;">
<div id="demo-output2" class="chart-display2" style=" margin-bottom: 2em; height: 680px; border: solid 1px lightgray;"></div>
<table id="example" class="display" style=" width: 100%;"><thead>
<tr>
<th scope="col">2022</th>
<th scope="col">Percent</th>
</tr>
</thead>
<tr>
<td>123</td>
<td>51.90%</td>
</tr>
<tr>
<td>456</td>
<td>18.60%</td>
</tr>
</table>
</div>
<div id="chart3" style=" display: none;">
<div id="chart-A" style=" width: 100%; height: 500px;"></div>
<table class="row-border stripe no-footer cell-border padding-top-5" id="example2" style=" width: 100%;"><thead>
<tr>
<th>Year</th>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tr>
<td scope="row" style=" text-align: left; white-space: nowrap;">FY19</td>
<td style=" text-align: left;">42.7%</td>
<td style=" text-align: left;">17.3%</td>
<td style=" text-align: left;">9.5%</td>
</tr>
<tr>
<td scope="row" style=" text-align: left;">FY20</td>
<td style=" text-align: left;">49.5%</td>
<td style=" text-align: left;">16.3%</td>
<td style=" text-align: left;">3.4%</td>
</tr>
</table>
</div>
</div>