I am new at Javascript/HTML/CSS development. I created a chart or graph using canvasjs. But it overlays the titlebar. I have a table right beside it that doesn't overlay when scrolled. picture reference here
This is my css:
.titleBar{
background-color: #f0f0f5;
height: 40px;
width: 100%;
position: fixed;
}
.titleBar input[type=button]{
height: 100%;
width: 15% ;
outline: none;
border: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.titleBar input:hover{
background-color:#b1b1cd;
}
.titleBar input:focus{
border-bottom-style: solid;
border-bottom-color: #3c3c5d;
}
.upper{
height: 250px;
width: 100%;
padding-left: 2%;
padding-right: 2%;
margin-top: 5%;
}
.barGraph{
height: 100%;
width: 30%;
background-color: white;
float: left;
}
.topLocations{
height: 250px;
width: 250px;
background-color: white;
margin-right: 5%;
text-align: center;
float: right;
}
.topStocks{
height: 250px;
width: 250px;
background-color: white;
margin-right: 5%;
text-align: center;
float: right;
}
.topAgents{
height: 250px;
width: 250px;
background-color: white;
margin-right: 5%;
text-align: center;
float: right;
}
Before I was using chart.js with the same css and it works fine but when I switched to canvasjs, I had this problem.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="index.css">
<script type="text/javascript">
$(document).ready(function(){
var dataPoints = [];
var chart = new CanvasJS.Chart("barGraph",{
animationEnabled: true,
title:{
text:"Top Groups"
},
data: [{
type: "column",
dataPoints : dataPoints,
}]
});
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(value[1])});
});
chart.render();
});
});
$(document).ready(function(){
var dataPoints = [];
var pieGraph = new CanvasJS.Chart("pieGraph",{
animationEnabled: true,
title:{
text:"Pie Graph"
},
data: [{
type: "pie",
dataPoints : dataPoints,
}]
});
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(value[1])});
});
pieGraph.render();
});
});
$(document).ready(function(){
var dataPoints = [];
var lineGraph = new CanvasJS.Chart("lineGraph",{
animationEnabled: true,
title:{
text:"Sales Trend"
},
data: [{
type: "line",
dataPoints : dataPoints,
}]
});
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(value[1])});
});
lineGraph.render();
});
});
</script>
</head>
<body>
<script>
$(function(){
$("#titleBar").load("menuBar.html");
})
</script>
<div id="titleBar"></div>
<div class="container">
<div class="upper">
<div id="barGraph" class="barGraph"></div>
<div class="topStocks">
<table id="topStocks">
<tr>
<th></th>
<th>TOP 5 Stocks</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
<div class="topLocations">
<table id="topLocations">
<tr>
<th></th>
<th>TOP 5 Locations</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
<div class="topAgents">
<table id="topAgents">
<tr>
<th></th>
<th>TOP 5 Agents</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
</div>
<div class="middle">
<div id="lineGraph" class="lineGraph" ></div>
<div id="pieGraph" class="pieGraph" ></div>
</div>
<div class="lower"> <!--Start of Lower Layer-->
<div class="customer">
<table id="customer">
<tr>
<th></th>
<th>Top 10 Customers</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
<div class="employees">
<table id="employees">
<tr>
<th></th>
<th>EMPLOYEES</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
<div class="exchangeRate">
<table id="exchangeRate">
<tr>
<th></th>
<th>EXCHANGE RATE</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
<div class="financial">
<table id="financial">
<tr>
<th></th>
<th>FINANCIALS</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
</div> <!--End of Lower Layer-->
</div>
</body>
</html>
It looks like all you're missing is a bit of z-index on your .titleBar. I added z-index: 1; to the CSS you've provided and I now see the bar on top. I had to guess what the contents of .titleBar might have been since I don't know what's in the .load("menuBar.html") call, but I'm optimistic this will give you what you need.
.titleBar{
background-color: #f0f0f5;
height: 40px;
width: 100%;
position: fixed;
z-index: 1; /* added this */
}
.titleBar input[type=button]{
height: 100%;
width: 15% ;
outline: none;
border: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.titleBar input:hover{
background-color:#b1b1cd;
}
.titleBar input:focus{
border-bottom-style: solid;
border-bottom-color: #3c3c5d;
}
.upper{
height: 250px;
width: 100%;
padding-left: 2%;
padding-right: 2%;
margin-top: 5%;
}
.barGraph{
height: 100%;
width: 30%;
background-color: white;
float: left;
}
.topLocations{
height: 250px;
width: 250px;
background-color: white;
margin-right: 5%;
text-align: center;
float: right;
}
.topStocks{
height: 250px;
width: 250px;
background-color: white;
margin-right: 5%;
text-align: center;
float: right;
}
.topAgents{
height: 250px;
width: 250px;
background-color: white;
margin-right: 5%;
text-align: center;
float: right;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
$(document).ready(function(){
var dataPoints = [];
var chart = new CanvasJS.Chart("barGraph",{
animationEnabled: true,
title:{
text:"Top Groups"
},
data: [{
type: "column",
dataPoints : dataPoints,
}]
});
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(value[1])});
});
chart.render();
});
});
$(document).ready(function(){
var dataPoints = [];
var pieGraph = new CanvasJS.Chart("pieGraph",{
animationEnabled: true,
title:{
text:"Pie Graph"
},
data: [{
type: "pie",
dataPoints : dataPoints,
}]
});
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(value[1])});
});
pieGraph.render();
});
});
$(document).ready(function(){
var dataPoints = [];
var lineGraph = new CanvasJS.Chart("lineGraph",{
animationEnabled: true,
title:{
text:"Sales Trend"
},
data: [{
type: "line",
dataPoints : dataPoints,
}]
});
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(value[1])});
});
lineGraph.render();
});
});
</script>
<div id="titleBar">
<div class="titleBar">
<input type="button" value="Title bar item 1">
<input type="button" value="Customer Information">
<input type="button" value="Financial information">
<input type="button" value="Presentation materials">
<input type="button" value="Logout">
</div>
</div>
<div class="container">
<div class="upper">
<div id="barGraph" class="barGraph"></div>
<div class="topStocks">
<table id="topStocks">
<tr>
<th></th>
<th>TOP 5 Stocks</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
<div class="topLocations">
<table id="topLocations">
<tr>
<th></th>
<th>TOP 5 Locations</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
<div class="topAgents">
<table id="topAgents">
<tr>
<th></th>
<th>TOP 5 Agents</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
</div>
<div class="middle">
<div id="lineGraph" class="lineGraph" ></div>
<div id="pieGraph" class="pieGraph" ></div>
</div>
<div class="lower"> <!--Start of Lower Layer-->
<div class="customer">
<table id="customer">
<tr>
<th></th>
<th>Top 10 Customers</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
<div class="employees">
<table id="employees">
<tr>
<th></th>
<th>EMPLOYEES</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
<div class="exchangeRate">
<table id="exchangeRate">
<tr>
<th></th>
<th>EXCHANGE RATE</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
<div class="financial">
<table id="financial">
<tr>
<th></th>
<th>FINANCIALS</th>
</tr>
<tr>
<td>1.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>2.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>3.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>4.</td>
<td>Angelique Esguerra</td>
</tr>
<tr>
<td>5.</td>
<td>Angelique Esguerra</td>
</tr>
</table>
</div>
</div> <!--End of Lower Layer-->
</div>