I'm working on Highchart and it's working fine but now when the page load. I want the png (image file) automatically downloaded. How can I do this?
<?php
$xcat = array('0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 +');
$unit = "age";
$data1 = array("0"=>array("Seriesname"=>"Male","data"=>array("-1746181", "-1884428", "-2089758", "-2222362", "-2537431", "-2507081", "-2443179",
"-2664537", "-3556505", "-3680231", "-3143062", "-2721122", "-2229181", "-2227768",
"-2176300", "-1329968", "-836804", "-354784", "-90569", "28367", "-3878")),
"1"=>array("Seriesname"=>"Female","data"=>array("1656154", "1787564", "1981671", "2108575", "2403438", "2366003", "2301402", "2519874",
"3360596", "3493473", "3050775", "2759560", "2304444", "2426504", "2568938", "1785638",
"1447162", "1005011", "330870", "130632", "21208"))
);
echo NegativeBarChart("container2","Testing","Test",$xcat,$unit,$data1);
?>
<div id="container2" style="min-width: 400px; max-width: 800px; height: 400px; margin: 0 auto"></div>
I advice to familair with exporting options: http://api.highcharts.com/highcharts#exporting.buttons.contextButton.onclick and example http://jsfiddle.net/72E6v/ which introduce how to download chart automatically.
exporting: {
buttons: {
contextButton: {
menuItems: null,
onclick: function() {
this.exportChart();
}
}
}
EDIT:
Automatically downloading http://jsfiddle.net/8uDdb/1/
chart: {
events: {
load: function () {
var ch = this;
setTimeout(function(){
ch.exportChart();
},1);
}
}
},
Related
I am trying to get a random background image to load on my wordpress site home page every time the page is loaded or refreshed. Here is the code I have so far:
This is the code I have in my style sheet.
style.css
body.home {
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
height: 100%;
width: 100%;}
This is the code I have on my home.php file.
home.php
<script>
var randomImage = {
paths: [
"images/home-bg/website-background1.jpg",
"images/home-bg/website-background2.jpg",
"images/home-bg/website-background3.jpg",
"images/home-bg/website-background4.jpg",
"images/home-bg/website-background5.jpg",
"images/home-bg/website-background6.jpg",
"images/home-bg/website-background7.jpg",
],
generate: function(){
var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
var img = new Image();
img.src = path;
$("body.home").html(img);
$("body.home").attr("href", path);
}
}
randomImage.generate();
</script>
If you would like to check out the website its http://americasfinestlighting.com/
Thanks,
William
Just change body background like below:
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<body>
</body>
<script>
var randomImage = {
paths: [
"https://www.ricoh.com/r_dc/caplio/r7/img/sample_04.jpg",
"http://www.riscon.co.uk/wp-content/uploads/2015/08/sample3.jpg",
"http://cdn6.fonearena.com/i/SonyXperiaZ2CameraSamples/sony-xperia-z2-camera-sample-macro-6.jpg",
"https://cdn.photographylife.com/wp-content/uploads/2012/10/Nikon-D600-Sample-4.jpg",
],
generate: function(){
var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
$('body').css('background', 'url('+path+') no-repeat');
}
}
randomImage.generate();
</script>
DEMO
I was able to accomplish this by adding a snip-it of php to my functions.php file.
add_filter('body_class','random_background_images');
function random_background_images($classes) {
// Generate Random number from 1 to 7.
$background_class = 'background_' . rand(1,7);
$classes[] = $background_class;
return $classes;
}
Then I changed my CSS to the following:
body.home.background_1 {
background-image: url("images/home-bg/website-background1.jpg");
}
body.home.background_2 {
background-image: url("images/home-bg/website-background2.jpg");
}
body.home.background_3 {
background-image: url("images/home-bg/website-background3.jpg");
}
body.home.background_4 {
background-image: url("images/home-bg/website-background4.jpg");
}
body.home.background_5 {
background-image: url("images/home-bg/website-background5.jpg");
}
body.home.background_6 {
background-image: url("images/home-bg/website-background6.jpg");
}
body.home.background_7 {
background-image: url("images/home-bg/website-background7.jpg");
}
If you want the background to change on all pages not just the home page remove the .home from the CSS Example:
body.background_1 {
background-image: url("images/home-bg/website-background1.jpg");
}
Hope this helps anyone else who is looking :-)
Wrap the randomImage Object and the randomImage.generate invocation, inside jQuery .ready() method to execute when the DOM is fully loaded.
Also space out ".home" from "body" this queries for "home class" in body
<script>
$( document ).ready(function() {
var randomImage = {
paths: [
"images/home-bg/website-background1.jpg",
"images/home-bg/website-background2.jpg",
"images/home-bg/website-background3.jpg",
"images/home-bg/website-background4.jpg",
"images/home-bg/website-background5.jpg",
"images/home-bg/website-background6.jpg",
"images/home-bg/website-background7.jpg",
],
generate: function(){
var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
var img = $('<img id="img-responsive">'); // This is Equivalent to $(document.createElement('img'))
img.attr('src', path);
img.appendTo('#imagediv'); // The div ID you want to append to
}
}
randomImage.generate();
});
</script>
View on CODEPEN
What I am trying to do is is use jQuery/Ajax to make a request to a PHP script and return a status update each time the foreach loop completes. I want to use the output to make a progress bar.
The problem I am having is the jQuery will only update the page once the whole script has completed. Is there a way to force either the jQuery or PHP to output on every loop and not just dump all of it on success function.
jQuery(document).ready(function($) {
$(document).on('click','#fetch-snowfall-data a',function () {
$(this).text('Fetching Snowfall Data...');
$.ajax({
type: "GET",
async: true,
url: "url.php",
data:{},
dataType: "html",
success: function(response){
$("#response_container").append(response);
$('#fetch-snowfall-data a').text('Fetch Snowfall Data');
}
});
return false;
});
});
PHP
foreach ( $results['resorts'] as $resort ) {
//Do all the things here
$count++;
echo $count .'/'. $results['total_rows'];
}
Thanks everyone for all your help. I eventually managed to get this all working properly and will share exactly how I did it for anyone else's future benefit.
There are 3 files that are required - The page you are loading from, the processing script and the listening script.
You will need to know how many rows you are going to process for everything to work. I load mine from php variable $results['total_rows']; in loading.php
Loading.php
jQuery(document).ready(function($) {
setTimeout(getProgress,1000);
$(document).on('click','#fetch-snowfall-data a',function () {
$(this).text('Fetching Snowfall Data...');
$.ajax({
url: 'process.php',
success: function(data) {
$("#response_container2").append(data);
}
});
setTimeout(getProgress,3000);
return false;
});
function getProgress(){
$.ajax({
url: 'listen.php',
success: function(data) {
if(data<=<?php echo $results['total_rows']; ?> && data>=1){
console.log(data);
$('#response_container').html('<div id="progress"><div class="progress-bar" role="progressbar" style="width:'+ (data / <?php echo $results["total_rows"] ?>)*100 +'%">'+ data + '/' +<?php echo $results["total_rows"] ?> +'</div></div>');
setTimeout(getProgress,1000);
console.log('Repeat');
} else {
$('#fetch-snowfall-data a').text('Fetch Snowfall Data');
console.log('End');
}
}
});
}
});
Process.php
foreach ( $results['resorts'] as $resort ) {
//Do all the things here you want to.
$count++;
session_start();
$_SESSION['progress'] = $count;
$_SESSION['total'] = $results['total_rows'];
session_write_close();
sleep(1);
}
unset($_SESSION['progress']);
Listen.php
session_start();
echo (!empty($_SESSION['progress']) ? $_SESSION['progress'] : '');
if (!empty($_SESSION['progress']) && $_SESSION['progress'] >= $_SESSION['total']) {
unset($_SESSION['progress']);
}
Some CSS for the progress bar
#progress {
height: 20px;
margin-bottom: 20px;
/* overflow: hidden; */
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
As suggested by adeneo, I dont think you can return partial content. I tried to research on this before with no avail. However, if anyone can correct me, i'll be very appreciative.
The end result for me is to do recursive ajax.
javascript
var data = '';
$(document).on('click','#fetch-snowfall-data a',function () {
ajaxCall(0);
});
function ajaxCall(num) {
$.ajax({
type: "POST",
async: true,
url: "url.php",
data: num,
dataType: "json",
xhr:function(){
//progress bar information here.
},
success: function(response) {
$("#response_container").append(response['data']);
if (response['check'] === 'next') {
var nextNum = num +1;
data += response['data'];
ajaxCall(nextNum); //call itself for the next iteration
}else if (response['check'] === 'done'){
data = response['data'];
//do stuff with the data here.
}else if (response['check'] === 'error') {
return response['data'];
}
},
error:function(xhr, status,error){
//error information here
}
});
}
For PHP:
Just make sure you output stuff in json with two information. Json.check: to see if you want to move into the next iteration, finish and output data, or report error. Json.data to output whatever data it needs. What you need to do is output each report at a time without foreach loop
--edit--
I found some topic on streaming for php
http://www.sitepoint.com/php-streaming-output-buffering-explained/
Best approach for (cross-platform) real-time data streaming in PHP?
I'm sure this is a simple issue, but I just can't seem to find the answer. I am trying to simply put google map on a site using dynamic lat & long from php call.
When I have this code it works:
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
var panoramaOptions = {
position: bryantPark,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
However, when I update it so that the LatLng is dynamic with php call like so:
<?php include("inc/conn.php"); ?>
....
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var bryantPark = new google.maps.LatLng(<?=$row["field_Latitude"]?>, <?=$row["field_Longitude"]?>);
var panoramaOptions = {
position: bryantPark,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
When I view the source, I see that the lat & long are populating, but there is just a gray box where the street view should be.
Any thoughts?
Thanks!
When you want to show a map when streetView is not available(let's assume that streetview is not available when there is no panorama within a radius 50 meters), create a map and request the streetViewService to check if there is a panorama available for the given location.
When it does, set the position of the panorama and show it, otherwise do nothing.
function initialize() {
//center of the map and position of the panorama (when available)
var center = new google.maps.LatLng(42.698776, -86.181015),
//first initialize the map
map = new google.maps.Map(
document.getElementById('map-canvas'),
{
zoom:21,
center:center,
mapTypeId:google.maps.MapTypeId.SATELLITE
}
),
svService = new google.maps.StreetViewService(),
panoramaOptions = {
pov: {
heading: 165,
pitch: 0
},
zoom: 1,
visible:true
};
//test whether a panorama is available
svService.getPanoramaByLocation(center, 50, function(data,status){
if(status==google.maps.StreetViewStatus.OK){
//panorama is available, show it
var sv=map.getStreetView();
sv.setPosition(center);
sv.setOptions(panoramaOptions);
}
});
}
Demo: http://jsfiddle.net/doktormolle/7noptz5x/
First of all I will use <?php echo $row[...]; ?> instead of <?= $row[...] ?> , just to be sure that code works also if you have short tags disabled.
Secondly, I'd put:
<?php
$row = array(
'field_Latitude' => 37.869260,
'field_Longitude' => -122.254811
);
?>
instead of your include call and check the results to verify if I have something wrong in the included file.
In any case you should inspect the resulting HTML and check what are the real arguments passed to LatLong instead of the expected ones.
I use the following jquery code to load a page...
$(function() {
$('#stats').load('statsto.php');
var visibleInterval = 60000;
var invisibleInterval = 120000;
$(function() {
setTimer();
$(document).bind('visibilitychange'), function() {
clearTimeout(timer);
setTimer();
};
});
function displayStats() {
$('#stats').load('statsto.php');
$.ajaxSetup({ cache: false });
}
function setTimer() {
timer = setInterval(displayStats, (document.hidden) ? invisibleInterval : visibleInterval);
}
});
and here is the style from statsto.php...
body {
font-family: Verdana;
font-size: 7px;
color: #FFFFFF;
background-color: #000000;
background-image: url("grad.png");
}
But the background image is not showing in internet explorer. I have tried using background: black url("grad.png"); but that also doesn't work. I have also tried including the style in the same page as the JQuery code, but still no luck.
Hmm.. Your issue may be with the .load() function itself (in Internet Explorer). I seem to remember encountering an issue with that a while back...
Try this
$.get('statso.php', function() {
$('#stats').html();
});
is there any jQuery plugin to create something like the live feed from the Twitter Main Page , using PHP, which is getting the data from a MySQL database?
How has to be the PHP file?
Thanks.
You really don't need a plugin for this, you could easily create something similar yourself using jQuery to make AJAX calls to a PHP MySQL feed
Create a script to make reoccurring AJAX calls using setTimeout() and then add the new found results to the feed container using .prepend()
HTML
<html>
<head><title>Tweets</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#tweets {
width: 500px;
font-family: Helvetica, Arial, sans-serif;
}
#tweets li {
background-color: #E5EECC;
margin: 2px;
list-style-type: none;
}
.author {
font-weight: bold
}
.date {
font-size: 10px;
}
</style>
<script>
jQuery(document).ready(function() {
setInterval("showNewTweets()", 1000);
});
function showNewTweets() {
$.getJSON("feed.php", null, function(data) {
if (data != null) {
$("#tweets").prepend($("<li><span class=\"author\">" + data.author + "</span> " + data.tweet + "<br /><span class=\"date\">" + data.date + "</span></li>").fadeIn("slow"));
}
});
}
</script>
</head>
<body>
<ul id="tweets"></ul>
</body>
</html>
PHP
<?php
echo json_encode(array( "author" => "someone",
"tweet" => "The time is: " . time(),
"date" => date('l jS \of F Y h:i:s A')));
?>
setInterval() would be more adequate, since you want a check at regular intervals.
Then, there is a jquery comet plugin that explores the implementation of the "push" technology. Check it out here.
var frequency = 5000, // number of milliseconds between updates.
updater = function() {
jQuery.ajax({
url: 'http://twitter.com/example/something.html',
success: function(data) {
// update your page based upon the value of data, e.g.:
jQuery('ul#feed').append('<li>' + data + '</li>');
}
});
},
interval = setInterval(updater, frequency);
<script>
$(document).ready(function(){
var frequency = 10000; // 10 seconds = 10000
var updater = function() {
$.ajax({
url: 'mesaj.html', // data source html php
cache: false,
success: function(data) {
$("#message").html(data); // div id
}
});
};
interval = setInterval(updater, frequency);
});
</script>
example
<div id="message">{ do not write }</div>