CODEWITHSUNDEEP
javascriptjquerychart.js
user163169
user163169

Reputation: 135

chart js Labels and Grouping labels

Need a little schooling please. I have a working chart I need to change it up a bit. My data has four fields omlPartgroup, xmonth, xyear and QTY I would like my chart to show each omlpartgroup and then the month and year in that group so I would have 12 bars for each partgroup and the labels would be the part group with sub groups of year and month.

my code

window.jQuery(document).ready(function(){
window.jQuery.ajax({
   url:"http://localhost/html5/data.php",
   method:"GET",
   success: function(data){
        console.log(data)
        var omlPartgroupid =[];
        var xyear =[];
        var xmonth =[];
        var QTY=[];

        for(var i in data){
            omlPartgroupid.push("PartGroup"+ data[i].omlPartgroupid);
            xyear.push(data[i].xyear);
            xmonth.push(data[i].xmonth);
            QTY.push(data[i].QTY);
            }
       var chartdata ={
           labels:xmonth,
           datasets :[
            {
           backgroundColor: 'rgba(200,200,200,0.75)',
           borderColor: 'rgba(200,200,200,0.75)',
           hoverBackground: 'rgba(200,200,200,1)',
           hoverBorderColor:  'rgba(200,200,200,1)',
           data:QTY
            }
               ]
       };
       var ctx=$("#mycanvas");
       var barGraph =new Chart(ctx,{
           type: 'bar',
           data: chartdata

       });
   },
   error: function(data){
       console.log(data);
   }

}); });

my data

[{"omlPartgroupid":"191  ","xmonth":"10","xyear":"2015","QTY":"52"},{"omlPartgroupid":"191  ","xmonth":"11","xyear":"2015","QTY":"145"},{"omlPartgroupid":"191  ","xmonth":"12","xyear":"2015","QTY":"122"},{"omlPartgroupid":"191  ","xmonth":"1","xyear":"2016","QTY":"348"},{"omlPartgroupid":"191  ","xmonth":"2","xyear":"2016","QTY":"460"},{"omlPartgroupid":"191  ","xmonth":"3","xyear":"2016","QTY":"187"},{"omlPartgroupid":"191  ","xmonth":"4","xyear":"2016","QTY":"109"},{"omlPartgroupid":"191  ","xmonth":"5","xyear":"2016","QTY":"234"},{"omlPartgroupid":"191  ","xmonth":"6","xyear":"2016","QTY":"166"},{"omlPartgroupid":"191  ","xmonth":"7","xyear":"2016","QTY":"186"},{"omlPartgroupid":"191  ","xmonth":"8","xyear":"2016","QTY":"250"},{"omlPartgroupid":"191  ","xmonth":"9","xyear":"2016","QTY":"1077"},{"omlPartgroupid":"191  ","xmonth":"10","xyear":"2016","QTY":"594"},{"omlPartgroupid":"193  ","xmonth":"10","xyear":"2015","QTY":"39"},{"omlPartgroupid":"193  ","xmonth":"11","xyear":"2015","QTY":"183"},{"omlPartgroupid":"193  ","xmonth":"12","xyear":"2015","QTY":"136"},{"omlPartgroupid":"193  ","xmonth":"1","xyear":"2016","QTY":"212"},{"omlPartgroupid":"193  ","xmonth":"2","xyear":"2016","QTY":"460"},{"omlPartgroupid":"193  ","xmonth":"3","xyear":"2016","QTY":"176"},{"omlPartgroupid":"193  ","xmonth":"4","xyear":"2016","QTY":"187"},{"omlPartgroupid":"193  ","xmonth":"5","xyear":"2016","QTY":"174"},{"omlPartgroupid":"193  ","xmonth":"6","xyear":"2016","QTY":"151"},{"omlPartgroupid":"193  ","xmonth":"7","xyear":"2016","QTY":"164"},{"omlPartgroupid":"193  ","xmonth":"8","xyear":"2016","QTY":"237"},{"omlPartgroupid":"193  ","xmonth":"9","xyear":"2016","QTY":"798"},{"omlPartgroupid":"193  ","xmonth":"10","xyear":"2016","QTY":"662"},{"omlPartgroupid":"195  ","xmonth":"10","xyear":"2015","QTY":"9"},{"omlPartgroupid":"195  ","xmonth":"11","xyear":"2015","QTY":"38"},{"omlPartgroupid":"195  ","xmonth":"12","xyear":"2015","QTY":"35"},{"omlPartgroupid":"195  ","xmonth":"1","xyear":"2016","QTY":"68"},{"omlPartgroupid":"195  ","xmonth":"2","xyear":"2016","QTY":"161"},{"omlPartgroupid":"195  ","xmonth":"3","xyear":"2016","QTY":"73"},{"omlPartgroupid":"195  ","xmonth":"4","xyear":"2016","QTY":"69"},{"omlPartgroupid":"195  ","xmonth":"5","xyear":"2016","QTY":"56"},{"omlPartgroupid":"195  ","xmonth":"6","xyear":"2016","QTY":"55"},{"omlPartgroupid":"195  ","xmonth":"7","xyear":"2016","QTY":"50"},{"omlPartgroupid":"195  ","xmonth":"8","xyear":"2016","QTY":"114"},{"omlPartgroupid":"195  ","xmonth":"9","xyear":"2016","QTY":"1046"},{"omlPartgroupid":"195  ","xmonth":"10","xyear":"2016","QTY":"883"},{"omlPartgroupid":"197  ","xmonth":"10","xyear":"2015","QTY":"34"},{"omlPartgroupid":"197  ","xmonth":"11","xyear":"2015","QTY":"76"},{"omlPartgroupid":"197  ","xmonth":"12","xyear":"2015","QTY":"114"},{"omlPartgroupid":"197  ","xmonth":"1","xyear":"2016","QTY":"173"},{"omlPartgroupid":"197  ","xmonth":"2","xyear":"2016","QTY":"327"},{"omlPartgroupid":"197  ","xmonth":"3","xyear":"2016","QTY":"134"},{"omlPartgroupid":"197  ","xmonth":"4","xyear":"2016","QTY":"125"},{"omlPartgroupid":"197  ","xmonth":"5","xyear":"2016","QTY":"200"},{"omlPartgroupid":"197  ","xmonth":"6","xyear":"2016","QTY":"104"},{"omlPartgroupid":"197  ","xmonth":"7","xyear":"2016","QTY":"99"},{"omlPartgroupid":"197  ","xmonth":"8","xyear":"2016","QTY":"191"},{"omlPartgroupid":"197  ","xmonth":"9","xyear":"2016","QTY":"845"},{"omlPartgroupid":"197  ","xmonth":"10","xyear":"2016","QTY":"578"},{"omlPartgroupid":"199  ","xmonth":"10","xyear":"2015","QTY":"35"},{"omlPartgroupid":"199  ","xmonth":"11","xyear":"2015","QTY":"75"},{"omlPartgroupid":"199  ","xmonth":"12","xyear":"2015","QTY":"76"},{"omlPartgroupid":"199  ","xmonth":"1","xyear":"2016","QTY":"105"},{"omlPartgroupid":"199  ","xmonth":"2","xyear":"2016","QTY":"229"},{"omlPartgroupid":"199  ","xmonth":"3","xyear":"2016","QTY":"147"},{"omlPartgroupid":"199  ","xmonth":"4","xyear":"2016","QTY":"73"},{"omlPartgroupid":"199  ","xmonth":"5","xyear":"2016","QTY":"50"},{"omlPartgroupid":"199  ","xmonth":"6","xyear":"2016","QTY":"58"},{"omlPartgroupid":"199  ","xmonth":"7","xyear":"2016","QTY":"103"},{"omlPartgroupid":"199  ","xmonth":"8","xyear":"2016","QTY":"4230"},{"omlPartgroupid":"199  ","xmonth":"9","xyear":"2016","QTY":"2570"},{"omlPartgroupid":"199  ","xmonth":"10","xyear":"2016","QTY":"730"}]

Upvotes: 3

Views: 10134

Answers (1)

jeff carey
jeff carey

Reputation: 2373

This is referenced here: https://github.com/chartjs/Chart.js/issues/2138

The bulk of it is creating a 2nd axis. I've omitted some of the setup here but you can find a JS Fiddle below:

    options: {
        scales: {
            xAxes:[ {
                id: 'time',
                type: 'category',
                ticks: {
                    callback: function(label) {
                        var labelArray = label.split("|");
                        return  labelArray[0] + "/" + labelArray[1];
                    }
                }
            },
            {
                id: 'partGroup',
                type: 'category',
                gridLines: {
                    drawOnChartArea: false // only want the grid lines for one axis to show up
                },
                ticks: {
                    callback: function(label) {
                        var labelArray = label.split("|");
                        return labelArray[0] === "10" && labelArray[1] == "2015" ?      labelArray[2] : "";
                    }
                }

            }


             ]
        }
    }

Here's a Fiddle with your data

Upvotes: 4

Related Questions