We Keep Coding

jquery UI inventory items block after move slot

I have a problem
When i move a item on another slot, the item will block, and can't be moved.
Code:
$(function() {
function log(string) {
console.log(Date.now(), string);
}
function makeGrid() {
log("Make Grid...");
for (var i = 0; i < 36; i++) {
$("<div>", {
class: "slot"
}).data({
count: 0,
stackable: true
}).appendTo(".slots");
}
log("-* Grid Complete *-");
}
function makeDraggable(target) {
log("Make Drag, Current Class: " + $(target).attr("class"));
console.log(target);
$(target).draggable({
scroll: false,
helper: "clone",
cursor: "pointer",
zIndex: 27,
revert: "invalid"
});
log("After Make Drag, Current Class: " + $(target).attr("class"));
console.log(target);
}
function refreshSlot(target) {
log("Refresh Slot");
$(".size", target).html($(target).data("count"));
}
function addItem(slot, item) {
log("Add Item " + item.id);
$.extend(item, {
stackable: (item.category != 0),
count: (item.count == undefined ? 1 : item.count)
});
slot = $(slot);
var newItem = $("<div>", {
class: "item",
id: item.id,
})
.data(item)
.css("background-image", "url(" + item.img + ")");
newItem.appendTo(slot);
$("<div>", {
class: "size"
}).appendTo(slot);
slot.data({
count: item.count,
stackable: item.stackable
});
log("Item Added - Refreshing");
refreshSlot(slot);
}
function emptySlot(target) {
log("Empty Slot " + $(target).index());
$(target).data({
count: 0,
stackable: true
}).empty();
}
function loadPlayerItems(items) {
log("Loading Player Items...");
$.each(items, function(index, item) {
addItem($(".slots > .slot").eq(index), item);
});
log("-* Loading Complete *-");
}
function isAcceptable(item) {
if ($(this).children().length == 0 || $(".item", this).data("stackable")) {
return true;
}
return false;
}
var pItems = {
playerItems: [{
img: 'https://i.imgur.com/5cjSI9X.png',
name: 'bat',
id: 1,
category: 0
},
{
img: 'https://i.imgur.com/HLQORBk.png',
name: 'axe',
id: 2,
category: 1
},
{
img: 'https://i.imgur.com/HLQORBk.png',
name: 'axe',
id: 3,
category: 1
}
]
};
makeGrid();
loadPlayerItems(pItems.playerItems);
makeDraggable(".item");
$(".slots > .slot").droppable({
accept: isAcceptable,
drop: function(event, ui) {
var origin = ui.draggable.parent();
var target = $(this);
log("Drop Accepted; From: " + origin.index() + ", To: " + target.index());
// Increase the Count
target.data("count", target.data("count") + 1);
// Check for Stack
if (target.children().length == 0) {
addItem(target, ui.draggable.data());
} else {
refreshSlot(target);
}
// Check Orginal Stack
if (origin.data("count") > 1) {
origin.data("count", origin.data("count") - 1);
refreshSlot(origin);
} else {
emptySlot(origin);
}
makeDraggable($(".item", this));
}
});
});
body {
display: flex;
justify-content: space-between;
}
#inventory {
width: 100vw;
height: 56.25vw;
background: rgba(0,0,0,.5);
}
.list-slots {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.7);
width: 41.667vw;
height: 41.667vw;
max-width: 80%;
}
.slots {
max-width: 87%;
margin: auto;
padding-top: 3.125vw;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.slots .slot {
width: 100px;
height: calc(100px + 1em);
background-color: #ccc;
margin-bottom: 0.781vw;
}
.slots .slot .item {
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="inventory">
<div class="list-slots">
<div class="slots"></div>
</div>
</div>

how can we display different legends container for same graph(sunburst drill down)? in Amcharts4

I was trying to add two legends containers for the same graph(sunburst drill-down). one on the left side and another on the right side of the graph.
After lots of research, I found the solution but it was for piechart not for sunburst drill down. I want the same solution for sunburst drill down.
Below is the Image of the solution which I found.
enter image description here
code for above image:
Js, CSS, HTML
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
am4core.useTheme(am4themes_animated);
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);
// Add data
chart.data =
[{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czechia",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
}];
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.labels.template.disabled = true;
radius = am4core.percent(95);
chart.legend = new am4charts.Legend();
chart.legend.position = "left";
chart.legend.scrollable = true;
// Create custom legend
chart.events.on("ready", function(event) {
// populate our custom legend when chart renders
chart.customLegend = document.getElementById('legend');
pieSeries.dataItems.each(function(row, i) {
var color = chart.colors.getIndex(i);
var percent = Math.round(row.values.value.percent * 100) / 100;
var value = row.value;
legend.innerHTML += '<div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" onmouseover="hoverSlice(' + i + ');" onmouseout="blurSlice(' + i + ');" style="color: ' + color + ';"><div class="legend-marker" style="background: ' + color + '"></div>' + row.category + '<div class="legend-value">' + value + ' | ' + percent + '%</div></div>';
});
});
function toggleSlice(item) {
var slice = pieSeries.dataItems.getIndex(item);
if (slice.visible) {
slice.hide();
}
else {
slice.show();
}
}
function hoverSlice(item) {
var slice = pieSeries.slices.getIndex(item);
slice.isHover = true;
}
function blurSlice(item) {
var slice = pieSeries.slices.getIndex(item);
slice.isHover = false;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 530px;
height: 450px;
font-size: 11px;
border: 1px solid #eee;
float: left;
}
#legend {
width: 200px;
height: 450px;
border: 1px solid #eee;
margin-left: 10px;
float: left;
}
#legend .legend-item {
margin: 10px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
#legend .legend-item .legend-value {
font-size: 12px;
font-weight: normal;
margin-left: 22px;
}
#legend .legend-item .legend-marker {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #ccc;
margin-right: 10px;
}
#legend .legend-item.disabled .legend-marker {
opacity: 0.5;
background: #ddd;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<div id="legend"></div>
I tried to solve my problem with the above solution but it didn't work.
Below are the details for my changes :
enter image description here
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// create chart
var chart = am4core.create("chartdiv", am4plugins_sunburst.Sunburst);
chart.padding(0, 0, 0, 0);
chart.radius = am4core.percent(98);
data1 = [{
name: "First",
children: [
{ name: "A1", value: 100 },
{ name: "A2", value: 60 }
]
},
{
name: "Second",
children: [
{ name: "B1", value: 135 },
{ name: "B2", value: 98 }
]
},
{
name: "Third",
children: [
{
name: "C1",
children: [
{ name: "EE1", value: 130 },
{ name: "EE2", value: 87 },
{ name: "EE3", value: 55 }
]
},
{ name: "C2", value: 148 },
{
name: "C3", children: [
{ name: "CC1", value: 53 },
{ name: "CC2", value: 30 }
]
},
{ name: "C4", value: 26 }
]
},
{
name: "Fourth",
children: [
{ name: "D1", value: 415 },
{ name: "D2", value: 148 },
{ name: "D3", value: 89 }
]
},
{
name: "Fifth",
children: [
{
name: "E1",
children: [
{ name: "EE1", value: 33 },
{ name: "EE2", value: 40 },
{ name: "EE3", value: 89 }
]
},
{
name: "E2",
value: 148
}
]
}];
let dt1 = [];
for(var i=0;i<data1.length;i++){
dt1[i] = {"name":data1[i].name,"fill":"#72A6B2"};
}
chart.data = data1;
chart.colors.step = 2;
chart.fontSize = 11;
chart.innerRadius = am4core.percent(20);
// define data fields
chart.dataFields.value = "value";
chart.dataFields.name = "name";
chart.dataFields.children = "children";
var level0SeriesTemplate = new am4plugins_sunburst.SunburstSeries();
chart.seriesTemplates.setKey("0", level0SeriesTemplate)
// this makes labels to be hidden if they don't fit
level0SeriesTemplate.labels.template.truncate = true;
level0SeriesTemplate.labels.template.hideOversized = true;
level0SeriesTemplate.showOnInit = false;
level0SeriesTemplate.usePercentHack = false;
level0SeriesTemplate.radius = am4core.percent(100);
level0SeriesTemplate.innerRadius = am4core.percent(0);
let selectedState = level0SeriesTemplate.states.create("selected");
selectedState.properties.opacity = 0.7;
level0SeriesTemplate.defaultState.properties.radius = am4core.percent(100);
var currentlySelected;
level0SeriesTemplate.slices.template.events.on("over", function(event) {
if(event.target.dataItem.sunburstDataItem.children){
event.target.cursorOverStyle = am4core.MouseCursorStyle.pointer;
}
})
level0SeriesTemplate.slices.template.events.on("hit", function(event) {
zoomOutButton.show();
var hitSlice = event.target;
if (hitSlice.dataItem.sunburstDataItem.children) {
var series = event.target.dataItem.component;
if (!series.dummyData) {
series.tooltip.disabled = true;
hitSlice.dataItem.label.radius = (hitSlice.radius - hitSlice.pixelInnerRadius) - 7;
hitSlice.dataItem.label.bent = true;
hitSlice.dataItem.label.rotation = -180;
currentlySelected = hitSlice;
series.dummyData = true;
series.setState("selected");
hitSlice.dataItem.sunburstDataItem.series.show();
series.slices.each(function(slice) {
if (slice != event.target) {
slice.dataItem.hide();
}
})
}
else {
drillUp(hitSlice);
}
}
})
level0SeriesTemplate.labels.template.adapter.add("rotation", function(rotation, target) {
target.maxWidth = target.dataItem.slice.radius - target.dataItem.slice.innerRadius - 10;
target.maxHeight = Math.abs(target.dataItem.slice.arc * (target.dataItem.slice.innerRadius + target.dataItem.slice.radius) / 2 * am4core.math.RADIANS);
return rotation;
})
var level1SeriesTemplate = level0SeriesTemplate.clone();
level1SeriesTemplate.hidden = true;
level1SeriesTemplate.innerRadius = am4core.percent(10);
chart.seriesTemplates.setKey("1", level1SeriesTemplate)
level1SeriesTemplate.fillOpacity = 0.75;
var level2SeriesTemplate = level0SeriesTemplate.clone();
level2SeriesTemplate.hidden = true;
level2SeriesTemplate.innerRadius = am4core.percent(20);
chart.seriesTemplates.setKey("2", level2SeriesTemplate)
level0SeriesTemplate.hiddenInLegend = false;
level1SeriesTemplate.hiddenInLegend = true;
level2SeriesTemplate.hiddenInLegend = true;
var zoomOutButton = chart.seriesContainer.createChild(am4core.ZoomOutButton);
zoomOutButton.visible = false;
zoomOutButton.horizontalCenter = "middle";
zoomOutButton.verticalCenter = "middle";
zoomOutButton.events.on("hit", function() {
drillUp(currentlySelected)
})
function drillUp(slice) {
collapse(slice);
var series = slice.dataItem.component;
series.tooltip.disabled = false;
series.dummyData = false;
series.setState("default");
series.slices.each(function(slice) {
if (slice != event.target) {
slice.dataItem.show();
}
})
if (series.parentDataItem.seriesDataItem) {
currentlySelected = series.parentDataItem.seriesDataItem.slice;
}
else {
zoomOutButton.hide();
}
}
function collapse(slice) {
slice.dataItem.label.bent = false;
slice.dataItem.label.radius = 10;
if (slice.dataItem.sunburstDataItem.children) {
slice.dataItem.sunburstDataItem.children.each(function(child) {
child.seriesDataItem.component.setState("hidden");
collapse(child.seriesDataItem.slice);
})
}
}
/* var legend = new am4charts.Legend();
legend.position = "right";
legend.scrollable = true;
legend.parent = chart.chartContainer;
legend.background.fill = am4core.color("#000");
legend.background.fillOpacity = 0.05;
legend.width = 120;
legend.align = "right";
legend.data = dt1; */
/*
[{
"name": "2016",
"fill":"#72A6B2"
}, {
"name": "2017",
"fill": "#667E93"
}, {
"name": "2018",
"fill": "#488BB2"
}];*/
chart.legend = new am4charts.Legend();
//chart.legend.parent = chart.chartContainer;
//chart.legend.itemContainers.template.togglable = true;
chart.legend.position = "left";
chart.legend.scrollable = true;
// Create custom legend
chart.events.on("ready", function(event) {
// populate our custom legend when chart renders
chart.customLegend = document.getElementById('legend');
/* level0SeriesTemplate.slices.dataItems.each(function(row, i) { */
level0SeriesTemplate.dataItems.each(function(row, i) {
var color = chart.colors.getIndex(i);
var percent = Math.round(row.values.value.percent * 100) / 100;
var value = row.value;
legend.innerHTML += '<div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" onmouseover="hoverSlice(' + i + ');" onmouseout="blurSlice(' + i + ');" style="color: ' + color + ';"><div class="legend-marker" style="background: ' + color + '"></div>' + row.name + '<div class="legend-value">' + value + ' | ' + percent + '%</div></div>';
});
});
function toggleSlice(item) {
var slice = level0SeriesTemplate.dataItems.getIndex(item);
if (slice.visible) {
slice.hide();
}
else {
slice.show();
}
}
function hoverSlice(item) {
var slice = level0SeriesTemplate.slices.getIndex(item);
slice.isHover = true;
}
function blurSlice(item) {
var slice = level0SeriesTemplate.slices.getIndex(item);
slice.isHover = false;
}
/* var legendContainer = am4core.create("legend", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
legend = new am4charts.Legend();
legend.parent = legendContainer;
legend.position = "middle";
legend.valign = "middle";
legend.data = dt1;
legend.scrollable = true;
let Label1 = legendContainer.createChild(am4core.Label);
//Label1.height = 50;
Label1.fontWeight = "600";
Label1.align = "left";
Label1.paddingTop = 6;
Label1.paddingBottom = 6;
Label1.text = "Non-Reco Analytics"; */
/*
chart.legend.data = [{
"name": "2016",
"fill":"#72A6B2"
}, {
"name": "2017",
"fill": "#667E93"
}, {
"name": "2018",
"fill": "#488BB2"
}]; */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 530px;
height: 450px;
font-size: 11px;
border: 1px solid #eee;
float: left;
}
#legend {
width: 200px;
height: 450px;
border: 1px solid #eee;
margin-left: 10px;
float: left;
}
#legend .legend-item {
margin: 10px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
#legend .legend-item .legend-value {
font-size: 12px;
font-weight: normal;
margin-left: 22px;
}
#legend .legend-item .legend-marker {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #ccc;
margin-right: 10px;
}
#legend .legend-item.disabled .legend-marker {
opacity: 0.5;
background: #ddd;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/sunburst.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<div id="legend"></div>
objective: I want legends for the 1st layer of the sunburst on the right side and the 2nd layer on the left side of the chart.
I hope you get enough understanding of my problem.

Trying to format results from json file into html

I am working on a simple ajax, javascript and php(json data feed) just to learn . I am a little stuck in that I am attempting to capitalize the first letter of one of the results from the json file....temp under the main obj needs to read Temp: on the html page. I tried using the function but its not erroring out but its not working at the same time. Secondly I want to move the results of either the DOM queries to the center of the page either through css or via js...I have been unsucessful at the css way.,perhaps I do not understand style as it pertains to onload? If anyone could maybe point out the correct way to implement I would appreciate it. Here is my code: an html file, css file, php file and javascript.
Thanks in advance everyone.
<body>
<h1 class="title">Todays Weather Forecast</h1>
<p class="sub">Click the button the check the local weather.</p>
<button class="demo-centered" type="button" onclick="loadPhp()">Check Weather</button><br><br>
<div id="content"></div>
<div id="content2"></div>
</body>
</html>
----------------------CSS---------------------------------------
#import url('https://fonts.googleapis.com/css2?
family=Oxygen&family=Roboto+Mono&family=Source+Code+Pro&display=swap');
/* font-family: 'Source Code Pro', monospace; */
.title {
text-align: center;
font-family: 'Oxygen', sans-serif;
}
#demo {
text-align: center;
font-family: 'Roboto Mono', monospace;
}
.demo-centered {
margin: 0;
position: absolute;
left: 45%;
}
.sub {
font-family: 'Source Code Pro', monospace;
text-align: center;
}
body {
background-image: url(./dave-herring-G5C-CsrmXak-unsplash.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
---------------------------------PHP File-----------------------------
{
"coord": {
"lon": -116.8,
"lat": 33.03
},
"weather": [{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
"icon": "03d"
}],
"base": "stations",
"main": {
"temp": 293.73,
"feels_like": 289.89,
"temp_min": 289.26,
"temp_max": 295.93,
"pressure": 1016,
"humidity": 52
},
"visibility": 16093,
"wind": {
"speed": 5.7,
"deg": 260
},
"clouds": {
"all": 40
},
"dt": 1589408840,
"sys": {
"type": 1,
"id": 5686,
"country": "US",
"sunrise": 1589374130,
"sunset": 1589423903
},
"timezone": -25200,
"id": 5391832,
"name": "San Diego County",
"cod": 200
}
-----------------------Javascript File ---------------------------
function loadPhp() {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.status === 200) {
var responseObject = JSON.parse(xhr.responseText);
var newContent = '';
var newContent2 = '';
for (var i = 0; i < responseObject.weather.length; i++) {
newContent += responseObject.weather[i].description;
}
for (var x in responseObject.main){
if (x === "temp"){
function capFirst(word){
return word.charAt(0).toUpperCase() + word.slice(1);
}
capFirst(x);
var z = responseObject.main[x];
z = Math.round((z - 273.15) * 1.8) + 32;
document.getElementById('content2').innerHTML = (x + ':' +z);
}
}
document.getElementById('content').innerHTML = "Description: " + newContent;
}
};
xhr.open('GET', 'demo.php', true);
xhr.send(null);
}

To fix the capitalization, change your code to
function capFirst(word){
return word.charAt(0).toUpperCase() + word.slice(1);
}
var capitalizedX = capFirst(x); //store returned value in a variable
......
document.getElementById('content2').innerHTML += (capitalizedX + ':' +z);

Loop through array data in carousel not working

I'm trying to build a carousel in JS that uses an array to store my data.
I want my box on the left to show the value for "Client" and the box on the right to show the value for "Candidate".
I can't seem to get it working despite what I believe is all correct?
let testimonials = [{
client: "Raphel",
candidate: "male"
},
{
client: "Tom",
candidate: "male"
},
{
client: "Jerry",
candidate: "male"
},
{
client: "Dorry",
candidate: "female"
}
];
var i = 0;
function nextItem() {
i = i + 1;
i = i % testimonials.length;
return testimonials[i].candidate;
}
function prevItem() {
if (i === 0) {
i = testimonials.length;
}
i = i - 1;
return testimonials[i].client;
}
window.addEventListener('load', function() {
$('.client-box').html(testimonials[i].client);
$('.candidate-box').html(testimonials[i].candidate);
$('.left-btn').on('click', function(e) {
$('.client-box').html(prevItem());
$('.candidate-box').html(prevItem());
});
$('.right-btn').on('click', function(e) {
$('.client-box').html(nextItem());
$('.candidate-box').html(nextItem());
});
});
https://jsfiddle.net/cL5mok3f/

Fixing the code:
let testimonials = [{
client: "Raphel",
candidate: "male"
},
{
client: "Tom",
candidate: "male"
},
{
client: "Jerry",
candidate: "male"
},
{
client: "Dorry",
candidate: "female"
}
];
var i = 0;
function nextItem() {
i = i + 1;
i = i % testimonials.length;
return testimonials[i];
}
function prevItem() {
if (i === 0) {
i = testimonials.length;
}
i = i - 1;
return testimonials[i];
}
window.addEventListener('load', function() {
$('.client-box').html(testimonials[i].client);
$('.candidate-box').html(testimonials[i].candidate);
$('.left-btn').on('click', function(e) {
var prev = prevItem();
$('.client-box').html(prev.client);
$('.candidate-box').html(prev.candidate);
});
$('.right-btn').on('click', function(e) {
var next = nextItem();
$('.client-box').html(next.client);
$('.candidate-box').html(next.candidate);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="client-box"></div>
<div class="candidate-box"></div>
<input type="button" class="left-btn" value="Prev" />
<input type="button" class="right-btn" value="Next" />

To achieve expected result, use below option
Issue: PrevItem and nextItem methods are called twice on clicking left and right which creates inconsistent carousel
Code sample
let testimonials = [
{client: "Raphel", candidate: "male"},
{client: "Tom", candidate: "male"},
{client: "Jerry", candidate: "male"},
{client: "Dorry", candidate: "female"}
];
var i = 0;
$('.client-box').text(testimonials[0].client);
$('.candidate-box').text(testimonials[1].candidate);
function nextItem() {
i = i + 1;
if (i === testimonials.length) {
i = i % testimonials.length;
}
return testimonials[i];
}
function prevItem() {
if (i === 0) {
i = testimonials.length;
}
i = i - 1;
console.log("prev", i)
return testimonials[i];
}
$('.left-btn').on('click', function(e){
let val = prevItem()
$('.client-box').text(val.client);
$('.candidate-box').text(val.candidate);
});
$('.right-btn').on('click', function(e){
let val = nextItem()
$('.client-box').text(val.client);
$('.candidate-box').text(val.candidate);
});
.testimonial-carousel {
position: relative;
width: 1000px;
}
.testimonial-carousel::after {
content: "";
display: block;
clear: both;
}
.testimonial-carousel .testimonial-box {
width: 500px;
height: 100px;
float: left;
background: #999999;
}
.testimonial-carousel .testimonial-box.candidate-box {
background: white;
margin-top: 2rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
.testimonial-carousel .buttons {
position: absolute;
bottom: -60px;
right: 20px;
}
.testimonial-carousel .buttons::after {
content: "";
display: block;
clear: both;
}
.testimonial-carousel .buttons .btn {
background: black;
width: 60px;
height: 60px;
float: left;
margin-right: 5px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testimonial-carousel">
<div class="testimonial-box client-box"></div>
<div class="testimonial-box candidate-box"></div>
<div class="buttons">
LEFT
RIGHT
</div>
</div>
codepen - https://codepen.io/nagasai/pen/wLKoVv

dynamic datasource in GetOrgChart

I am new to programming I am working on dynamic organization hierarchy chart using GetOrgChart. I want to remove hard code values in java script function and pass my mysql query result data in to javascript function i have get data from database through query and converted it in to json format to display in javascript function.
Here is my code :
<?php
require ('db.php');
$selectSql = "SELECT
emp.id, emp.employee_parent_id, emp.emp_name,
emp.email,hd.desg_name
FROM
hr_employees emp
LEFT JOIN
hr_employees_designations empd ON emp.id = empd.id
LEFT JOIN
hr_designations hd ON empd.id = hd.id";
$result = mysqli_query($conn, $selectSql);
$arrAssociate = [];
while ($value = mysqli_fetch_assoc($result))
{
$json_array = json_encode($value);
echo $json_array;
//echo '<pre>', print_r($value, 1) , '</pre>';
}
?>
<!DOCTYPE html>
<html>
<head>
<title>OrgChart | Create Your Own Theme 3</title>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#people {
width: 100%;
height: 100%;
}
.get-org-chart rect.get-box {
fill: #ffffff;
stroke: #D9D9D9;
}
.get-org-chart .get-text.get-text-0 {
fill: #262626;
}
.get-org-chart .get-text.get-text-1 {
fill: #262626;
}
.get-org-chart .get-text.get-text-2 {
fill: #788687;
}
.get-green.get-org-chart {
background-color: #f2f2f2;
}
.more-info {
fill: #18879B;
}
.btn path {
fill: #F8F8F8;
stroke: #D9D9D9;
}
.btn {
cursor: pointer;
}
.btn circle {
fill: #555555;
}
.btn line {
stroke-width: 3px;
stroke: #ffffff;
}
</style>
</head>
<body>
<div id="people"></div>
<script type="text/javascript">
getOrgChart.themes.myTheme =
{
size: [330, 260],
toolbarHeight: 46,
textPoints: [
{ x: 20, y: 45, width: 300 },
{ x: 120, y: 100, width: 200 },
{ x: 120, y: 125, width: 200 }
],
// textPointsNoImage: [] NOT IMPLEMENTED,
box: '<rect x="0" y="0" height="260" width="330" rx="10" ry="10"
class="get-box"></rect>'
+ '
<g transform="matrix(0.25,0,0,0.25,123,142)"><path
d="M48.014,42.889l-9.553-
4.776C37.56,37.662,37,36.756,37,35.748v-3.381c0.229-0.28,0.47-
0.599,0.719-0.951 c1.239-1.75,2.232-3.698,2.954-
5.799C42.084,24.97,43,23.575,43,22v-4c0-0.963-0.36-1.896-1-
2.625v-5.319 c0.056-0.55,0.276-3.824-2.092-
6.525C37.854,1.188,34.521,0,30,0s-7.854,1.188-
9.908,3.53C17.724,6.231,17.944,9.506,18,10.056 v5.319c-
0.64,0.729-1,1.662-
};
var orgChart = new getOrgChart(document.getElementById("people"), {
theme: "myTheme",
enableEdit: false,
enableDetailsView: false,
primaryFields: ["Title", "Name", "Email", "Image"],
color: "green",
updatedEvent: function () {
init();
},
dataSource: [
// Want Dynamic data here instead of this hard code values
{ id : 1,
parentId : null,
Name : "Jasper Lepardo",
Title : "CEO",
Email : "jasper#example.com",
Image :
"http://www.getorgchart.com/GetOrgChart/getorgchart-
demos/images/f-11.jpg"
},
{ id : 2,
parentId : 1,
Name : "John Smith",
Title : "Front-endDeveloper",
Email : "john#example.com",
Image :
"http://www.getorgchart.com/GetOrgChart/getorgchart
demos/images/f-12.jpg"
},
{ id : 3,
parentId : 1,
Name : "Avaa Field",
Title : "Project Manager",
Email : "ava#example.com",
Image :
"http://www.getorgchart.com/GetOrgChart/getorgchart-demos/images/f-
14.jpg"
},
{ id : 4,
parentId : 1,
Name : "Ava Field",
Title : "Project Manager",
Email : "ava#example.com",
Image :
"http://www.getorgchart.com/GetOrgChart/getorgchart-demos/images/f-
14.jpg" }]
});
function getNodeByClickedBtn(el) {
while (el.parentNode) {
el = el.parentNode;
if (el.getAttribute("data-node-id"))
return el;
}
return null;
}
var init = function () {
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
var nodeElement = getNodeByClickedBtn(this);
var action = this.getAttribute("data-action");
var id = nodeElement.getAttribute("data-node-id");
var node = orgChart.nodes[id];
switch (action) {
case "add":
orgChart.insertNode(id);
break;
case "edit":
orgChart.showEditView(id);
break;
case "preview":
orgChart.showDetailsView(id);
break;
}
});
}
}
init();
</script>
</body>
</html>

Look at this.
Using Laravel (Blade):
let json = JSON.parse('#json($your_array_here)');
No Framework (your case):
let json = JSON.parse('<?=json_encode($your_array_here)?>');
When you have an Array in PHP and need to use it in JS, you have two ways to implement:
Ajax (fetch, axios, xhr2);
Hard coding like you did.
But pay attention to you browser Console (Chrome, Firefox), you will be warned if your JSON is malformatted.
Take a look at JSON.parse and JSON.stringify, it is important to understand this functions too.
And don't forget the ' in the beginning and at the end of the declaration, like I did in the example below.
Hope it helps you.
Have a nice day.