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>