I am trying to set the values of bars in descending order. First way is to make a key value pair like passing company name along with value and then sort them. But the issue is I am sending an array of 10 companies as label and then array of 10 companies as data. I dont know how to send them as object of array and sort it. or is there any other way to do it in chart js. A
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href='https://fonts.googleapis.com/css?family=Hind' rel='stylesheet'>
<title>Sarmaaya Charts</title>
</head>
<style>
body {
color: rgb(177, 177, 177) !important;
}
</style>
<body>
<div class="container m-3 ">
<div class="row ">
<div class="col-lg-12 col-md-12 col-sm-12 bg-white">
<h6 class=" ">Top Points Contributor </h6>
<hr width="100%">
<canvas id="topContributor"></canvas>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"
integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
Chart.register(ChartDataLabels);
function createChart(topGainersNames, topGainersChange, topLosersNames, topLosersChange) {
return {
labels: chartLabels,
datasets: [
{
type: 'bar',
label: topGainersNames,
//label: ['FFC', 'CCF', 'DFG', 'FFC', 'MTL', 'SYS', 'INDU', 'ACLU', 'ABC', 'XYZ', 'EFl', 'LMK'],
data: topGainersChange,
backgroundColor: '#2FC798',
borderColor: '#2FC798',
datalabels: {
align: 'top',
anchor: 'end',
offset: 4,
color: '#2FC798',
},
},
{
type: 'bar',
label: topLosersNames,
data: topLosersChange,
backgroundColor: '#C72151',
borderColor: '#C72151',
datalabels: {
align: 'bottom',
anchor: 'end',
offset: 4,
color: '#C72151',
},
},
],
}
}
function chartStyling() {
return {
animation: {
duration: 500,
},
responsive: true,
interaction: {
mode: 'index',
intersect: false
},
layout: {
padding: 20
},
elements: {
point: {
hoverRadius: 6
}
},
plugins: {
tooltip: {
caretSize: 10,
yAlign: 'bottom',
caretPadding: 50,
padding: 10,
position: 'nearest',
mode: 'nearest',
intersect: false,
enabled: true,
borderWidth: 20,
intersect: true,
backgroundColor: 'rgb(92, 89, 89)',
callbacks: {
/*label: function (context) {
//console.log('aa', context.dataset.data[context.dataIndex])
//return context.dataset.label[context.dataIndex] + '\n' +
// context.dataset.data[context.dataIndex];
//return `${context.dataset.label[context.dataIndex]} \n Index Point : 15.45 \n Weight :0.68% \n Market Cap : Rs. 12,79,90,000 \n % Px Chg : 5.55% \n`
return `(${context.dataset.label[context.dataIndex]} + "/n" + 'rs').split('\n')`;
},*/
label: function (context) {
return context.dataset.label[context.dataIndex];
},
afterLabel: function (context) {
var someValue2 = "\nIndex Point: \nWeight: \nMarket Cap: \n% Px Chg: ";
return someValue2;
}
}
},
elements: {
point: {
pointStyle: 'rect'
}
},
legend: {
display: false,
position: 'top',
align: 'end',
labels: {
boxWidth: 5,
usePointStyle: true,
}
},
datalabels: {
display: true,
borderWidth: 0.5,
color: 'black',
formatter: function (value, context) {
//console.log(context.dataset.label)
return context.dataset.label[context.dataIndex] + '\n' + 'Rs ' + value
},
font: {
size: 10,
weight: 'bold',
}
}
},
scales: {
y: {
display: false,
stacked: true,
grid: {
display: false,
lineWidth: 3
},
},
x: {
stacked: true,
display: false,
grid: {
display: false,
},
}
}
}
}
chartLabels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var formdata = new FormData();
formdata.append("market_symbol", "KSE100");
var sam;
var requestOptions = {
method: 'POST',
body: formdata,
redirect: 'follow',
};
var topGainers = [18.32, 12.37, 11.37, 10.22, 9.45, 8.98, 8.76, 7.34, 6.4, 5.21, 4.32, 3.22]
var topLosers = [-8.32, -7.37, -6.37, -5.39, -5.37, -4.37, -4.19, -3.77, -3.12, -2.98, -2.34, -2.19]
fetch("https://dev-api.sarmaaya.pk/3.0/view_market_performers.php", requestOptions)
.then(response => response.json())
.then(data => apiData(data)
).catch(error =>
console.log('error', error)
);
const apiData = (data) => {
var topGainersNames = []
var topLosersNames = []
var topGainersChange = []
var topLosersChange = []
for (var i = 0; i < data.gainers.length; i++) {
topGainersNames.push(data.gainers[i].stock_symbol)
topLosersNames.push(data.losers[i].stock_symbol)
topGainersChange.push(data.gainers[i].stock_change)
topLosersChange.push(data.losers[i].stock_change)
}
console.log('topGainersNames', topGainersNames)
console.log('topGainersChange', topGainersChange)
console.log('topLosersNames', topLosersNames)
console.log('topLosersChange', topLosersChange)
var ctx = document.getElementById('topContributor').getContext('2d');
var myChart = new Chart(ctx, {
data: createChart(topGainersNames, topGainersChange, topLosersNames, topLosersChange),
options: chartStyling()
})
}
</script>
</body>
</html>
