none
show chart on department wise/based RRS feed

  • 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

    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