I have a line chartJS chart with the datalabel plugin but the datalabel is cropped by the border of the canvas, is there a way to increase its z-index or something like that?
For example in this code (a cleaned-up version of the real code), I'm supposed to have 1234 as the last value but it only shows 12, and even 3 is cropped. I would like to display it on top of the white border or maybe translate it a few pixels to the left automatically if it can't fit here (I don't care if a bit of the number border is cropped while the number isn't)
Chart.register(ChartDataLabels); // Import the data-labels plugin
graphItop4 = new Chart(document.getElementById("mois"), {
type: "line",
data: {
labels: [1, 2],
datasets: [{
label: "1",
fill: true,
data: [0, 1234],
backgroundColor: "rgba(0, 0, 255, 0.2)",
borderColor: "blue",
borderWidth: 1,
datalabels: {
align: 'start',
}
},
]
},
options: {
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor.replace("0.2", "0.5");
},
borderRadius: 100,
color: 'white',
font: {
weight: 'bold',
size: '15'
},
formatter: Math.round,
padding: 5,
}
},
},
})
body {
font-family: "Arial", Helvetica, sans-serif;
display: flex;
margin: 18px;
padding: 0;
background-color: #ccc;
}
.case {
position: relative;
padding: 10px;
text-align: center;
border-radius: 10px;
min-height: 240px;
background-color: #fff;
}
h2 {
font-size: 1.4em;
margin: 0;
padding: 10px 20px;
border-radius: 10px;
background-color: lightgrey;
}
<div class="case">
<h2>Mois</h2>
<div>
<canvas height="270" id="mois" width="600"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
In want to achieve javascript loop as my winning results. The correct example is the below preview.
enter image description here
But my result is different I want to know what would be the best ways to achieved the right result using loop.
enter image description here
I want to achieved every column of 6 records
if the next record is not match to current record it will draw and blank div. If result exceed on the 7th result or so, it will continue create a
L line.
var results = [{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "blue",
},
{
"winner": "blue",
},
{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "red",
},
{
"winner": "blue",
},
{
"winner": "blue",
},
{
"winner": "blue",
},
{
"winner": "blue",
},
{
"winner": "blue",
},
{
"winner": "blue",
},
{
"winner": "red",
},
{
"winner": "blue",
},
{
"winner": "blue",
}
];
var htmlData = '';
var htmlHistory = $('.results');
for (var i = 0; i < results.length; i++) {
htmlData += '<div class="item ' + results[i].winner + '"></div>';
}
htmlHistory.html(htmlData);
.results {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
height: 192px;
overflow-x: scroll;
overflow-y: hidden;
background-size: 32px 32px;
background-image: linear-gradient(to right, lightgrey 1px, transparent 1px), linear-gradient(to bottom, lightgrey 1px, transparent 1px);
background-repeat: repeat;
background-attachment: local;
background-color: white;
line-height: normal;
text-align: start;
}
.results .item {
flex: 1 1;
-webkit-flex: 1 1 100%;
width: 15px;
height: 15px;
max-width: 20px;
max-height: 10px;
margin: 1px;
border-style: solid;
border-width: 8px;
border-radius: 15px;
box-shadow: 1px 2px 2px #888888;
}
.item.red {
border-color: #B31013;
}
.item.blue {
border-color: blue;
}
.blank_result {
width: 32px;
height: 32px;
border-color: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="results"></div>
Hello guys I've recently started doing a chess application and I got everything set up except for the GUI. For some reason I can't get the tiles for the board to display and I don't know why. (Speculation) I think my problem has something to do with my usage of the DOM. Unfortunately for me, I've been trying to solve it for days now with no success. Could someone please help and enlighten me on this issue might be resolved because I don't know what I am missing at this point, although I suspect it is something very simple. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chess Game</title>
<script type="text/javascript">
function drawBoard(){
var board = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,23, 24,
25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63];
for(var i = 1; i <= board.length; i++){
if(i % 2 == 0){
document.getElementById("whiteSquare");
}else{
document.getElementById("blackSquare");
}
}
}
</script>
<style type="text/css">
#gameBoardBorder{
width: 480px;
height: 480px;
border: solid;
border-color: black;
border-width: 2px;
float: left;
}
h1{
text-align: center;
font-family: sans-serif;
}
#whiteSquare{
width: 60px;
height: 60px;
background-color: white;
}
#blackSquare{
width: 60px;
height: 60px;
background-color: black;
}
body{
background-color: lightblue;
}
</style>
</head>
<body onload="drawBoard()">
<h1>Chess Board</h1>
<div id="gameBoardBorder">
<!-- Noting more needed to be done here, rest will be in the css -->
</div>
<div id="whiteSquare">
<!-- Noting more needed to be done here, rest will be in the css and javaScript-->
</div>
<div id="blackSquare">
<!-- Noting more needed to be done here, rest will be in the css and javaScript-->
</div>
</body>
</html>
PS: Yes, I know the code looks bad and could be done in a better way I'll do the refactoring later.
Thanks in advance, to all who would try to help.
The reason you only get two squares:
document.getElementById returns an existing element; an element that already exists. In your HTML, you have only created 2 squares, and you never create any more.
I think every time you've used document.getElementById you are trying to create a new square.
You should use document.createElement instead of document.getElementById to create new elements.
So steps to fix your problem:
ids must be unique. Style for classes instead (to have more than 1 white square, and more than 1 black square):
.whiteSquare{
width: 60px;
height: 60px;
background-color: white;
}
.blackSquare{
width: 60px;
height: 60px;
background-color: black;
}
Remove the initial <div id="whiteSquare"> and <div id="blackSquare"> elements from your HTML. We will create them in JavaScript.
Replace
for(var i = 1; i <= board.length; i++){
if(i % 2 == 0){
document.getElementById("whiteSquare");
}else{
document.getElementById("blackSquare");
}
}
with
for (var i = 0; i < board.length; i++) {
var square = document.createElement("div");
if (i / 8 % 2 < 1) {
if (i % 2 == 0) square.classList.add("whiteSquare");
else square.classList.add("blackSquare");
} else {
if (i % 2 == 0) square.classList.add("blackSquare");
else square.classList.add("whiteSquare");
}
document.getElementById("gameBoardBorder").appendChild(square);
}
To get the squares to display in the right places, you need to add display: inline-block; to their stylings.
To get rid of a gap in-between rows of squares, set the style rule line-height: 0; on #gameBoardBorder
Note I put all the squares inside of #gameBoardBoarder.
function drawBoard() {
var board = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63
];
for (var i = 0; i < board.length; i++) {
var square = document.createElement("div");
if (i / 8 % 2 < 1) {
if (i % 2 == 0) square.classList.add("whiteSquare");
else square.classList.add("blackSquare");
} else {
if (i % 2 == 0) square.classList.add("blackSquare");
else square.classList.add("whiteSquare");
}
document.getElementById("gameBoardBorder").appendChild(square);
}
}
#gameBoardBorder {
width: 480px;
height: 480px;
border: solid;
border-color: black;
border-width: 2px;
float: left;
line-height: 0;
}
#gameBoardBorder > * {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
font-family: sans-serif;
}
.whiteSquare {
display: inline-block;
width: 60px;
height: 60px;
background-color: white;
}
.blackSquare {
display: inline-block;
width: 60px;
height: 60px;
background-color: black;
}
body {
background-color: lightblue;
}
<body onload="drawBoard()">
<h1>Chess Board</h1>
<div id="gameBoardBorder">
<!-- Noting more needed to be done here, rest will be in the css -->
</div>
</body>
In your example, you aren't actually creating any elements.
You need to create elements with Document.createElement, and then insert them with element.appendChild
Here is a simple unformatted example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chess Game</title>
<script type="text/javascript">
function drawBoard(){
var board = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,23, 24,
25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63];
const container = document.getElementById("gameBoardBorder");
for(var i = 1; i <= board.length; i++){
let el = document.createElement('div');
if(i % 2 == 0){
el.className = "whiteSquare";
}else{
el.className ="blackSquare";
}
container.appendChild(el);
}
}
</script>
<style type="text/css">
#gameBoardBorder{
width: 480px;
height: 480px;
border: solid;
border-color: black;
border-width: 2px;
display: flex;
flex-flow: row wrap;
}
h1{
text-align: center;
font-family: sans-serif;
}
.whiteSquare{
width: 60px;
height: 60px;
background-color: white;
}
.blackSquare{
width: 60px;
height: 60px;
background-color: black;
}
body{
background-color: lightblue;
}
</style>
</head>
<body onload="drawBoard()">
<h1>Chess Board</h1>
<div id="gameBoardBorder">
<!-- Noting more needed to be done here, rest will be in the css -->
</div>
<div id="whiteSquare">
<!-- Noting more needed to be done here, rest will be in the css and javaScript-->
</div>
<div id="blackSquare">
<!-- Noting more needed to be done here, rest will be in the css and javaScript-->
</div>
</body>
</html>
Now you can see that this doesn't actually create a chess board like you want - because the way the elements wrap (always left to right) means that you don't actually want every second element to be white.
It's up to you to decide how you want to handle this logic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chess Game</title>
<script>
function drawBoard(){
let row = 1;
for(let i = 1; i <= 64; i++){
if(row % 2 == 0){ // row 2,4,6,8
var color = i % 2 == 0 ? "whiteSquare" : "blackSquare";
}else{ // row 1,3,5,7
var color = i % 2 == 0 ? "blackSquare" : "whiteSquare";
}
let square = document.createElement("div");
square.className = color;
if (i % 8 == 0){ // new row
square.style = "clear:all";
row++;
}
gameBoardBorder.appendChild(square);
}
}
</script>
<style>
#gameBoardBorder{
width: 480px;
height: 480px;
border: solid;
border-color: black;
border-width: 2px;
float: left;
}
h1{
text-align: center;
font-family: sans-serif;
}
.whiteSquare{
width: 60px;
height: 60px;
background-color: white;
float: left;
}
.blackSquare{
width: 60px;
height: 60px;
background-color: black;
float: left;
}
body{
background-color: lightblue;
}
</style>
</head>
<body onload="drawBoard()">
<h1>Chess Board</h1>
<div id="gameBoardBorder">
<!-- Noting more needed to be done here, rest will be in the css -->
</div>
</body>
</html>
I'm new to jVectorMap. I've already got the google map from the link: http://codepen.io/anon/pen/RPjJYb. I'm trying to add markers to this map.
I tried the following code but couldn't add marker to the map:
$('#vmap').vectorMap({
map: 'usa_en',
backgroundColor: null,
color: '#D2D3D4', //#F58025
hoverColor: '#754200',
selectedColor: '#F58025',
borderColor: '#FFFFFF',
enableZoom: false,
showTooltip: false,
regionsSelectable: true,
markersSelectable: true,
markerStyle: {
initial: {
fill: 'grey',
stroke: '#505050',
"fill-opacity": 1,
"stroke-width": 1,
"stroke-opacity": 1,
r: 5
},
hover: {
stroke: 'black',
"stroke-width": 2
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},
markers: [
{latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}},
],
onRegionClick: function(element, code)
{
alert(code);
}
});
Please help me. Thanks in advance.
You are not using jVectormap, but jqvmap. I don't think it implements markers.
You can switch to jVectorMap, it's a bit different, but it has markers like: http://jvectormap.com/examples/markers-world/
Simple demo: http://jsfiddle.net/IrvinDominin/96o28qnh/
as #Irvin Dominin said jqvmap does not implement markers so try using jVectormap they are lot alike.
$(document).ready(function(){
$('#vmap').vectorMap({
map: 'us_aea_en',
backgroundColor: '#00ff11',
color: '#D2D3D4', //#F58025
hoverColor: '#754200',
selectedColor: '#F58025',
borderColor: '#FFFFFF',
enableZoom: false,
showTooltip: false,
regionsSelectable: true,
markersSelectable: true,
hoverOpacity: 0.7,
markersSelectable: true,
markerStyle: {
initial: {
fill: 'grey',
stroke: '#505050',
"fill-opacity": 1,
"stroke-width": 1,
"stroke-opacity": 1,
r: 5
},
hover: {
stroke: 'black',
"stroke-width": 2
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},
markers: [
{latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}},
],
onRegionClick: function(element, code)
{
alert(code);
}
});
});
.jvectormap-label {
position: absolute;
display: none;
border: solid 1px #CDCDCD;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
}
.jvectormap-zoomin, .jvectormap-zoomout {
position: absolute;
left: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
padding: 3px;
color: white;
width: 10px;
height: 10px;
cursor: pointer;
line-height: 10px;
text-align: center;
}
.jvectormap-zoomin {
top: 10px;
}
.jvectormap-zoomout {
top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery-jvectormap-1.1.1.min.js"></script>
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery.jvectormap-us.js"></script>
<div id="vmap" style="width: 600px; height: 600px;"></div>