Get contents with JS and echo with PHP - php

I'm not familiar with js. I'd like to get the result of "file_get_contents" function and put it on the "source" (I have marked both with .................).
Thank you in advance.
<script>
var myInit = {
referrer: '',
};
function file_get_contents(filename) {
fetch(filename, myInit).then((resp) => resp.text()).then(function(data) {
content = JSON.parse(data)
fetch(content['some']['media']['content'], myInit).then((resp) =>
resp.text()).then(function(data));});}
file_get_contents("https://.................");
</script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clappr#latest/dist/clappr.min.js">
</script>
</head>
<div id="player"></div>
<script>
window.onload = function() {
var player = new Clappr.Player({
source: '<?php echo $url...................?>',
parentId: "#player",
height: '100%',
width: '100%',
autoPlay: true,
});};
</script>
</body>
</html>


I think if you use the following code, you will get closer to your solution.
<script>
var myInit = {
referrer: '',
};
function file_get_contents(filename) {
fetch(filename, myInit).then((resp) => resp.text()).then(function(data) {
var content = JSON.parse(data);
console.dir(content);
var player = new Clappr.Player({
source: content['some']['media']['content'],
parentId: "#player",
height: '100%',
width: '100%',
autoPlay: true,
});
});
}
file_get_contents("https://.................");
</script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clappr#latest/dist/clappr.min.js">
</script>
</head>
<div id="player"></div>
<script>
window.onload = function() {
//Whatever
};
</script>
</body>
</html>
If you tell me what console.dir outputs, I might be able to offer more help.
BTW.: doesn't clapper have some documents showing how to use its API?

Related

How to plot my json data into a Google Material Line Chart using PHP, MySQL, & JavaScript

Good day!
My code doesn't display the chart.
I am trying to plot my json data into a google material line chart to output a chart like these:
here's my javascript code:
google.charts.load('current', {'packages': ['line', 'corechart', 'bar','controls', 'table']});
google.charts.setOnLoadCallback(drawChartCountry);
function drawChartCountry() {
var jsonData1 = $.ajax({
url: "analytics/country-sales.php",
dataType: "json",
async: false
}).responseText;
var data1 = new google.visualization.DataTable(jsonData1);
var options = {
title: 'Top 20 Countries with the highest sales',
pointSize: 5
};
var formatter_amount1 = new google.visualization.NumberFormat({prefix: 'HKD ', negativeColor: 'red', negativeParens: true});
// formatter_amount1.format(data1, 1);
var chart = new google.visualization.LineChart(document.getElementById('chart_div_country'));
chart.draw(data1, options);
}
and here's my json data
{"cols":[[[{"label":"Date","type":"string"},{"label":"TAIWAN","type":"string"},{"label":"HONG KONG","type":"string"},{"label":"JAPAN","type":"string"},{"label":"INDONESIA","type":"string"},{"label":"THAILAND","type":"string"},{"label":"UNITED STATES","type":"string"},{"label":"PHILIPPINES","type":"string"},{"label":"UNITED KINGDOM","type":"string"},{"label":"MALAYSIA","type":"string"},{"label":"AUSTRALIA","type":"string"},{"label":"SINGAPORE","type":"string"},{"label":"SPAIN","type":"string"},{"label":"SWEDEN","type":"string"},{"label":"GERMANY","type":"string"},{"label":"VIET NAM","type":"string"},{"label":"SOUTH KOREA","type":"string"},{"label":"NORWAY","type":"string"},{"label":"FRANCE","type":"string"},{"label":"CANADA","type":"string"},{"label":"NETHERLANDS","type":"string"}]]],"rows":[{"c":[{"v":"Date(2014,1,1)"},{"v":48876},{"v":3970},{"v":2505},{"v":1824},{"v":982},{"v":676},{"v":491},{"v":387},{"v":238},{"v":173},{"v":162},{"v":108},{"v":101},{"v":98},{"v":96},{"v":91},{"v":88},{"v":84},{"v":82},{"v":72}]}]}
here's the html code (removed some elements not related to this topic)
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="analytics/sales-country.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 col-sm-12">
<div id='chart_div_country' style='width: 100%; height: 600px;'></div>
</div>
</div>
</body>
Can anyone help me please. Thank you.
any answer is highly appreciated.

first, the "cols" are wrapped in too many arrays
[[[]]] vs. []
{"cols":[[[{"label":"Date","type":"string"},...,{}]]],
should be...
{"cols":[{"label":"Date","type":"string"},...,{}],
next, the column type for the line series should be 'number'
and recommend 'date' for the first column
this...
"cols": [
{"label":"Date","type":"date"},
{"label":"TAIWAN","type":"number"},
{"label":"HONG KONG","type":"number"},
not this...
"cols": [
{"label":"Date","type":"string"},
{"label":"TAIWAN","type":"string"},
{"label":"HONG KONG","type":"string"},
also, if you want a Material line chart,
just need the 'line' package and...
google.charts.Line
the Core chart version is...
google.visualization.LineChart
and highly recommend not using async: false, use .done and .fail callbacks instead
see following working snippet, move code from .fail to .done to test locally...
google.charts.load("current", {
callback: drawChartCountry,
packages: ["line", "corechart"]
});
function drawChartCountry() {
$.ajax({
url: "analytics/country-sales.php",
dataType: "json"
}).done(function (jsonData) {
}).fail(function (jqXHR, textStatus) {
var jsonData = {
"cols": [
{"label":"Date","type":"date"},
{"label":"TAIWAN","type":"number"},
{"label":"HONG KONG","type":"number"},
{"label":"JAPAN","type":"number"},
{"label":"INDONESIA","type":"number"},
{"label":"THAILAND","type":"number"},
{"label":"UNITED STATES","type":"number"},
{"label":"PHILIPPINES","type":"number"},
{"label":"UNITED KINGDOM","type":"number"},
{"label":"MALAYSIA","type":"number"},
{"label":"AUSTRALIA","type":"number"},
{"label":"SINGAPORE","type":"number"},
{"label":"SPAIN","type":"number"},
{"label":"SWEDEN","type":"number"},
{"label":"GERMANY","type":"number"},
{"label":"VIET NAM","type":"number"},
{"label":"SOUTH KOREA","type":"number"},
{"label":"NORWAY","type":"number"},
{"label":"FRANCE","type":"number"},
{"label":"CANADA","type":"number"},
{"label":"NETHERLANDS","type":"number"}
],
"rows":[
{"c":[
{"v":"Date(2014,1,1)"},
{"v":48876},
{"v":3970},
{"v":2505},
{"v":1824},
{"v":982},
{"v":676},
{"v":491},
{"v":387},
{"v":238},
{"v":173},
{"v":162},
{"v":108},
{"v":101},
{"v":98},
{"v":96},
{"v":91},
{"v":88},
{"v":84},
{"v":82},
{"v":72}
]},
{"c":[
{"v":"Date(2015,1,1)"},
{"v":48876},
{"v":3970},
{"v":2505},
{"v":1824},
{"v":982},
{"v":676},
{"v":491},
{"v":387},
{"v":238},
{"v":173},
{"v":162},
{"v":108},
{"v":101},
{"v":98},
{"v":96},
{"v":91},
{"v":88},
{"v":84},
{"v":82},
{"v":72}
]}
]
};
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Top 20 Countries with the highest sales',
pointSize: 5
};
var chart = new google.charts.Line(document.getElementById('chart_div_country'));
chart.draw(data, options);
//console.log('error', textStatus);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
<div class="col-md-12 col-sm-12">
<div id='chart_div_country' style='width: 100%; height: 600px;'></div>
</div>
</div>

Changing color of bootstrap "well" on mouseover

I am trying to change the color of "well" on mouseover but unable to do it. I have been trying with the following codes:
<script type="text/javascript">
function ChangeColor(well, highLight)
{
if (highLight)
{
well.style.backgroundColor = '#dcfac9';
}
}
</script>
PHP:
echo " <div class=\"well\" onmouseover=\"ChangeColor(this, true);\"\n";
echo " onmouseout=\"ChangeColor(this, false);\"> \n";
echo "something";
echo " </div>\n";
The above code is changing color nicely on mouseover but it is crossing the area of the "well". Please help to fix it.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="well">
<p>
This is a well content
</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(".well").mouseenter(
function(){
$(this).css('background-color','red');
});
$(".well").mouseleave(
function(){
$(this).css('background-color','#f5f5f5');
});
</script>

Doing this through JavaScript seems like overkill. This can easily be done simply through the use of CSS:
.well:default
{
background-color: #ccc;
}
.well:hover
{
background-color: #000;
}

var getDefaultBg = $(".well").css("background");
$(".well").mouseover(function() {
$(this).css("background", "#000");
}). mouseout(function() {
$(this).css("background", getDefaultBg);
});
simply use this for your requirement.

That was the script I wanted:
<script>
$(document).ready(function(){
$(".well").mouseenter(function(){
$(this).css("background-color", "#efefef");
});
$(".well").mouseleave(function(){
$(this).css("background-color", "#f5f5f5");
});
});
</script>

Getting PHP variable into Chart Script

I am having an issue with Google Charts. I have created the exact format it shows in the example inside a PHP vaiable
['Time','Devices'],['08-12-2015 09:19:00',12],['08-12-2015 09:20:00',26],['08-12-2015 09:21:00',23],['08-12-2015 09:22:00',16],['08-12-2015 09:23:00',29],['08-12-2015 09:24:00',21],['08-12-2015 09:25:00',18],['08-12-2015 09:26:00',28],['08-12-2015 09:27:00',19],['08-12-2015 09:28:00',15],['08-12-2015 09:29:00',25],['08-12-2015 09:30:00',18],['08-12-2015 09:31:00',18],['08-12-2015 09:32:00',26],['08-12-2015 09:33:00',13],['08-12-2015 09:34:00',16],['08-12-2015 09:35:00',19],['08-12-2015 09:36:00',14],['08-12-2015 09:37:00',23],['08-12-2015 09:38:00',16],['08-12-2015 09:39:00',12],['08-12-2015 09:40:00',27],['08-12-2015 09:41:00',17],['08-12-2015 09:42:00',16],['08-12-2015 09:43:00',32],['08-12-2015 09:44:00',20],['08-12-2015 09:45:00',18],['08-12-2015 09:46:00',30],['08-12-2015 09:47:00',14],['08-12-2015 09:48:00',19],['08-12-2015 09:49:00',24],['08-12-2015 09:50:00',12],['08-12-2015 09:51:00',23],['08-12-2015 09:52:00',21],['08-12-2015 09:53:00',12],['08-12-2015 09:54:00',26],['08-12-2015 09:55:00',23],['08-12-2015 09:56:00',12],['08-12-2015 09:57:00',32],['08-12-2015 09:58:00',16],['08-12-2015 09:59:00',18],['08-12-2015 10:00:00',23],['08-12-2015 10:01:00',17],['08-12-2015 10:02:00',19],['08-12-2015 10:03:00',39],['08-12-2015 10:04:00',16],['08-12-2015 10:05:00',17],['08-12-2015 10:06:00',27],['08-12-2015 10:07:00',21],['08-12-2015 10:08:00',18],['08-12-2015 10:09:00',40],['08-12-2015 10:10:00',20],['08-12-2015 10:11:00',18],['08-12-2015 10:12:00',28],['08-12-2015 10:13:00',25],['08-12-2015 10:14:00',17],['08-12-2015 10:15:00',32],['08-12-2015 10:16:00',25],['08-12-2015 10:17:00',16],['08-12-2015 10:18:00',31]
I now want to place this inside the Chart example below but it does not work.
The variable that holds the above information is $outp. I tried to place it in but it does not work.
<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
<?php echo $optp; ?>
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
If anyone can assist please, its driving me crazy.
Thanks
Rob

Google pie chart with ajax and php not working

I am trying to create a google pie chart using ajax and php. But its not working for me. Please anyone help me. The code is given below.
My first page is piechart.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
function get_piechart()
{
$("#std").load("get_piechart.php");
}
</script>
<input type="button" value="piechart" onClick="get_piechart();"/>
<div id="std">
</div>
My ajax page is get_piechart.php
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(load_chart_data);
function load_chart_data() {
$.ajax({
url: 'getData1.php', // provide correct url
type: 'POST',
data: {get_chart: true},
dataType: 'JSON', // <-- since youre expecting JSON
success: function(chart_values) {
console.log(chart_values); // take a peek on the values (browser console)
draw_chart(chart_values); // call your drawing function!
}
});
}
function draw_chart(chart_values) {
var data = google.visualization.arrayToDataTable(chart_values);
var options = {
title: 'Your super chart!',
vAxis: {title: 'Hours Per Day', titleTextStyle: {italic: false}},
hAxis: {title: 'Task', titleTextStyle: {italic: false}},
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
data file is getData1.php
<?php
if(isset($_POST['get_chart'])) {
$values = array(
array('Task', 'Hours Per Day'),
array('Booking', 11),
array('Pending', 89),
);
echo json_encode($values);
exit;
}
?>
On clicking the piechart button i got the error Uncaught ReferenceError: google is not defined. Please help me to solve this problem

jQuery get previous month from php

I have made this script that get's the month and the year from calendar.php and I would like when I click the link previous month to get the previous month but also when month number reach 1 make the year - 1. How can I do something like that?
<html>
<head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
get_data();
});
function get_data(a, b) {
$.get('calendar.php', {
month: a, year: b
},
function(response) {
$el = $('<div></div>').attr('class', 'data').html(response);
$('#datas').prepend($el);
height = $el.height()+'px';
$el.css({'opacity': 0, 'display': 'block', 'height': '0px'}).animate({height: height }, 500, function() {
$(this).animate({opacity: 1}, 500);
})
});
}
</script>
<style>
#datas {
overflow: hidden;
}
.data {
display: none;
}
</style>
<body>
<a href="#" OnClick="get_data(9, 2012);" > Previous month</a>
<div id="datas">
</div>
</body>
</html>

I think you should use jQuery.ajax
$.ajax({
url: 'calendar.php',
success: function(data) {
// Parse your data and do all neccessery refreshing
}
});
in order get yerstaday you can use
var d = new Date(/* data that you get from calendar.php*/);
d.setDate(d.getDate() - 1);

Categories