text: var funcsum = [],
    ressum = [5],
    filelen,
    x = 0,
    i;
  /*The sumfunc function is to check whether the user has entered path in the homepage.If the user has entered the path then the dialog box to choose the files shouldn't be displayed else the dialog box should be displayed*/
  function aggcoll() {
    if (xpath == null) {
      xpath = prompt(
        "Please enter path to Data",
        "/home/sagnik/Desktop/HPC/D3-visualization/Data"
      );
      myFunction();
    }
    noselectcoll();
  }
  
  function dispcolltime(callData_coll, filenames) {
    function timeout() {
      var namenosum = [],
        dataArraysum = [];
      var headingsum = d3
        .select("#headingbg")
        .style("justify-content", "center")
        .append("svg")
        .attr("width", 1000)
        .attr("height", 37)
        .style("text-align", "center")
        .attr("transform", "translate(350,-20)")
        .append("text")
        .attr("transform", "translate(80,30)")
        .style("font-size", "30px")
        .text("Time spent per MPI Collective Call for each Data Size Bin");
  
      document.getElementById("headingbg").style.height = "10px";
  
      Calls = Object.keys(callData_coll);
      Calls.sort(file_collator.compare);
      numcalls = Calls.length;
      numfiles = filenames.length;
  
      // Making colors array for later use
      var colorval = [];
      var initval = -1;
      var lasttype = "",
        currtype = "";
      for (let i = 0; i < Calls.length; ++i) {
        currtype = Calls[i].split("(")[0];
        if (currtype != lasttype) {
          initval += 1;
          lasttype = currtype;
        }
        colorval.push(initval);
      }
  
      x = 0;
      while (x < numfiles) {
        dataArraysum = [];
        label = filenames[x];
        for (i = 0; i < numcalls; i++) {
          var yval;
          if (label in callData_coll[Calls[i]])
            yval = parseFloat(callData_coll[Calls[i]][label]);
          else yval = 0;
          dataArraysum.push({
            /*dataArraysum contains the Filename and time of functions present in each file*/
            Filename: Calls[i],
            Value: yval,
          });
        }
        console.log(dataArraysum);
  
        var margin = {
            top: 150,
            right: 20,
            bottom: 100,
            left: 100,
          },
          width = 500 - margin.left - margin.right,
          height = 470 - margin.top - margin.bottom;
  
        var x1 = d3.scaleBand().range([0, width]).padding(0.1);
  
        var y1 = d3.scaleLog().base(10).range([height, 0]);
  
        // append the svg object to the body of the page
        // append a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg1 = d3
          .select("#aggregatesumbg")
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
        var color = d3.scaleOrdinal(d3.schemeDark2);
        // var color = d3.scaleSequential(d3.interpolateBlues).domain([0, numcalls])
  
        var legendRectSize = 18;
        var legendSpacing = 4;
  
        l = 3;
  
        // Scale the range of the data in the domains
        x1.domain(
          dataArraysum.map(function (d) {
            return d.Filename;
          })
        );
        y1.domain([
          0.0001,
          d3.max(dataArraysum, function (d) {
            return d.Value + d.Value / 4;
          }),
        ]);
  
        // append the rectangles for the bar chart
        svg1
          .selectAll(".bar")
          .data(dataArraysum)
          .enter()
          .append("rect")
          .attr("class", "bar")
          .attr("x", function (d) {
            return x1(d.Filename);
          })
          .attr("width", x1.bandwidth())
          .attr("y", function (d) {
            return y1(d.Value);
          })
          .attr("fill", function (d, i) {
            return color(colorval[i]);
          })
          .attr("height", function (d) {
            return height - y1(d.Value);
          });
  
        l = 3;
        console.log(x1.bandwidth());
        svg1
          .selectAll(".text")
          .data(dataArraysum)
          .enter()
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("class", "label")
          .attr("y", function (d) {
            return x1.bandwidth() / 2 + x1(d.Filename);
          })
          .attr("x", function (d) {
            return -y1(d.Value);
          })
          .attr("dy", ".75em")
          .text(function (d) {
            return d.Filename;
          });
  
        svg1
          .append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x1).tickFormat(""));
  
        svg1
          .append("g")
          .append("text")
          .attr("x", width / 2)
          .attr("y", height + 30)
          .attr("text-anchor", "middle")
          .attr("fill", "Black")
          .style("font-family", "Times New Roman")
          .style("font-size", "20px")
          .text("MPI Call (Data Size Bin)");
  
        svg1
          .append("text")
          .attr("x", width / 2)
          .attr("y", -30 - margin.top / 2)
          .attr("text-anchor", "middle")
          .style("font-size", "16px")
          .style("text-decoration", "underline")
          .text(label.split("_").pop().split(".")[0]);
        //console.log(label);
        // add the y Axis
        svg1
          .append("g")
          .call(d3.axisLeft(y1))
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", -50)
          .attr("x", -75)
          .attr("dy", "0.71em")
          .attr("fill", "Black")
          .style("font-family", "Times New Roman")
          .style("font-size", "20px")
          .text("Time(%)");
  
        /*  var legend = svg1.selectAll('.legend')                     
            		   .data(color.domain())                                   
            		   .enter()                                                
            		   .append('g')                                            
            		   .attr('class', 'legend')                                
            		   .attr('transform', function(d, i) 
  			     {                    
              		       var height = legendRectSize + legendSpacing;         
  
              		       var offset =  height * color.domain().length / 2;     
              		       var horz = 18 * legendRectSize;                        
              		       var vert = i * height + offset;                       
              		       return 'translate(' + horz + ',' + vert + ')';        
  			      });              */
  
        x++;
      } /*while loop*/
    } /*function closing tag*/
    setTimeout(timeout, 1000); /*Setting timeout in order to process the results*/
  }
  /*Function to directly display the bar charts if the user has given the path directory*/
  function noselectcoll() {
    cleanfunc();
    my_files = Object.keys(aggcollData)
      .sort(file_collator.compare)
      .reverse()
      .splice(0, 6);
    console.log(my_files);
  
    callData_coll = {};
  
    var arrayLength = my_files.length;
    for (var i = 0; i < arrayLength; i++) {
      data = aggcollData[my_files[i]];
      console.log(my_files[i]); //debug
      data.forEach((d) => {
        key = d.Call + " (" + d.DataSize + ")";
        if (!(key in callData_coll)) {
          callData_coll[key] = {};
        }
        callData_coll[key][my_files[i]] = d.MPITime;
      });
    }
    console.log(callData_coll);
    dispcolltime(callData_coll, my_files);
  } //function closing
  