Develop Reference

Repeat ACF field in Javascript

I'm trying to create my own MP3 playlist with HTML5/JS player and ACF Pro. Every thing is ok but I just have 1 Track in my playlist and it seems my JS code need to be repeat at the audio part.
So this is my php/js code:
<?php if( have_rows('playlist_single_track') ): ?>
<?php while( have_rows('playlist_single_track') ): the_row();
$pltrackname = get_sub_field('playlist_track_name');
$pldownloadtrack = get_sub_field('playlist_track_download');
$plplaytrack = get_sub_field('playlist_trak_online_player');
?>
<script>
const ap = new APlayer({
container: document.getElementById('playlist'),
listFolded: false,
listMaxHeight: 90,
preload: 'none',
audio: [
{
name: '<?php echo $pltrackname; ?>',
artist: 'null',
url: '<?php echo $plplaytrack; ?>',
cover: 'images/cover.jpg'
},
]
});
</script>
<?php endwhile; ?>
<?php endif; ?>
I don't know much about javascript so can you help me to repeat JS code in this part:
{
name: '<?php echo $pltrackname; ?>',
artist: 'null',
url: '<?php echo $plplaytrack; ?>',
cover: 'images/cover.jpg'
},
It will help me to add more song tracks in my playlist.
I need to do something like this:
<script>
const ap = new APlayer({
container: document.getElementById('playlist'),
listFolded: false,
listMaxHeight: 90,
preload: 'none',
audio: [
{
name: 'track1',
artist: 'artistname',
url: 'URL1',
cover: 'images/cover.jpg'
},
{
name: 'track2',
artist: 'artistname',
url: 'URL2',
cover: 'images/cover.jpg'
},
{
name: 'track3',
artist: 'artistname',
url: 'URL3',
cover: 'images/cover.jpg'
},
]
});
</script>
Thanks.

Try this
<?php if( have_rows('playlist_single_track') ): ?>
<script>
const ap = new APlayer({
container: document.getElementById('playlist'),
listFolded: false,
listMaxHeight: 90,
preload: 'none',
audio: [
<?php while( have_rows('playlist_single_track') ): the_row();
$pltrackname = get_sub_field('playlist_track_name');
$pldownloadtrack = get_sub_field('playlist_track_download');
$plplaytrack = get_sub_field('playlist_trak_online_player');
?>
{
name: '<?php echo $pltrackname; ?>',
artist: 'null',
url: '<?php echo $plplaytrack; ?>',
cover: 'images/cover.jpg'
},
<?php endwhile; ?>
]
});
</script>
<?php endif; ?>

how to make a chart with foreach time

I'm trying to make a chart with a time of my database, but I can't do that chartjs "read me" my data.
I try this with Laravel and ChartJS. I make other chart with this way, my problem is only to make charts with Datetime and Times.
<script type="text/javascript">
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: [
#foreach ($ambientes as $key => $value)
'{{ $value->mes }}',
#endforeach
],
datasets: [
{
label: "Tiempo de indisponibilidad",
backgroundColor: "red",
data: [
#foreach ($ambientes as $key => $value)
'{{ $value->tiempo }}',
#endforeach
]
}
]
},
options: {
scales: {
yAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'h:mm'
}
}
}]
},
}
});
</script>

First of all declare two array for label and data and push values into array
/*Declare array*/
#php $label=array(); $data=array(); #endphp
/*push label and values into array*/
#foreach($ambientes as $key => $value)
#php
array_push($label, $value->mes);
array_push($data, $ot['dayot']);
#endphp
#endforeach
Then json_encode values in script
<script type="text/javascript">
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: [<?php echo json_encode($label);?>],
datasets: [
{
label: "Tiempo de indisponibilidad",
backgroundColor: "red",
data: [<?php echo json_encode($data);?>]
}
]
},
options: {
scales: {
yAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'h:mm'
}
}
}]
},
}
});
</script>

How to use foreach php code in registerJS() javascript code in yii2?

I can't use foreach php code in javascript code of registerJS in yii2. Browser shows "PHP Parse Error – yii\base\ErrorException syntax error, unexpected 'foreach' (T_FOREACH)" error. Here is my code:
<canvas id="bar-chart" width="500" height="150"></canvas>
<?php
$lang = Yii::$app->language;
$title = 'title_'.$lang;
$this->registerJs("
new Chart(document.getElementById('bar-chart'), {
type: 'bar',
data: {
labels: [
" . foreach ($models as $model) { . "
' " . $model->$title . " ',
" . } . "
],
datasets: [
{
label:'Label',
backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f', '#e7fc00'],
data: [479,1654,499, 2632]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Title'
}
}
});
", yii\web\View::POS_READY);

I'll pull out foreach code from javascript output.
<?php
$titles = [];
foreach($models as $model)
{
$titles[] = sprintf("'%s'", $model->title);
}
$titlesText = implode(',', $titles);
$this->registerJs("
new Chart(document.getElementById('bar-chart'), {
type: 'bar',
data: {
labels: [
".$titlesText."
],
datasets: [
{
label:'Label',
backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f', '#e7fc00'],
data: [479,1654,499, 2632]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Title'
}
}
});
", yii\web\View::POS_READY);

You cannot use the foreach statement there, in the middle of a string. You should generate the string coming from the foreach beforehand and then join it with the js string:
$mystring = "";
foreach ($models as $model) {
$mystring .= "' " . $model->$title . " ',";
}
$this->registerJs("
new Chart(document.getElementById('bar-chart'), {
type: 'bar',
data: {
labels: [ $mystring ],
datasets: [
{
label:'Label',
backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f', '#e7fc00'],
data: [479,1654,499, 2632]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Title'
}
}
});
", yii\web\View::POS_READY);

Pass data as a js variable to highchart

I have a associate php array (field_data) and i wanna pass it to JS using json_encode function: $jArray = json_encode($field_data);
I'm recieving the array in JS: var irbrowser = <?php echo $jArray; ?>; But in js when i wanna set the value in jArray to pie chart data, It does not render anything.
<?php
$jArray = json_encode($field_data);
?>
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "IE",
y: irbrowser.IE
}, {
name: "Chrome",
y: irbrowser.Chrome,
sliced: true,
selected: true
}, {
name: "Proprietary or Undetectable",
y: irbrowser.Other
}]
}]
});
});
</script>

I found the problem.
It should be converted to Float. so i use parseFloate(irbrowser) function. And set the variables to y. That code
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "IE",
y: parseFloat(irbrowser.IE)
}, {
name: "Chrome",
y: parseFloat(irbrowser.Chrome),
sliced: true,
selected: true
}, {
name: "Proprietary or Undetectable",
y: 0.5
}]
}]

Look at the first few lines of your script
Line 1 you stop the PHP interpreter
Line 2 you attempt a line of PHP ??
Line 3 you start the PHP interpreter
Line 4+ you try to output raw HTML while inside a PHP section
?>
$jArray = json_encode($field_data);
<?php
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;
Try
$jArray = json_encode($field_data);
?>
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;

Update HighCharts every 5 seconds

I am using this code to render a HighChart:
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
title: '',
type: 'column'
},
xAxis: {
categories: ["<?php echo join($data0, '","') ?>"],
title: {
text: 'Month'
}
},
yAxis: {
title: {
text: 'Orders'
}
},
series: [{
name: '<?php echo date("Y",strtotime("-1 year")); ?>',
color: '#666666',
data: [<?php echo join($data1, ',') ?>]
}, {
name: '<?php echo date("Y"); ?>',
color: '#2196F3',
data: [<?php echo join($data2, ',') ?>]
}],
credits: {
enabled: false
},
title: {
text: ''
}
});
</script>
How can get this to update every 5 seconds and show some indication on the chart if something changes?

Try
setInterval(function(){
chart.series[0].update({
data: [<?php echo join($data1, ',') ?>]
}, true);
chart.series[1].update({
data: [<?php echo join($data2, ',') ?>]
}, true);
}, 5000);