Answered by:
show chart on department wise/based

Question
-
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
- Moved by Wendy DZMicrosoft contingent staff Thursday, February 20, 2020 7:07 AM
Wednesday, February 19, 2020 9:23 AM
Answers
-
Done it my self by adding series like this
var dataLabel = [];var dataArrayApproved = [];var dataArrayPending = [];var dataArrayRejected = [];var approved = "";var pendingdocs = "";var rejecteddocs = "";for (var i = 0; i < response.d.length; i++) {dataLabel.push(response.d[i].DepartName);if(i>0 && i < response.d.length){approved += ',';pendingdocs += ',';rejecteddocs += ',';}approved += response.d[i].approveddocs;pendingdocs += response.d[i].pendingdocs;rejecteddocs += response.d[i].rejecteddocs;}dataArrayApproved.push(approved);dataArrayPending.push(pendingdocs);dataArrayRejected.push(rejecteddocs);var dataFinalArray = [];dataFinalArray.push({name: 'Approved',data: dataArrayApproved}, {name: 'Pending',data: dataArrayPending},{name: 'Rejected',data: dataArrayRejected});pls use the dataFinalArray to the chart series.- Marked as answer by qasimidl Tuesday, February 25, 2020 6:05 AM
Tuesday, February 25, 2020 6:05 AM
All replies
-
Is any one can help me out this ?
Thanks
Wednesday, February 19, 2020 6:45 PM -
Hi,
As this related to build chart by third-party chart library, I would suggest you post in third-party related forum, so the forum users who read the forums regularly can either share their knowledge.
Best Regards,
Lee
Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.
SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.Thursday, February 20, 2020 7:02 AM -
Just let me know ,How to build multiple series dyncamically, or give idea to build chart like that, so I may shift myself
Thanks
Thursday, February 20, 2020 8:58 AM -
Done it my self by adding series like this
var dataLabel = [];var dataArrayApproved = [];var dataArrayPending = [];var dataArrayRejected = [];var approved = "";var pendingdocs = "";var rejecteddocs = "";for (var i = 0; i < response.d.length; i++) {dataLabel.push(response.d[i].DepartName);if(i>0 && i < response.d.length){approved += ',';pendingdocs += ',';rejecteddocs += ',';}approved += response.d[i].approveddocs;pendingdocs += response.d[i].pendingdocs;rejecteddocs += response.d[i].rejecteddocs;}dataArrayApproved.push(approved);dataArrayPending.push(pendingdocs);dataArrayRejected.push(rejecteddocs);var dataFinalArray = [];dataFinalArray.push({name: 'Approved',data: dataArrayApproved}, {name: 'Pending',data: dataArrayPending},{name: 'Rejected',data: dataArrayRejected});pls use the dataFinalArray to the chart series.- Marked as answer by qasimidl Tuesday, February 25, 2020 6:05 AM
Tuesday, February 25, 2020 6:05 AM