show chart on department wise/based
Greetings,
have bind chart successfully.
Requirement:
Want to show bar department wise , it means department position will go to satatus position (approve,pending and reject )
and status position will go to department ( below image is for reference )
Solution Required: legend position will show status which is Approve/pending and reject and status position will show department,
My code:
if (response.d.length > 0) {
var dataarray = [];
var datapending = [];
var datareject = [];
var datalabel = ['Approved', 'Pending', 'Rejected'];
// var test='10,4,3,8';
var dataapproved = []
console.log(dataarray);
for (var i = 0; i < response.d.length; i++) {
console.log(response.d[i].DepartName);
dataarray.push({ name: response.d[i].DepartName + '( ' + response.d[i].totaldocs + ' )', data: [response.d[i].pendingdocs, response.d[i].approveddocs, response.d[i].rejecteddocs] });
//dataarray.push({name:'Approved,' data:response.d[i].approveddocs});
datapending.push({name:'Pending', data: [response.d[i].pendingdocs]});
datareject.push({ data: [response.d[i].rejecteddocs] });
}
new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
data: {
series:dataarray,
chartOptions: {
chart: {
type: 'bar',
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: 'Total Documents'
},
xaxis: {
categories:datalabel ,
labels: {
formatter: function (val) {
return val + "K"
}
}
},
yaxis: {
title: {
text: undefined
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
nbsp; horizontalAlign: 'left',
offsetX: 40
}
},
},
})
}
Thanks
Joginder BangerPosted Feb 20, 2020, 9:40 AM