//------------------------Code for drag and drop START------------------------------------------------------------

    // var container = document.querySelector("#container");
    // var activeItem = null;

    // var active = false;

    // container.addEventListener("touchstart", dragStart, false);
    // container.addEventListener("touchend", dragEnd, false);
    // container.addEventListener("touchmove", drag, false);

    // container.addEventListener("mousedown", dragStart, false);
    // container.addEventListener("mouseup", dragEnd, false);
    // container.addEventListener("mousemove", drag, false);

    // function dragStart(e) {

    //   if (e.target !== e.currentTarget) {
    //     active = true;

    //     // this is the item we are interacting with
    //     activeItem = e.target;

    //     if (activeItem !== null) {
    //       if (!activeItem.xOffset) {
    //         activeItem.xOffset = 0;
    //       }

    //       if (!activeItem.yOffset) {
    //         activeItem.yOffset = 0;
    //       }

    //       if (e.type === "touchstart") {
    //         activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
    //         activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
    //       } else {
    //         console.log("doing something!");
    //         activeItem.initialX = e.clientX - activeItem.xOffset;
    //         activeItem.initialY = e.clientY - activeItem.yOffset;
    //       }
    //     }
    //   }
    // }

    // function dragEnd(e) {
    //   if (activeItem !== null) {
    //     activeItem.initialX = activeItem.currentX;
    //     activeItem.initialY = activeItem.currentY;
    //   }

    //   active = false;
    //   activeItem = null;
    // }

    // function drag(e) {
    //   if (active) {
    //     if (e.type === "touchmove") {
    //       e.preventDefault();

    //       activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
    //       activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
    //     } else {
    //       activeItem.currentX = e.clientX - activeItem.initialX;
    //       activeItem.currentY = e.clientY - activeItem.initialY;
    //     }

    //     activeItem.xOffset = activeItem.currentX;
    //     activeItem.yOffset = activeItem.currentY;

    //     setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
    //   }
    // }

    // function setTranslate(xPos, yPos, el) {
    //   el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    // }

var enabled = false;
var serverAddress = "localhost";

 function flagon() {
     
   enabled = true;
 }

 function flagoff() {
   enabled = false;
 }

 function lockunlock() {
     
   if (enabled == true) {
     $(".draggable").draggable({
       start: function(event, ui) {
         $(this).addClass('my_class');
       },
       stop: function(event, ui) {
         $(this).removeClass('my_class');
       }
     });
   } else if (enabled == false) {
     $(".draggable").draggable("destroy");
   }
 }


//------------------------Code for drag and drop END-----------------------------------------------------------


//------------------------Code for wf token watch START-----------------------------------------------------------
function renderAll() {


var arrayX1 = new Array();  //  Array for Mutual Funds
var arrayX2 = new Array();  //  Array for Fixed Income
var arrayX3 = new Array();  //  Array for Foreign Exchange
var arrayX4 = new Array(); // Array for Structured Products
var arrayX5 = new Array(); // Array for Equities
var arrayX6 = new Array(); // Array for OT

var arrayY = new Array();
var limit = 5;
var timecount = 0;
const CHART =  document.getElementById('myChart').getContext('2d');
var blue_wft_gradient = CHART.createLinearGradient(0, 0, 0, 600);
var green_wft_gradient = CHART.createLinearGradient(0, 0, 0, 600);
var yellow_wft_gradient = CHART.createLinearGradient(0, 0, 0, 600);
var red_wft_gradient = CHART.createLinearGradient(0, 0, 0, 600);
var orange_wft_gradient = CHART.createLinearGradient(0, 0, 0, 600);
var pink_wft_gradient = CHART.createLinearGradient(0, 0, 0, 600);

blue_wft_gradient.addColorStop(1, 'rgba(0, 128, 255, 1)');
blue_wft_gradient.addColorStop(0.5, 'rgba(59, 173, 252, 1)');
blue_wft_gradient.addColorStop(0, 'rgba(208, 245, 252, 1)');

green_wft_gradient.addColorStop(1, 'rgba(8,131,53,1)');
green_wft_gradient.addColorStop(0.5, 'rgba(46,180,88,1)');
green_wft_gradient.addColorStop(0, 'rgba(105,255,160,1)');

yellow_wft_gradient.addColorStop(1, 'rgba(177,169,23,1)');
yellow_wft_gradient.addColorStop(0.5, 'rgba(213,206,56,1)');
yellow_wft_gradient.addColorStop(0, 'rgba(255,242,85,1)');

red_wft_gradient.addColorStop(1, 'rgba(150,14,14,1)');
red_wft_gradient.addColorStop(0.5, 'rgba(218,45,45,1)');
red_wft_gradient.addColorStop(0, 'rgba(255,85,85,1)');

orange_wft_gradient.addColorStop(1, 'rgba(179,105,0,1)');
orange_wft_gradient.addColorStop(0.5, 'rgba(255,153,0,1)');
orange_wft_gradient.addColorStop(0, 'rgba(252,193,109,1)');

pink_wft_gradient.addColorStop(1, 'rgba(120,20,124,1)');
pink_wft_gradient.addColorStop(0.5, 'rgba(192,75,194,1)');
pink_wft_gradient.addColorStop(0, 'rgba(255,137,252,1)');

console.log("CHART")
 let myChart = new Chart(CHART, {
  type: 'bar',
    data: {
        labels: arrayY,
        datasets: [{
            label: 'Product Booking',
            data:   arrayX1,  //[20, 30, 40, 50, 20, 30], // this has to be an array //red code rgba(255, 99,132, 1)
            backgroundColor:
                blue_wft_gradient,
            borderColor: 
                blue_wft_gradient,
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(208, 245, 252, 0.2)',
        },
         {
            label: 'Cash FX',
            data:   arrayX2,  //[20, 30, 40, 50, 20, 30], // this has to be an array 
            backgroundColor:
                green_wft_gradient,
            borderColor: 
                green_wft_gradient,
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(105,255,160,0.2)',
        },
        {
            label: 'Trade Booking',
            data:   arrayX3,  //[20, 30, 40, 50, 20, 30], // this has to be an array 
            backgroundColor:
                yellow_wft_gradient,
            borderColor: 
                yellow_wft_gradient,
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255,242,85,0.2)',
        },
        {
            label: 'All Trades Blotter',
            data:   arrayX4,  //[20, 30, 40, 50, 20, 30], // this has to be an array 
            backgroundColor:
                red_wft_gradient,
            borderColor: 
                red_wft_gradient,
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255,85,85,0.2)',
        },
        {
            label: 'Document WF',
            data:   arrayX5,  //[20, 30, 40, 50, 20, 30], // this has to be an array 
            backgroundColor:
                orange_wft_gradient,
            borderColor: 
                orange_wft_gradient,
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(252,193,109,0.2)',
        },
        {
            label: 'Client Onboarding WF',
            data:   arrayX6,  //[20, 30, 40, 50, 20, 30], // this has to be an array 
            backgroundColor:
                pink_wft_gradient,
            borderColor: 
                pink_wft_gradient,
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255,137,252,0.2)',
        }

            ]
        },
        options: {
            title: {
                display: true,
                position: 'top',
                fontSize: 18,
                fontColor: 'black',
                fontFamily: "'Verdana','Helvetica',sans-serif",
                text: 'Workflow Token Watch'
            },
            legend: {
                display: true,
                position: 'bottom',
                align: 'center',
                labels: {
                    fontSize: 10,
                    // fontStyle: 'bold',
                    fontColor: 'black',
                    fontFamily: "'Verdana','Helvetica',sans-serif",
                    padding: 10
                }
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Total Token Count',
                        fontSize: 15,
                        fontColor: 'black',
                        padding: 5

                    }
                }],
                xAxes: [{
                    ticks: {
                        reverse: true,
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Time (in days)',
                        fontSize: 15,
                        fontColor: 'black'
                    }
                }]
            }
        }
    });

 /*function generate() { // this function generates a new number, now we add it to the array of that product
  var num;
  var limit = 5;
  for(num = 0; num < 100; num++) {
    num = num + 2;
    break;
  }
  
  if (array.length <= limit) {
    array.push(num);
  }
  return array;
 }; */

 function addData(){
  var valMF = Math.floor((Math.random() * 10) + 1);
  var valFI = Math.floor((Math.random()* 20) + 1);
  var valFX = Math.floor((Math.random()* 15) + 1);
  var valSP = Math.floor((Math.random()* 50) + 1);
  var valEQ = Math.floor((Math.random()* 40) + 1);
  var valOT = Math.floor((Math.random()* 35) + 1);
  if(arrayY.length >= limit) {
  myChart.data.labels.shift()
  myChart.data.labels.push(timecount)
  //timecount++;
    myChart.data.datasets[0].data.shift();
    myChart.data.datasets[0].data.push(valMF);
    myChart.data.datasets[1].data.shift();
    myChart.data.datasets[1].data.push(valFI);
    myChart.data.datasets[2].data.shift();
    myChart.data.datasets[2].data.push(valFX);
    myChart.data.datasets[3].data.shift();
    myChart.data.datasets[3].data.push(valSP);
    myChart.data.datasets[4].data.shift();
    myChart.data.datasets[4].data.push(valEQ);
    myChart.data.datasets[5].data.shift();
    myChart.data.datasets[5].data.push(valOT);

   }
  else {
    myChart.data.labels.push(timecount)
    //timecount++;
    myChart.data.datasets[0].data.push(valMF);
    myChart.data.datasets[1].data.push(valFI);
    myChart.data.datasets[2].data.push(valFX);
    myChart.data.datasets[3].data.push(valSP);
    myChart.data.datasets[4].data.push(valEQ);
    myChart.data.datasets[5].data.push(valOT);
  }

  timecount++;
  myChart.update();
 };


window.setInterval(function(){addData()},3000);

//------------------------Code for wf token watch END-----------------------------------------------------------


//------------------------Code for wf horizontal START-----------------------------------------------------------


var LP1 = [48,33,28,8];
var LP2 = [47,35,38,21];
var LP3 = [74,39,48,22];
var LP4 = [51,46,42,22];
var LP5 = [21,18,11];
var product = ['FX Spot','Forward','Swap','NDF'];



const CHARTSH =  document.getElementById('stackedh');
console.log("CHARTSH");
 let stackedh = new Chart(CHARTSH, {
  type: 'horizontalBar',
  data: {
        labels: ['UBS','Barclays','JPM','Deutsche','Citi'],
        datasets: [{
            label: product[0],
            data: [LP1[0],0,0,0], // LP1 Spot
            backgroundColor:
                'rgba(54, 21, 236, 1)',
            borderColor:
                'rgba(54, 21, 236, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(54, 21, 236, 0.2)',
        },
         {
            label: product[1],
            data: [LP1[1],0,0,0], 
            backgroundColor:
                'rgba(255, 141, 47, 1)',
            borderColor:
                'rgba(255, 141, 47, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255, 141, 47, 0.2)',
        },
        {
            label: product[2],
            data: [LP1[2],0,0,0], 
            backgroundColor:
                'rgba(95, 88, 108, 1)',            
            borderColor:
                'rgba(95, 88, 108, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(95, 88, 108, 0.2)',
        },
        {
            label: product[3],
            data: [LP1[3],0,0,0], 
            backgroundColor:
                'rgba(255, 191, 0, 1)',
            borderColor:
                'rgba(255, 191, 0, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255, 191, 0, 0.2)',
        },
        {                                                             
            label: product[0],
            data: [0,LP2[0],0,0], 
            backgroundColor:
                'rgba(54, 21, 236, 1)',
            borderColor:
                'rgba(54, 21, 236, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(54, 21, 236, 0.2)',
        },
        {
            label: product[1],
            data: [0,LP2[1],0,0], 
            backgroundColor:
                'rgba(255, 141, 47, 1)',
            borderColor:
                'rgba(255, 141, 47, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255, 141, 47, 0.2)',
        },
        {
            label: product[2],
            data: [0,LP2[2],0,0], 
            backgroundColor:
                'rgba(95, 88, 108, 1)',
            borderColor:
                'rgba(95, 88, 108, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(95, 88, 108, 0.2)',
        },
        {
            label: product[3],
            data: [0,LP2[3],0,0], 
            backgroundColor:
                'rgba(255, 191, 0, 1)',
            borderColor:
                'rgba(255, 191, 0, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255, 191, 0, 0.2)',
        },
        {
            label: product[0],
            data: [0,0,LP3[0],0], 
            backgroundColor:
                'rgba(54, 21, 236, 1)',
            borderColor:
                'rgba(54, 21, 236, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(54, 21, 236, 0.2)',
        },
        {
            label: product[1],
            data: [0,0,LP3[1],0], 
            backgroundColor:
                'rgba(255, 141, 47, 1)',
            borderColor:
                'rgba(255, 141, 47, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255, 141, 47, 0.2)',
        },
        {                                                                           
            label: product[2],
            data: [0,0,LP3[2],0], 
            backgroundColor:
                'rgba(95, 88, 108, 1)',
            borderColor:
                'rgba(95, 88, 108, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(95, 88, 108, 0.2)',
        },
        {                                                                          
            label: product[3],
            data: [0,0,LP3[3],0], 
            backgroundColor:
                'rgba(255, 191, 0, 1)',
            borderColor:
                'rgba(255, 191, 0, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255, 191, 0, 0.2)',
        },
        {                                                                           
            label: product[0],
            data: [0,0,0,LP4[0]], 
            backgroundColor:
                'rgba(54, 21, 236, 1)',
            borderColor:
                'rgba(54, 21, 236, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(54, 21, 236, 0.2)',
        },
        {                                                                           
            label: product[1],
            data: [0,0,0,LP4[1]], 
            backgroundColor:
                'rgba(255, 141, 47, 1)',
            borderColor:
                'rgba(255, 141, 47, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255, 141, 47, 0.2)',
        },                                                          

        {                                                                         
            label: product[2],
            data: [0,0,0,LP4[2]], 
            backgroundColor:
                'rgba(95, 88, 108, 1)',
            borderColor:
                'rgba(95, 88, 108, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(95, 88, 108, 0.2)',
        }, 

        {                                                                           
            label: product[3],
            data: [0,0,0,LP4[3]], 
            backgroundColor:
                'rgba(255, 191, 0, 1)',
            borderColor:
                'rgba(255, 191, 0, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255, 191, 0, 0.2)',
        }, 

        {                                                                           
            label: product[0],
            data: [0,0,0,0,LP5[0]], 
            backgroundColor:
                'rgba(54, 21, 236, 1)',
            borderColor:
                'rgba(54, 21, 236, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(54, 21, 236, 0.2)',
        }, 

        {                                                                           
            label: product[1],
            data: [0,0,0,0,LP5[1]], 
            backgroundColor:
                'rgba(255, 141, 47, 1)',
            borderColor:
                'rgba(255, 141, 47, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255, 141, 47, 0.2)',
        }, 

        {                                                                           
            label: product[2],
            data: [0,0,0,0,LP5[2]], 
            backgroundColor:
                'rgba(95, 88, 108, 1)',
            borderColor:
                'rgba(95, 88, 108, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(95, 88, 108, 0.2)',
        },

        {                                                                           
            label: product[3],
            data: [0,0,0,0,LP5[3]], 
            backgroundColor:
                'rgba(255, 191, 0, 1)',
            borderColor:
                'rgba(255, 191, 0, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(255, 191, 0, 0.2)',
        }  

            ]
        },
        options: {
            title: {
                display: true,
                position: 'top',
                fontSize: 18,
                fontColor: 'black',
                fontFamily: "'Verdana','Helvetica',sans-serif",
                text: 'Product wise breakdown of Trades/LP'
            },
            legend: {
                display: false,
                position: 'bottom',
                align: 'center',
                labels: {
                    fontSize: 10,
                    // fontStyle: 'bold',
                    fontColor: 'black',
                    fontFamily: "'Verdana','Helvetica',sans-serif",
                    padding: 50
                }
            },
            scales: {
                yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Deal Count',
                        fontSize: 15,
                        fontColor: 'black',
                        padding: 5

                    }
                }],
                xAxes: [{
                    stacked: true,
                    ticks: {
                        //reverse: true,
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Price Providers',
                        fontSize: 15,
                        fontColor: 'black'
                    }
                }]
            }
        }
    });


//------------------------Code for wf horizontal END-----------------------------------------------------------


   


    //------------------------Code for stacked vertical START----------------------------------------------------------


const CHARTSV =  document.getElementById('stackedv');
console.log("CHARTSV");
 let stackedv = new Chart(CHARTSV, {
  type: 'bar',
  data: {
        labels: ['Fund Product Workflow','Bond Order Workflow','Fixing','Cash FX Transactions'],
        datasets: [{
            label: 'New',
            data: [9,0,0,0], //[20, 30, 40, 50, 20, 30], // this has to be an array //red code rgba(255, 99,132, 1) // tokenIDs
            backgroundColor:
                'rgba(120,31, 31, 1)',
            borderColor:
                'rgba(120, 31, 31, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(245, 0, 0, 0.2)',
        },
         {
            label: 'Pending Setup',
            data: [10,0,0,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(159, 37, 37, 1)',
            borderColor:
                'rgba(159, 37, 37, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(159, 37, 37, 0.2)',
        },
        {
            label: 'Pending Verification',
            data: [7,0,0,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(204, 29, 29, 1)',            
            borderColor:
                'rgba(204, 29, 29, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(204, 29, 29, 0.2)',
        },
        {
            label: 'Verified',
            data: [10,0,0,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(236, 30, 30, 1)',
            borderColor:
                'rgba(236, 30, 30, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(236, 30, 30, 0.2)',
        },
        {                                                             //Start of Bond Order 
            label: 'Pending Enrichment - Filled Orders',
            data: [0,7,0,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(0, 128, 255, 1)',
            borderColor:
                'rgba(0, 128, 255, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(0, 128, 255, 0.2)',
        },
        {
            label: 'Cancelled Orders',
            data: [0,13,0,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(0, 150, 254, 1)',
            borderColor:
                'rgba(0, 150, 254, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(0, 150, 254, 0.2)',
        },
        {
            label: 'Assigned Orders',
            data: [0,19,0,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(59, 173, 252, 1)',
            borderColor:
                'rgba(59, 173, 252, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(59, 173, 252, 0.2)',
        },
        {
            label: 'Unassigned Orders',
            data: [0,12,0,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(89, 212, 255, 1)',
            borderColor:
                'rgba(89, 212, 255, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(89, 212, 255, 0.2)',
        },
        {
            label: 'Partially Filled Orders',
            data: [0,8,0,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(157, 235, 255, 1)',
            borderColor:
                'rgba(157, 235, 255, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(157, 235, 255, 0.2)',
        },
        {
            label: 'Filled Orders',
            data: [0,13,0,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(208, 245, 252, 1)',
            borderColor:
                'rgba(208, 245, 252, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(208, 245, 252, 0.2)',
        },
        {                                                                           // Start of FIXING
            label: 'Fixing Inbox',
            data: [0,0,20,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(85, 69, 98, 1)',
            borderColor:
                'rgba(85, 69, 98, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(85, 69, 98, 0.2)',
        },
        {                                                                          
            label: 'Fixing Review Inbox',
            data: [0,0,18,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(135, 104, 128, 1)',
            borderColor:
                'rgba(135, 104, 128, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(135, 104, 128, 0.2)',
        },
        {                                                                           
            label: 'Pending Sett. Inbox',
            data: [0,0,7,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(184, 138, 159, 1)',
            borderColor:
                'rgba(184, 138, 159, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(184, 138, 159, 0.2)',
        },
        {                                                                           
            label: 'Fixing Processed',
            data: [0,0,12,0], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(234, 173, 189, 1)',
            borderColor:
                'rgba(234, 173, 189, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(234, 173, 189, 0.2)',
        },                                                          

        {                                                                 // Start of Cash FX          
            label: 'New Trade',
            data: [0,0,0,26], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(0, 76, 76, 1)',
            borderColor:
                'rgba(0, 76, 76, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(0, 76, 76, 0.2)',
        }, 

        {                                                                           
            label: 'Cancelled Trades',
            data: [0,0,0,12], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(0, 102, 102, 1)',
            borderColor:
                'rgba(0, 102, 102, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(0, 102, 102, 0.2)',
        }, 

        {                                                                           
            label: 'Pending Cancel Verify',
            data: [0,0,0,8], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(0, 128, 128, 1)',
            borderColor:
                'rgba(0, 128, 128, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(0, 128, 128, 0.2)',
        }, 

        {                                                                           
            label: 'Verified',
            data: [0,0,0,19], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(102, 178, 178, 1)',
            borderColor:
                'rgba(102, 178, 178, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(102, 178, 178, 0.2)',
        }, 

        {                                                                           
            label: 'Pending Amend Verify',
            data: [0,0,0,12], //[20, 30, 40, 50, 20, 30], // this has to be an array
            backgroundColor:
                'rgba(178, 216, 216, 1)',
            borderColor:
                'rgba(178, 216, 216, 1)',
            borderWidth: 1,
            hoverBackgroundColor : 'rgba(178, 216, 216, 0.2)',
        } 

            ]
        },
        options: {
            title: {
                display: true,
                position: 'top',
                fontSize: 18,
                fontColor: 'black',
                fontFamily: "'Verdana','Helvetica',sans-serif",
                text: 'Workflow Token Graph'
            },
            legend: {
                display: false,
                position: 'bottom',
                align: 'center',
                labels: {
                    fontSize: 10,
                    // fontStyle: 'bold',
                    fontColor: 'black',
                    fontFamily: "'Verdana','Helvetica',sans-serif",
                    padding: 50
                }
            },
            scales: {
                yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Token Count',
                        fontSize: 15,
                        fontColor: 'black',
                        padding: 5

                    }
                }],
                xAxes: [{
                    stacked: true,
                    ticks: {
                        //reverse: true,
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Workflow Names',
                        fontSize: 15,
                        fontColor: 'black'
                    }
                }]
            }
        }
    });

}


  //------------------------Code for stacked vertical END--------------------------------------//


//------------------------Code for wf 3d graph START-----------------------------------------------------------

var pair1 = [];
var pair2 = [];
var pair3 = [];
var pair4 = [];
var pair5 = [];
var pair6 = [];
function genRevenue() {
    for (var i = 0; i < 5; i++) {
        pair1.push(Math.floor((Math.random() * 100) + 1))
        pair2.push(Math.floor((Math.random() * 150) + 1))
        pair3.push(Math.floor((Math.random() * 200) + 1))
        pair4.push(Math.floor((Math.random() * 250) + 1))
        pair5.push(Math.floor((Math.random() * 300) + 1))
        pair6.push(Math.floor((Math.random() * 350) + 1))
    }

}

genRevenue();

console.log(pair6); // just to test

var data = [
    {
        //colorscale: 'Portland',
        x: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], //here you will have the month array 
        y: ['New', 'Verified', 'Unverified', 'Matured', 'Cancelled', 'Pending'],
        //y: ['EUR-USD','USD-JPY','GBP-USD','AUD-CAD','USD-SGD','USD-AED'], // ccy pairs 
        z: [
            pair1,
            pair2,
            pair3,
            pair4,
            pair5,
            pair6
        ], //size of the outer array is six and inner individual arrays is 5 
        type: 'surface'
    }];

var layout = {
    // title: '<b>Queue wise Token Density Plot<b>',
    // "titlefont": {
    //     "size": 0,
    // },
    showlegend: true,
    autosize: true,
    displayModeBar: false,
    width: 900,
    height: 900,
    margin: {
        l: 130,
        r: 100,
        b: 100,
        t: 180,
    },
    scene: {
        xaxis: { title: 'Months' },
        yaxis: { title: 'Queues' },
        zaxis: { title: 'Token Count' }
    }
};

var config = {
    responsive: true,
    displaylogo: false
} // further confing options

    //------------------------Code for wf 3d graph END-----------------------------------------------------------




  //----------------------------Start of Polar Chart-------------------------------------------//


var PolarLabelData = [];
var StringPolarChartData = [];
var IntPolarChartData = [];
var PolarChartTitle;

function getPolarAjax() {
    try {
        return $.ajax({
            type: "POST",
            url: "http://" + serverAddress + "/FinIQService/WorkflowDashboardService.svc/getWFTokenList",
            contentType: "application/json; charset=utf-8",
            dataType: "text",
            cache: false,
            data: JSON.stringify({
                "fromDate": document.getElementById('ctl00_MainContent_txtFromDate_txtDate').value,
                "toDate": document.getElementById('ctl00_MainContent_txtToDate_txtDate').value,
                //"fromDate": "20-Mar-2020",
                //"toDate": "20-May-2020",
                "loginId": "Dealer1",
                //"loginID": document.getElementById('ctl00_MainContent_hdnLoginID').value,
               //entityID": document.getElementById('ctl00_MainContent_hdn_ddlEntity_ID').value,
                "entityId": "4",
                "wfId": "2082"
            }),
            crossDomain: true,
            headers: {
                "Access-Control-Allow-Origin": "*",
            },
            async: false,
            success: function (data) {
                
                data = jQuery.parseJSON(data);
                var myData = data.getWFTokenListResult;
                jQuery(myData).each(function (i, item) {
                    PolarLabelData.push(item.QM_Name);
                    StringPolarChartData.push(item.Count);
                    IntPolarChartData = StringPolarChartData.map(Number);
                    PolarChartTitle = item.WTM_Title;
                    
                });
                PlotPolarChart();
            },
            error: function (x, e) {
                alert("Error in PolarChartData" + e);
            },
        });

    }
    catch (err) {
        console.log('Error in function PolarChartData : ' + err.message);
    }

}

function PlotPolarChart() {

    //PolarChart.clear();

    const POL_CHART = document.getElementById('PolarChart').getContext('2d');
    console.log("POL_CHART");

    var blue_pol_gradient = POL_CHART.createLinearGradient(0, 0, 0, 800);
    var green_pol_gradient = POL_CHART.createLinearGradient(0, 0, 0, 800);
    var red_pol_gradient = POL_CHART.createLinearGradient(0, 0, 0, 800);
    var orange_pol_gradient = POL_CHART.createLinearGradient(0, 0, 0, 800);
    var pink_pol_gradient = POL_CHART.createLinearGradient(0, 0, 0, 800);

    blue_pol_gradient.addColorStop(1, 'rgba(0, 128, 255, 1)');
    blue_pol_gradient.addColorStop(0.5, 'rgba(59, 173, 252, 1)');
    blue_pol_gradient.addColorStop(0, 'rgba(208, 245, 252, 1)');

    green_pol_gradient.addColorStop(1, 'rgba(8,131,53,1)');
    green_pol_gradient.addColorStop(0.5, 'rgba(46,180,88,1)');
    green_pol_gradient.addColorStop(0, 'rgba(105,255,160,1)');

    red_pol_gradient.addColorStop(1, 'rgba(150,14,14,1)');
    red_pol_gradient.addColorStop(0.5, 'rgba(218,45,45,1)');
    red_pol_gradient.addColorStop(0, 'rgba(255,85,85,1)');

    orange_pol_gradient.addColorStop(1, 'rgba(179,105,0,1)');
    orange_pol_gradient.addColorStop(0.5, 'rgba(255,153,0,1)');
    orange_pol_gradient.addColorStop(0, 'rgba(252,193,109,1)');

    pink_pol_gradient.addColorStop(1, 'rgba(120,20,124,1)');
    pink_pol_gradient.addColorStop(0.5, 'rgba(192,75,194,1)');
    pink_pol_gradient.addColorStop(0, 'rgba(255,137,252,1)');

    var polarWFData = {
        labels: PolarLabelData,
        //labels: ["New Trade","Pending Verify ","Pending Cancel Verifiy","Verified Trades","Cancelled Trade"],
        datasets: [{
            data: IntPolarChartData,
            //data: [10,4,8,15,7], // here you pass an array containing queue count of each workflow

            backgroundColor: [
                blue_pol_gradient,
                green_pol_gradient,
                red_pol_gradient,
                pink_pol_gradient,
                orange_pol_gradient
            ],

            borderColor: [
                blue_pol_gradient,
                green_pol_gradient,
                red_pol_gradient,
                pink_pol_gradient,
                orange_pol_gradient
            ],

            borderWidth: 1,

            hoverBackgroundColor: [
                'rgba(208, 245, 252, 0.4)',
                'rgba(105,255,160,0.4)',
                'rgba(255,85,85,0.4)',
                'rgba(255,137,252,0.4)',
                'rgba(252,193,109,0.4)'
            ]

            // borderAlign: 'center' or inner center is default
        }]
    };

    var polarOptions = {
        // startAngle: -2*Math.PI
        legend: {
            position: 'right',
            align: 'end',
            labels: {
                boxWidth: 10,
                fontFamily: "'Verdana','Helvetica',sans-serif",
                fontSize: 10
            }
        },

        title: {
            display: true,
            //text: 'Cash FX Workflow Queue Count',
            text: PolarChartTitle,
            position: 'top',
            fontFamily: "'Verdana','Helvetica',sans-serif",
            // fontStyle: 'normal',
            fontSize: 18,
            fontColor: 'black'
        }
    };


    let PolarChart = new Chart(POL_CHART, {
        type: 'polarArea',
        data: polarWFData,
        options: polarOptions
    });
}


function destroyALL() { 
    myChart.destroy();
    PolarChart.destroy();
    stackedv.destroy();
    //3dchart.destroy();
    stackedh.destroy();
}

$(document).ready(function () {
    //add fun call here
    //getPolarAjax();
    //PolarChart.destroy();
});


function displayUserBox(RowP) {
    var rowNum = document.getElementById('<%=hdnRowIndex.ClientID%>');
    rowNum.value = RowP
    $('#<%=ButtonIDUserMapping.ClientID%>').click();
}


function getPosition(ctrl) {
    var txtbox = document.getElementById(ctrl);
    var p = GetScreenCordinates(txtbox);
    var left = p.x - 3;
    var top = p.y + 32;
    $('.groupBoxGrids').css('top', top);
    $('.groupBoxGrids').css('left', left);
    $('.groupTimeBox').css('top', top);
    $('.groupTimeBox').css('left', left);
}

function GetScreenCordinates(obj) {
    var p = {};
    p.x = obj.offsetLeft;
    p.y = obj.offsetTop;
    while (obj.offsetParent) {
        p.x = p.x + obj.offsetParent.offsetLeft;
        p.y = p.y + obj.offsetParent.offsetTop;
        if (obj == document.getElementsByTagName("body")[0]) {
            break;
        }
        else {
            obj = obj.offsetParent;
        }
    }
    return p;
}

function onlyNumbers(s) {
    var cntrl = document.getElementById(s)
    var cntrlval = document.getElementById(s).value;
    var charCode = window.event.keyCode;
    if (charCode == 58 || (charCode >= 48 && charCode <= 57)) {
        return;
    }
    else {
        window.event.returnValue = null;
    }

} var parameter = Sys.WebForms.PageRequestManager.getInstance();

    parameter.add_endRequest(function () {

    //put renderALL
});  






  //-------------------------End of Polar Chart------------------------------------------------//