$.ajax({
    alert: ("It has started"),

    type: "post",
    url: "BarChart.asmx/CreateSubListTable",
    data : '{sentdate: "' + $("#txtDate").val() + '" }',
    //data: { sentdate: txtDate },
    datetocheck: "{ firstName: 'Aidy', lastName: 'F' }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    //success: function (res, textStatus) {
    success: function (data, textStatus,datetocheck) {
        var data1 = JSON.parse(data.d);
       
        
        console.log(data1);
        createbarchart(data1);
        //pass the array of data1 into a function
        //drawdoughnutchat(data1);
        // console.log("Function called");
    },
    error: function (xhr, textStatus, error) {
        console.log(xhr.responseText);
        console.log(xhr.statusText);
        console.log(textStatus);
        console.log(error);
    }
})



var chartColors = {
    red: 'rgb(255, 99, 132)',
    blue: 'rgb(54, 162, 235)'
};
var colorChangeValue = 0;
var ticks = [0, 10000, 7000, 3000, 1000, 500, 100];

const config1 = {
  
    data: {
        //labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
            {
                type: 'bar',
                label: ['Fine Planning'],
                data: [10, 100],
                backgroundColor: ['#990000','#0066CC'],
                //borderColor: 'red',
                borderWidth: 1,
                barThickness: 22,
                yAxisID: 'y',
                order : 2,
            },  {
                type: 'line',
                yAxisID: 'y1',
                order : 1,
                label: ['Inventory'],
                data: [],
                backgroundColor: ['yellow'],
                fill:false,
                borderColor: 'yellow',
                //tension: 0.1,
                pointStyle: 'line',
                radius: 10,

                
                //hoverRadius : 10,
                //
                showLine: false,
                borderWidth : 6

            }
        ]
    },
    options: {
        tooltips: {
            mode: 'label',
            callbacks: {
                title: function (tooltipItems, data) {
                    return data.labels[tooltipItems.index] + ' ';
                },
                label: function (tooltipItem, data) {
                    return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
                },
            }
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                position: 'left',
                type: 'linear',
                beginAtZero: true,
                min: -3,
                max: 4,
                grid: {
                    borderColor: 'white',
                    color: '#202020',
                    display: true,
                },
                ticks: {
                    display: true,
                    color: 'white',
                    lineWidth: 1,
                    tickWidth: 100,
                    padding : 0
                },
                
                
            },
            y1: [{
                scaleLabel: {
                    display: true,
                    labelString: 'LABEL',
                },
                type: 'logarithmic',
                position: 'right',
                ticks: {
                    min: 0, //minimum tick
                    max: 10000000, //maximum tick
                    callback: function (value, index, values) {
                        if (value >= 0) {
                            return value / 1e6 + 'M';
                        }//pass tick values as a string into Number function
                    }
                },
                afterBuildTicks: function (scale) { //Build ticks labelling as per your need
                    scale.ticks = ticks;
                }
            }],



            x: {
                beginAtZero: true,
                grid: {
                    display: true,
                    //borderColor: 'white'

                },
                ticks: {
                    display: true,
                    color: 'white',
                    padding: 1,
                    autoSkip: false,
                    maxRotation: 90,
                    minRotation: 90
                }
             
            }
        },
        plugins: {
            legend: {
                display: false,
               
            },
            //title: {
            //    display: true,
            //    //text: (ctx) => {
            //    //    const { intersect, mode } = ctx.chart.options.interaction;
            //    //    return 'Mode: ' + mode + ', intersect: ' + intersect;
            //    //}
            //}
        },
        legend: {
            display: false
        },
     
    },
};


//var options = {
//    responsive: true,
//    maintainAspectRatio: false,
//    scales: {
//        y: {
//            position: 'left',
//            type: 'linear',
//            beginAtZero: true,
//            min: -3,
//            max: 4,
//            grid: {
//                borderColor: 'white',
//                color: '#202020',
//                display: true,
//            },
//            ticks: {
//                display: true,
//                color: 'white',
//                lineWidth: 1,
//                tickWidth: 100,
//                padding: 0
//            },


//        },
//        y1: {
//            type: 'linear',
//            display: true,
//            position: 'right',
//            beginAtZero: false,
//            min: -1500000,
//            max: 2000000,
//            grid: {
//                //borderColor: 'white',
//                //color: '#202020',
//                display: true,
//                drawBorder: false,
//                color: function (context) {
//                    if (context.tick.value > 0) {
//                        return "#202020";
//                    } else if (context.tick.value < 0) {
//                        return "#202020";
//                    }

//                    return 'white';
//                }
//            },
//            ticks: {
//                padding: 0,
//                display: true,
//                color: 'white',
//                lineWidth: 0,
//                //tickWidth: 100,
//                stepSize: 500000,
//                callback: function (value, index) {
//                    //console.log(value);
//                    if (value >= 0) return value / 1e6 + 'M';
//                    /* OR *
//                    if (value === 0) return 100 + '%';
//                    else return value + '%'; */
//                },
//                // callback: function (value, index, values) {
//                //    return value / 1e4 + 'K';
//                //}

//            }

//        },
//        x: {
//            beginAtZero: true,
//            grid: {
//                display: true,
//                //borderColor: 'white'

//            },
//            ticks: {
//                display: true,
//                color: 'white',
//                padding: 1,
//                autoSkip: false,
//                maxRotation: 90,
//                minRotation: 90
//            }

//        }
//    },
//    plugins: {
//        legend: {
//            display: false,

//        },
       
//    },
//    legend: {
//        display: false
//    },
//}

function createbarchart(listofdata) {
    //console.log(listofdata);

   // console.log(listofdata[1][1][0].Result);
    var allcanvas = document.getElementsByTagName("canvas");
    for (i = 0; i < listofdata.length; i++) {
        var runningjobtblstr = listofdata[i][0][0].TableName;
        if (runningjobtblstr != "Test") {

            //console.log(listofdata[i][1].length);
            if (listofdata[i][1].length != 0) {
                var resultlabel = [];
                var resultdata = [];
                var barcolor = [];
                var resultinv = [];
                for (j = 0; j < listofdata[i][1].length; j++) {
                    //console.log(listofdata[i][1][j].Result);
                    //console.log(listofdata[i][1][j].PU_namerough);
                    console.log(listofdata[i][1][j].Inventory);
                    resultlabel.push(listofdata[i][1][j].PU_namerough);
                    resultdata.push(listofdata[i][1][j].Result);
                    resultinv.push(listofdata[i][1][j].Inventory);
                  
                    if (listofdata[i][1][j].Result > 0) {
                        barcolor.push('#0066CC') //'#990000
                    }
                    else {
                        barcolor.push('#990000')
                    }
                    
            }
            }

            config1.data.labels = resultlabel;
            config1.data.datasets[0].data = resultdata;
            config1.data.datasets[0].backgroundColor = barcolor;
            config1.data.datasets[1].data = resultinv;
           // console.log(config1.data.datasets[0].backgroundColor);
            
        

            //for (var i = 0; i < config1.data.datasets[0].data.length; i++) {
            //    if (dataset.data[i] > colorChangeValue) {
            //        dataset.backgroundColor[i] = chartColors.blue;
            //    }
            //}

            var modcanvasid = "bar" + runningjobtblstr;
            var ctx = document.getElementById(modcanvasid).getContext("2d");
            var myChart = new Chart(ctx, config1);
            

          

            resultdata = [];
            resultlabel = [];
            resultinv = [];

           
          
        
        }

    }


}