Responsive web design Bootstrap

Viewed 31

I am creating a website with bootstrap. The site will have main div which has a heigh set to 100% and a margin of 5% on all 4 sides, then it has another div which contains all content (this div also has a border), now I want to make it responsive, I want that I change the screen the content should has margin on all 4 sides and then box should have all content and it should scale but I am unable to do so. I have also used chartjs to place 6 charts on the page.Can someone plesae help me with this? Following is the page code (I have removed most of scripts as of now) :

 
<script>
  
  

  function removeData(chart) {
//  console.log("chart value: "+JSON.stringify(chart.data)); 

   chart.data.labels=[];
  
   chart.data.datasets.forEach((dataset) => {
        dataset.data=[]
    });
    chart.update();
}

function addData(chart, label, data) {
    chart.data.labels = label;
  
console.log("label values are: " + label);
    chart.data.datasets.forEach((dataset,index) => {
  //    console.log("index value is: "+ index);
      //dataset.data.push(data.chart1alldata);
      dataset.data = data.chart1alldata;
    //  console.log ("eee:  "+JSON.stringify(chart.data.datasets)); 
     });
    
  
    chart.update();
    console.log("new labels are: "+ newlabels)
}



  </script>
<style>
.mainbox{
  box-shadow: inset 1px 1px 5px 5px rgba(0, 0, 0, 0.5);
  }

</style>
</head>
<body class="container">
<div class="row" style="height:100%;">
<header>
  
  </header>

<div class="container-fluid border border-dark mainbox" style="margin:5% auto; padding-bottom:.3%;padding-top:.3%;">
  
  <div class="m-1 container-fluid" style="background-color: #f9f8f6;">
  <div class="row text-white font-weight-bold text-justify rounded" style="background-color: #0077b6;">
  <div class="col-lg-3 col-xl-3 text-justify text-center p-1 mx-auto" style="font-size: 20px;">
    Right First Time - Summary
  </div>
  <div class="col-lg-3"></div>    
 <div class="col-lg-6 mt-1 mb-1 text-justify text-right">
  
  <button type="btn" class="btn btn-light btn-sm visible" style="padding:5px;font-size:8px" onclick="toPercentage()" id="showpercentage">Percentage</button>
  <button type="btn" class="btn btn-light btn-sm visible" style="padding:5px;font-size:8px" onclick="toNumbers()"  id="shownumbers">Numbers</button>
  
  
  <i class="bi-download ml-2"></i>
  <i class="bi bi-info-circle-fill ml-2"></i>

  <span style="font-size:12px">Updated ON:14-07-2022</span>
  
  </div>
  </div>


<div class="row mt-1">
<div class="col-lg-2 text-white text-center font-weight-bold rounded"  style="height:50px;background-color: #4E97D1;">
RFT 

<div class="row">
<div class="col-lg text-center" id="actualrft">39% 
</div>
</div>
</div>  
<div class="col-lg-2 text-center font-italic rounded" >Case close same day
  <div class="row font-weight-bold ml-3 text-center" style="width:100px;height:100px">
    <div class="col-lg">
    <span id="closedwithin24hours">48%</span><span style="width:100px;height:100px"><canvas id="24hoursclosed" ></canvas>

<script>
var x = "48";
var y= 100-x;
var yValues = [55, 49];
var barColors = [
"#4E97D1",
  "#83b6de",
  
];

var singledayclosed = new Chart("24hoursclosed", {
  type: "pie",
  data: {
    datasets: [{
      backgroundColor: barColors,
      color:['#666','#898'],
      data: [x,y]
    }]
  },
  options: {
   // responsive : false,
    title: {
      display: false,
      text: "World Wide Wine Production 2018"
    }
  },
  
});
</script>
</span>
  </div>
  </div>
  </div>  

<div class="col-lg-2 text-center font-italic rounded" >No Repeat in 7 days
  <div class="row font-weight-bold ml-3 text-center" style="width:100px;height:100px"> 
  <div class="col-lg">
  <span id="norepeatcase">88%</span><span><canvas id="norepeats" width="50" height="50" style="width:100px;height:100px"></canvas>
<script>
var x = 88
var y= 100-x;
var yValues = [55, 49];
var barColors = [
"#4E97D1",
  "#83b6de",
    
];

new Chart("norepeats", {
  type: "pie",
  data: {
    datasets: [{
      backgroundColor: barColors,
      data: [x,y]
    }]
  },
  options: {
  //  responsive: false,
    title: {
      display: false,
      text: "World Wide Wine Production 2018"
    }
  }
});
</script>
</span>
</div>
</div>
</div>  

<div class="col-lg-2 text-center font-italic rounded">One Contact Only
  <div class="row font-weight-bold ml-3 text-center" style="width:100px;height:100px"> 
    <div class="col-lg">
     <span id="ocr7days">93%</span><span style="width:59px;height:100px"><canvas id="ocr7" width="50" height="50" style="width:100px;height:100px"></canvas>
<script>
var x = 93
var y= 100-x;
var yValues = [55, 49];
var barColors = [
  "#4E97D1",
  "#83b6de",
  
];

new Chart("ocr7", {
  type: "pie",
  data: {
    datasets: [{
      backgroundColor: barColors,
      data: [x,y]
    }]
  },
  options: {
    //responsive: false,
    title: {
      display: false,
      text: "World Wide Wine Production 2018"
    }
  }
});
</script>
</span>
    </div>
  </div>  
</div>

<div class="col-lg-2 text-center font-italic rounded">Less than 3 transfers
  <div class="row font-weight-bold ml-3 text-center" style="width:100px;height:100px"> 
    <div class="col-lg">
  <span id="scr7days">95%</span><span style="width:59px;height:100px"><canvas id="scr7" width="50" height="50" style="width:100px;height:100px"></canvas>
<script>
var x = 95
var y= 100-x;
var yValues = [55, 49];
var barColors = [
"#4E97D1",
  "#83b6de",
    
];

new Chart("scr7", {
  type: "pie",
  data: {
    datasets: [{
      backgroundColor: barColors,
      data: [x,y]
    }]
  },
  options: {
  //  responsive: false,
    title: {
      display: false,
      text: "World Wide Wine Production 2018"
    }
  }
});
//"#E0E0E0",
</script>
</span>
</div>
</div>
</div> 

<div class="col-lg-2 text-white text-center font-weight-bold rounded"  style="height:50px;background-color: #4E97D1;"  >Total Cases 
    <div class="row">
    <div class="col-lg text-center" id="totalcases">
      7765
    </div>
  </div>
  <div class="row rounded" style="background-color:#4E97D1;margin-top: 6px ;">
    <!--<div class="form-group" >
    <span>    
    <label for="exampleFormControlSelect1" style="font-weight: bold;color:white;">Select Frequency </label>
<select  style="border-width: 3px;width:70%;margin-left:20%" id="frequency">
      <option>Daily</option>
      <option selected="selected">Weekly</option>
    </select>
  </span>
  </div> -->
  <div class="col-lg">
    <div class="row m-1"><div class="col-lg" style="font-size:14px">Chart Frequency</div></div>
    <div class="row mb-2"><div class="col-lg">
    <button type="btn" class="btn btn-light btn-sm visible" style="padding:1px;font-size:10px" value="Daily" onclick="frequencyselected('Daily')">Daily</button>
    <button type="btn" class="btn btn-light btn-sm visible" style="padding:1px;font-size:10px" value="Weekly" onclick="frequencyselected('Weekly')">Weekly</button>
    </div>
  </div>
  
  </div>
  </div>
  
  </div>  
</div>
<div class="row mt-4" id="bb">
  <div class="col-lg-2 text-justify text-center " id="functionalitybuttons" style="margin-top:-94px">
<div class="row rounded-top"  style="background-color: #4E97D1;" >
  <div class="col-lg text-white text-center font-weight-bold p-2 rounded">
    FILTERS
  </div>
</div>
<div class="row rounded-bottom "  style="background-color: #4E97D1;">
  <div class="col-lg text-white text-center font-weight-bold" >
    <i class="bi bi-toggle-on" onclick="togglefilters()" id="togglefilters"></i>
      <i class="bi bi-arrow-clockwise ml-1" onclick="resetallfilters()"><a href="/data"></a></a></i>
    </div>
  
  </div>
  <span id="filters">
  <div class="row mt-1 rounded"  style="background-color: #4E97D1;">
  <div class="col-lg"></div>
  </div>
  <div class="row mt-2 rounded-top"  style="background-color: #4E97D1;">
    <div class="col-lg text-white text-center font-weight-bold ">
      <div class="form-group">
        <ul class="list-unstyled">
   <li class="dropdown">
       <a href="#" style="color:white" data-toggle="dropdown" class="dropdown-toggle">Business Segment<b class="caret"></b></a>
       <ul class="dropdown-menu" >
         
      
          
              
         <li>
            <div class="form-check">
               <input class="form-check-input businesssegmentselect" type="checkbox" value="Blank" id="businesssegmentselect">
               <label class="form-check-label" for="businesssegmentselect">
                  Blank
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input businesssegmentselect" type="checkbox" value="Individual" id="businesssegmentselect">
               <label class="form-check-label" for="businesssegmentselect">
                  Individual
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input businesssegmentselect" type="checkbox" value="SMB" id="businesssegmentselect">
               <label class="form-check-label" for="businesssegmentselect">
                  SMB
               </label>
             </div>
            
           </li>
           
           </ul>
   </li>
</ul>
 
<script>
   $('.businesssegmentselect').change(function(){
console.log("business segment clicked")
      valueset();
datafetch();  //valueset function call.
//alert(channelfiltervalue);     
})

</script>
      </div>
    </div>
    </div>
    <div class="row"  style="background-color: #4E97D1;">
      <div class="col text-white text-center font-weight-bold ">
        <div class="form-group">
        <ul class="list-unstyled">
   <li class="dropdown">
       <a style="color:white" href="#" data-toggle="dropdown" class="dropdown-toggle">Employee Manager<b class="caret"></b></a>
       <ul class="dropdown-menu" >
         
      
          
              
         <li>
            <div class="form-check">
               <input class="form-check-input employeemanagerselect" type="checkbox" value="Akash Joshi" id="employeemanagerselect">
               <label class="form-check-label" for="employeemanagerselect">
                  Akash Joshi
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input employeemanagerselect" type="checkbox" value="Bijendra Yadav" id="employeemanagerselect">
               <label class="form-check-label" for="employeemanagerselect">
                  Bijendra Yadav
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input employeemanagerselect" type="checkbox" value="Dixita Agarwal" id="employeemanagerselect">
               <label class="form-check-label" for="employeemanagerselect">
                  Dixita Agarwal
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input employeemanagerselect" type="checkbox" value="Lokesh Yadav" id="employeemanagerselect">
               <label class="form-check-label" for="employeemanagerselect">
                  Lokesh Yadav
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input employeemanagerselect" type="checkbox" value="Sajan singh" id="employeemanagerselect">
               <label class="form-check-label" for="employeemanagerselect">
                  Sajan singh
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input employeemanagerselect" type="checkbox" value="Shivam Sharma" id="employeemanagerselect">
               <label class="form-check-label" for="employeemanagerselect">
                  Shivam Sharma
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input employeemanagerselect" type="checkbox" value="Subhendu Nandy" id="employeemanagerselect">
               <label class="form-check-label" for="employeemanagerselect">
                  Subhendu Nandy
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input employeemanagerselect" type="checkbox" value="Varsha Pathak" id="employeemanagerselect">
               <label class="form-check-label" for="employeemanagerselect">
                  Varsha Pathak
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input employeemanagerselect" type="checkbox" value="Vijay Bhatia" id="employeemanagerselect">
               <label class="form-check-label" for="employeemanagerselect">
                  Vijay Bhatia
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input employeemanagerselect" type="checkbox" value="Vishvamohan Ajay" id="employeemanagerselect">
               <label class="form-check-label" for="employeemanagerselect">
                  Vishvamohan Ajay
               </label>
             </div>
            
           </li>
           
           </ul>
   </li>
</ul>

     


        </div>
      </div>
      </div>
  <div class="row"  style="background-color: #4E97D1;">
  <div class="col text-white text-center font-weight-bold ">
    <div class="form-group">
      <!--<select class="form-control" name="channels" id="channelselect"> -->
   <!--<option selected="selected">--select--</option>-->
   <ul class="list-unstyled" >
      <li class="dropdown">
          <a href="#" style="color:white" data-toggle="dropdown" class="dropdown-toggle">Channel<b class="caret"></b></a>
          <ul class="dropdown-menu " >
            
         
             
                 
            <li>
               <div class="form-check">
                  <input class="form-check-input channelselect" type="checkbox" value="EDU Form" id="channelselect">
                  <label class="form-check-label" for="channelselect">
                     EDU Form
                  </label>
                </div>
               
              </li>
               
                 
            <li>
               <div class="form-check">
                  <input class="form-check-input channelselect" type="checkbox" value="Phone" id="channelselect">
                  <label class="form-check-label" for="channelselect">
                     Phone
                  </label>
                </div>
               
              </li>
               
                 
            <li>
               <div class="form-check">
                  <input class="form-check-input channelselect" type="checkbox" value="Web Messaging" id="channelselect">
                  <label class="form-check-label" for="channelselect">
                     Web Messaging
                  </label>
                </div>
               
              </li>
              
              </ul>
      </li>
  </ul>
     
  
    </div>
  </div>
  </div>
  <div class="row"  style="background-color: #4E97D1;">
    <div class="col text-white text-center font-weight-bold ">
      <div class="form-group">

        <ul class="list-unstyled">
   <li class="dropdown">
       <a href="#" style="color:white" data-toggle="dropdown" class="dropdown-toggle">Call Center<b class="caret"></b></a>
       <ul class="dropdown-menu" >
         
      
          
              
         <li>
            <div class="form-check">
               <input class="form-check-input callcenterselect" type="checkbox" value="TP Jaipur" id="callcenterselect">
               <label class="form-check-label" for="callcenterselect">
                  TP Jaipur
               </label>
             </div>
            
           </li>
           
           </ul>
   </li>
</ul>

     

      </div>
    </div>
    </div>
    <div class="row rounded-bottom" style="background-color: #4E97D1;">
  <div class="col text-white text-center font-weight-bold ">
    <div class="form-group">
      
      <ul class="list-unstyled">
   <li class="dropdown">
       <a href="#" style="color:white" data-toggle="dropdown" class="dropdown-toggle">LOB<b class="caret"></b></a>
       <ul class="dropdown-menu" >
         
      
          
              
         <li>
            <div class="form-check">
               <input class="form-check-input lobselect" type="checkbox" value="Customer Support" id="lobselect">
               <label class="form-check-label" for="lobselect">
                  Customer Support
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input lobselect" type="checkbox" value="Operations" id="lobselect">
               <label class="form-check-label" for="lobselect">
                  Operations
               </label>
             </div>
            
           </li>
            
              
         <li>
            <div class="form-check">
               <input class="form-check-input lobselect" type="checkbox" value="Retention" id="lobselect">
               <label class="form-check-label" for="lobselect">
                  Retention
               </label>
             </div>
            
           </li>
           
           </ul>
   </li>
</ul>

     



    </div>  
  </div>
  </div>
  
  </span>
  </div>
  <div class="col-10">
    <div class="row">
      <div class="col-5"></div>
      <!-- <div class="form-group">
        <span>    
        <label for="exampleFormControlSelect1" style="font-weight: bold;">Select Frequency </label>
    <select class="form-control border border-dark" style="border-width: 3px;"id="frequency">
          <option>Daily</option>
          <option selected="selected">Weekly</option>
        </select>
      </span>
      </div> -->
    </div>   
<div class="row" style="margin-top:-18px">
    <div class="col-6 p-20 text-center w-30 bg-white">     <div><canvas id="myChart" width="400px" height="400px" style="border:1px solid #000000;border-radius: 5px;"></div>
   <script>
var chartalldata = chart1alldata//JSON.parse(chart1alldata);//;
var chartdata= [];

for (var i=0;i<chartalldata.length;i++){
  chartdata[i] = _.omit(chartalldata[i], ['TotalCasecount','norepeat7days','samedayclosed','onecontactonly','lesstransfers','Rft',"totalCSAT",'csat']);
  console.log ("i "+i+ ":"   + chartdata[i])
  
}
console.log ("chart all data is:"+ chart1alldata);
const colors = ['red','blue','orange','green','grey','black'];
newlabels = []; 
toplabels = [];
  
var linechart1data= {
  
  labels: newlabels,
  datasets: [
  {
  label: 'RFT %',
data:chartalldata, //chartdata,
backgroundColor: ['rgba(155, 176, 108, 0.8)' ],
borderColor: [ 'rgba(135, 99, 132, 1)'],
borderWidth:2,
tension:0.4,
parsing: {
  xAxisKey: '_id',
  yAxisKey: 'rftpercentage',
}
},  
{
  label: 'Same day closed',
data:chartalldata,//chartdata,
backgroundColor: ['rgba(135, 99, 132, 0.2)', ],
borderColor: [ 'rgba(135, 99, 132, 1)'],
borderWidth:2,
tension:0.4,
parsing: {
  xAxisKey: '_id',
  yAxisKey: 'samedayclosedpercentage',
}
},
{
      label: '7day no repeat',
data: chartalldata,//chartdata,//[10,20,30,40,50,60]
backgroundColor: ['rgba(255, 99, 132, 0.2)', ],
borderColor: [ 'rgba(255, 99, 132, 1)'],
borderWidth:2,
tension:0.4,
parsing: {
  xAxisKey: '_id',
  yAxisKey: 'norepeat7dayspercentage',
}
},

{
  label: 'One Contact',
data:chartalldata,//chartdata,
backgroundColor: ['rgba(221, 57, 198, 0.5)', ],
borderColor: [ 'rgba(135, 99, 132, 1)'],
borderWidth:2,
tension:0.4,
parsing: {
  xAxisKey: '_id',
  yAxisKey: 'onecontactpercentage',
}
},

{
  label: 'less than 3 transfers',
data:chartalldata, //chartdata,
backgroundColor: ['rgba(7, 122, 108, 0.8)', ],
borderColor: [ 'rgba(135, 99, 132, 1)'],
borderWidth:2,
tension:0.4,
parsing: {
  xAxisKey: '_id',
  yAxisKey: 'lesstransferspercentage',
}
},
]
 };
  var barChartOptions = {
    scales: {
            x: {
               grid: {
                  display: false
               }
             },
            y: {
              display:false,
              grace: '20%',
               grid: {
                  display: false
               },
               ticks: {
                    display: false //this will remove only the label
                },
            }
       },
      
    plugins: {
        datalabels:{
          anchor:'top',
          align:'end',
          formatter: function (value,context) {
           if(context.datasetIndex==0) {return value.norepeat7dayspercentage};
            if(context.datasetIndex==1) {return value.samedayclosedpercentage};
            if(context.datasetIndex==2) {return value.onecontactpercentage};
            if(context.datasetIndex==3) {return value.lesstransferspercentage};
            if(context.datasetIndex==4) {return value.rftpercentage};
            return value._id;                                   
                                }
        },

        legend:{
          display: true,
          align:'center',
          position: 'bottom',
          color: 'red',
        labels:{
          usePointStyle: true,
          boxWidth: 5,
        },
        },
        tooltip:{
        enabled: false, //true
      },
          },
      
      
      
    }
 
    var ctx = document.getElementById('myChart').getContext('2d');
    window.myBar = new Chart(ctx, {
  type: 'line',
  data: linechart1data,
  plugins: [ChartDataLabels],
  options: barChartOptions,

});


</script>
   
</div>
    <div class="col-6 p-20 text-center w-30 bg-white"><canvas id="myChart2" width="400" height="400" style="border:1px solid #000000;border-radius: 5px;"></canvas>
<script>
  function chart2data(){
var chart2data= [];
for (var i=0;i<chartalldata.length;i++){
  chart2data[i] = _.omit(chartalldata[i],['norepeat7days','samedayclosed','onecontactonly','lesstransfers','Rft',"totalCSAT",'csat','norepeat7dayspercentage','samedayclosedpercentage','onecontactpercentage','lesstransferspercentage']);
  console.log ("chart2 data i "+i+ ":"   + JSON.stringify(chart2data[i]))
}
newlabels = []; 
const ctx2 = document.getElementById('myChart2').getContext('2d');
window.myChart2 = new Chart(ctx2, {
    type: 'line',
    data: {
        labels: newlabels,
        datasets: [{label: 'RFT',
data:chart2data,
backgroundColor: ['rgba(255, 99, 132, 0.2)', ],
borderColor: [ 'rgba(255, 99, 132, 1)'],
borderWidth:2,
//tension:0.4,
parsing: {
  xAxisKey: '_id',
  yAxisKey: 'rftpercentage',
}
},
{label: 'CSAT',
data:chartdata,
backgroundColor: ['rgba(135, 99, 132, 0.2)', ],
borderColor: [ 'rgba(135, 99, 132, 1)'],
borderWidth:2,
//tension:0.4,
parsing: {
  xAxisKey: '_id',
  yAxisKey: 'csatpercentage',
}
},
      ]
    },
    plugins: [ChartDataLabels],
    options: {
      scales: {
            x: {
               grid: {
                  display: false
               }
             },
            y: {
              display:false,
              grace: '20%',
               grid: {
                  display: false
               },
               ticks: {
                    display: false //this will remove only the label
                },
            }
       },
    
      plugins: {
        
        datalabels:{
          anchor:'top',
          align:'end',
          formatter: function (value,context) {
                        //console.log("chart context value: "+ context.chart.data.labels[context.dataIndex])
            //var x = JSON.stringify(value);
            if(context.datasetIndex==0) {return value.rftpercentage};
            if(context.datasetIndex==1) {return value.csatpercentage};
            if(context.datasetIndex==2) {return value.onecontactpercentage};
            if(context.datasetIndex==3) {return value.lesstransferspercentage};
            if(context.datasetIndex==4) {return value.rftpercentage};
            
            //else {return value._id};
            //console.log("chart context value: "+ value._id)
            //console.log("chart value: "+ context.chart.datasetIndex.dataIndex)
            
            //return context.chart.data.labels[context.dataIndex];          
            
            return value._id;                                   
                                }
              }, 
        legend:{
          display: true,
          align:'center',
        position: 'bottom',
          color: 'red',
          labels:{
          usePointStyle: true,
          boxWidth: 5,
        },
        }
      }
    },
    
});
  }
  chart2data();
</script>
</div>
  </div>
  
</div>

  </div>

<footer id="footerpejao">
  
</footer>

</div> 
</div>

<script>
  var shownumberflag = 0;
  $(document).ready(function () {
    let viewportHeight = window.innerHeight;
let viewportWidth = window.innerWidth;
    console.log("I am running");
console.log("data fetched is");
console.log("viewportheight is: "+ viewportHeight);
console.log(" viewportwidth is: "+ viewportWidth);

});
  function toNumbers(){
    shownumberflag = 1;
    document.getElementById('shownumbers').style.display="inline";
    document.getElementById('showpercentage').style.display="inline";
    valueset();
datafetch();
}
  function toPercentage(){
    shownumberflag = 0;
    valueset();
datafetch();
    //  alert("show number flag from to percentage"+ shownumberflag);
    document.getElementById('shownumbers').style.display="inline";
    document.getElementById('showpercentage').style.display="inline";
  }
  
  
  function togglefilters(){
  var chartdatavalues =[];
    if(document.getElementById('filters').style.display != 'none') {
    document.getElementById('filters').style.display = 'none';
    document.getElementById('togglefilters').className = 'bi bi-toggle-off';
    }
    else {
      document.getElementById('filters').style.display = 'inline';
    document.getElementById('togglefilters').className = 'bi bi-toggle-on'
  } 
  }

function frequencyselected(y){
 var x = '/frequency/'+ y;
  console.log("button clicked y to x variable:"+ x);
  
  $.get({url:x,
    cache:false}).then(function(data, status){
    console.log("Data: " + JSON.stringify(data) + "\nStatus: " + status);
    var updatedchart1data = data.chart1alldata;
    console.log("updated chart1 data :"+ updatedchart1data.length);
    var newlabels = []; 
    var norepeat7daypercentage = []
    if(x=='/frequency/Daily'){
    for (var i = 0; i < updatedchart1data.length; i++) {
    norepeat7daypercentage.push(updatedchart1data[i].norepeat7dayspercentage)
    }
  }
  else {
    for (var i = 0; i < updatedchart1data.length; i++) {
      //newlabels.push( 'week' + updatedchart1data[i]._id )
      
      norepeat7daypercentage.push(updatedchart1data[i].norepeat7dayspercentage)
    }
  }removeData(myBar);
removeData(myChart2);
addData(myBar,newlabels,data);
addData(myChart2,newlabels,data);
});
}
 function resetallfilters(){ 
    console.log("reset filters  clicked"); 
 var url = '/data'  ; 
     fetch(url)
     .then(x => x.json())
     .then(setTimeout(function(){

      window.location.reload();
}, 500))

}
</script>
</body>
</html>
0 Answers
Related