Ajax + Jpgraph + PHP + Mysql + Javascript

[Verwijderd]

Hallo,

Ik ben bezig met een grafieken pagina.. Deze grafieken wil ik zonder page refresh updaten dus met behulp van Ajax.. Nou heb ik al het nodige geprobeerd maar kom er maar niet uit.. Als ik de response pak van de grafiek.php <-- dit is dus aan gemaakt door jpgraph dan is mijn response.text van het object. een helelap code van me png image.. als ik me response.text tussen de <img src tag neerzet dan krijg ik dit ?PNG□

Nou heb ik ook al zonder ajax geprobeerd dus bijvoorbeeld in een loopje met

div element selecteren daar de innerhtml van leeg maken en dan steeds om de 2 seconde vullen met <img src="grafiek.php">

Dit werkt tot op zekere hoogte dat ik gewoon elke keer een dikke refresh van mijn grafiek zie op me pagina. ( Dit gebeurd ook als ik me innerHTML niet leeg maak.. )

Kan iemand mij hierbij helpen ??

Heb van alles geprobeerd maar kom er nu echt niet meer uit.. Ga me nu afvragen of het uberhaubt wel mogelijk is..

Bedankt voor de moeite.

[Pyrus]

Als ik het goed begrijp wil je dus om de X seconden je grafiek, welke gemaakt wordt in grafiek.php met behulp JPGraph, updaten zonder te refreshen? Dus je wilt nieuwe content aanbieden, zonder dat deze gegenereerd wordt....
Klinkt mij redelijk onmogelijk, maar ik ben geen AJAX-expert

[mithras]

Je moet een header meesturen vanuit grafiek.php. Dan weet je document met AJAX dat het om een plaatje gaat en kan je het netjes in een img tag stoppen. Zie ook http://php.net/header voor de header. Je moet dan met de te versturen header het juiste mime-type meegeven, ik gok zo:

PHP:

header("Content-type: image/jpeg");

Pyrus schreef op vrijdag 08 december 2006 @ 23:05:
Als ik het goed begrijp wil je dus om de X seconden je grafiek, welke gemaakt wordt in grafiek.php met behulp JPGraph, updaten zonder te refreshen? Dus je wilt nieuwe content aanbieden, zonder dat deze gegenereerd wordt....
Klinkt mij redelijk onmogelijk, maar ik ben geen AJAX-expert

Nee, je php script genereert elke keer nieuwe content, die je dmv AJAX regulier ophaalt. Je php script haalt dus wel degelijk nieuwe content op / maakt nieuwe content aan.

/edit: maar zo zie je inderdaad wel de refresh van het plaatje. Ik ben verder niet zo thuis in AJAX technologie, maar kan je de grafiek bufferen, dat je bijv van boven naar beneden of van beneden naar boven de grafiek ververst? Dat ligt natuurlijk ook wát je precies aan grafiek hebt. Als het geen grafiek is maar bijv random foto's ga je dat duidelijk zien. Misschien heb je geluk en kan dit wel met jouw type grafiek.

[ Voor 90% gewijzigd door mithras op 08-12-2006 23:14 ]

[Victor]

Zo maar een gek idee...

JavaScript:

window.setInterval(function() {
  document.getElementById('idvanplaatje').src = 'urlvangrafiek.php';
}, 2000);

Geen idee of het werkt, maar probeer het eens. Wellicht dat je wat headers moet meesturen om te voorkomen dat het plaatje gecached wordt.

[crisp]

mithras86 schreef op vrijdag 08 december 2006 @ 23:08:
Je moet een header meesturen vanuit grafiek.php. Dan weet je document met AJAX dat het om een plaatje gaat en kan je het netjes in een img tag stoppen. Zie ook http://php.net/header voor de header. Je moet dan met de te versturen header het juiste mime-type meegeven, ik gok zo:

PHP:

header("Content-type: image/jpeg");

Binaire data inline in het src-attribuut van een img-element stoppen werkt enkel in non-IE browsers middels het data: pseudo-protocol

[Verwijderd]

King_Louie schreef op vrijdag 08 december 2006 @ 23:12:
Zo maar een gek idee...

JavaScript:

window.setInterval(function() {
  document.getElementById('idvanplaatje').src = 'urlvangrafiek.php';
}, 2000);

Geen idee of het werkt, maar probeer het eens. Wellicht dat je wat headers moet meesturen om te voorkomen dat het plaatje gecached wordt.

Dit heb ik dus al geprobeerd maar wat je dan krijgt is dat de grafiek inderdaad in beeld komt maar na de 2 seconden zie je even niks en dan de nieuwe grafiek niet echt seamless dus..

Met dat header gebeuren .. mee grafiek.php maakt het plaatje aan. Die laat die ook goed zien als png.. Daarna zorg ik ervoor dat grafiek.php in het html bestand wordt geladen.. daar kan ik verder toch niet echt een header mee sturen dat de pagina weet dat het om een plaatje gaat..

Iemand nog ideeen gewoon een tabel refresh met gegevens uit de db gaat wel super...
maar bij een image krijg je ?PNG□ of een hele lap code van het pngtje

[crisp]

images kan je preloaden in javascript:

JavaScript:

var image = new Image();
image.onload = onloadhandler;
image.src = 'urlvangrafiek.php';

function onloadhandler()
{
  // doe iets
}

[jan-marten]

mithras86 schreef op vrijdag 08 december 2006 @ 23:08:
Je moet een header meesturen vanuit grafiek.php. Dan weet je document met AJAX dat het om een plaatje gaat en kan je het netjes in een img tag stoppen. Zie ook http://php.net/header voor de header. Je moet dan met de te versturen header het juiste mime-type meegeven, ik gok zo:

PHP:

header("Content-type: image/jpeg");

Hier zorgt JpGraph zelf al voor. Je kunt het type ook nog wijzigen mbv SetImgFormat.

Ik zou trouwens de oplossing van crisp eens nader bekijken.

[qless]

Wat ik zou doen is:
-Laat browser + js een functie aanroepen
-Laat in de browser je nieuwe afbeelding preloaden (bv image.php?id=33333)
-Zodra preload klaar is zet je de div waar de afbeelding in stond op invisible
-Via innerHTML zet je je nieuwe (preloaded) image in de invisible div
-Maak je div weer visible

Natuurlijk moet dan wel de afbeelding gecached mogen worden. (vandaar het id nummertje wat je ophoogt)

Mocht dat niet werken, laat dat de nieuwe afbeelding in een invisible div, en als die klaar is swap je die met de huidige.

[Victor]

qless schreef op zaterdag 09 december 2006 @ 00:16:
Wat ik zou doen is:
-Laat browser + js een functie aanroepen
-Laat in de browser je nieuwe afbeelding preloaden (bv image.php?id=33333)
-Zodra preload klaar is zet je de div waar de afbeelding in stond op invisible
-Via innerHTML zet je je nieuwe (preloaded) image in de invisible div
-Maak je div weer visible

Natuurlijk moet dan wel de afbeelding gecached mogen worden. (vandaar het id nummertje wat je ophoogt)

Mocht dat niet werken, laat dat de nieuwe afbeelding in een invisible div, en als die klaar is swap je die met de huidige.

Of je vervangt het IMG element met huidige plaatje door het IMG element dat je zojuist hebt aangemaakt om de afbeelding te preloaden. Waarna je weer opnieuw begint (timeout, preload, replace, etc)

[pietje63]

Kun je niet zoiets doen:
- een javascrip functie die elke 5 seconde wordt uitgevoerd
- deze laadt een plaatje grafiek.php?rand=345u9032.jpg (met steeds een andere random code, de .jpg werkt soms beter in ie)

De browser ziet dit steeds als een ander plaatje, en aangezien hij niet preloaded is gaat hij het plaatje laden.

edit:
spuit 11.. dus beetje het ide dat andere mensen ook al gaven

[ Voor 10% gewijzigd door pietje63 op 09-12-2006 13:16 ]

[Verwijderd]

JSgraph (mij overgens onbekend) klinkt als een Javascript grafieken renderer, ik neem aan dat je deze mbv php aanroept dmv een bepaalde array van gegevens die moeten worden gecreeerd. In dat geval zou ik ajax gebruiken om een door php genereerde XML structuur op te vragen, en deze dan clientside door JSgraph te laten renderen, ofterwel, nadat je in javascript je XmlHttpRequest hebt terug gekregen, de gegevens gereed maken voor de JSgraph functie en deze vervolgens aanroepen. Zomaar even een idee hoor.. weet niet precies hoe deze JSgraph werkt.

edit:

typo

[Verwijderd]

qLess of pietje kunnen jullie manier nog nader uitleggen kom er nog niet helemaal uit.

En IE 6.0 cached die normaal gesproken.. ? of moet je dat aanzetten..

Volgens mijn cached mijn ie niet ofzo heb .. heb ik dacht ik ook niet uitgezet.. Kan je dat in javascript aangeven dat die wel moet cachen ?

[Verwijderd]

Heb nu heel wat dingen geprobeerd

img element aanmaken image cachen src overscrijven enz enz..

iemand nog ideeen misschien kan iemand het zelf ook even proberen ..

Misschien dat het toch op te lossen is met ajax heb alleen nog geen idee hoe.. krijg ?PNG0 steeds terug zeg maar of een lap code.. dat moet dus terug gezet worden naar een plaatje.

[ Voor 35% gewijzigd door Verwijderd op 09-12-2006 15:09 ]

[Borizz]

Verwijderd schreef op zaterdag 09 december 2006 @ 15:06:

Misschien dat het toch op te lossen is met ajax heb alleen nog geen idee hoe.. krijg ?PNG0 steeds terug zeg maar of een lap code.. dat moet dus terug gezet worden naar een plaatje.

Je hebt helemaal geen ajax nodig... Het komt eigenlijk op het volgende neer:
Je maakt met javascript een nieuw image aan:

JavaScript:

var img = new Image();

Aan die image hang je een onload handler (wordt aangeroepen wanneer de image geladen is):

JavaScript:

img.onload = imgOnloadHandler;

Dan zet je de src van de image (dus om een nieuwe grafiek op te halen):

JavaScript:

img.src = 'grafiek.php?img=1234';

Nu moet je nog een functie imgOnloadHandler maken die je oude image (oude grafiek) vervangt door de nieuwe image (nieuwe grafiek):

JavaScript:

function imgOnloadHandler() {
  document.getElementById('imgGrafiek').src = img.src;
}

Misschien moet je de bovenstaande posts ook nogeens bekijken want crisp heeft deze methode ook al aangedragen.

[ Voor 5% gewijzigd door Borizz op 09-12-2006 15:25 ]

[Creepy]

Javascript FTW. Dus meteen een move naar Webdesign, Markup & Clientside Scripting

[Verwijderd]

Borizz schreef op zaterdag 09 december 2006 @ 15:23:
[...]

Je hebt helemaal geen ajax nodig... Het komt eigenlijk op het volgende neer:
Je maakt met javascript een nieuw image aan:

JavaScript:

var img = new Image();

Aan die image hang je een onload handler (wordt aangeroepen wanneer de image geladen is):

JavaScript:

img.onload = imgOnloadHandler;

Dan zet je de src van de image (dus om een nieuwe grafiek op te halen):

JavaScript:

img.src = 'grafiek.php?img=1234';

Nu moet je nog een functie imgOnloadHandler maken die je oude image (oude grafiek) vervangt door de nieuwe image (nieuwe grafiek):

JavaScript:

function imgOnloadHandler() {
  document.getElementById('imgGrafiek').src = img.src;
}

Misschien moet je de bovenstaande posts ook nogeens bekijken want crisp heeft deze methode ook al aangedragen.

Natuurlijk had ik de bovenstaande posts ook al bekeken maar lukt nog niet .. wat ik nu heb geprobeer is dit.

JavaScript:

var i =0;

function loop(){


var img = new Image();

i = i + 1

img.src = "bargraph.php?img='" + i + "'";
img.onload = imgonloadhandler(img);

}

function imgonloadhandler(img){

//alert(img.src);
e$("imgid").src = img.src;

setTimeout('loop', 5000); //even aangepast stond die loop():
}

Wat doe ik nou nog niet goed dan ?

[ Voor 3% gewijzigd door Verwijderd op 10-12-2006 23:18 ]

[crisp]

Je roept hier al meteen je imgonloadhandler functie aan:

JavaScript:

img.onload = imgonloadhandler(img);

onload moet een functie-reference zijn:

JavaScript:

img.onload = imgonloadhandler;

binnen imgonloadhandler kan je met 'this' werken welke een referentie is naar je image-object (Safari bugged hierop though...)

[Verwijderd]

Eindelijk heb het werkend de code die ik gebruikt hebt is dit

JavaScript:

var i=0;

function loop(){

//alert("loop");
var img = new Image();

i = i + 1

img.src = "bargraph.php?img='" + i + "'";
img.onload = imgonloadhandler(img);

}

function imgonloadhandler(img){

//alert("img.src");
e$("imgid").src = img.src;

setTimeout('loop()', 5000);
}

bedankt allemaal voor jullie hulp!

[ Voor 3% gewijzigd door Verwijderd op 10-12-2006 23:31 ]

[Borizz]

Je code LIJKT te werken ja want je image wordt nu niet gepreload. Lees de laatste post van crisp nog maareens door.

Jou (bovenstaande) code is kwa functionaliteit gelijk aan dit:

JavaScript:

var i=0;

function loop() {
    e$("imgid").src = "bargraph.php?img='" + (++i);
   setTimeout('loop()', 5000);
}

[Verwijderd]

Ik snap dat mijn code een stukje korter kon ja.. maare mijn image hoeft toch niet perse te preloaden.. zoals ik het nu heb werkt het ik heb het getest .. waarom dan nog preloaden? ?

[SchizoDuckie]

Verwijderd schreef op zondag 10 december 2006 @ 23:52:
Ik snap dat mijn code een stukje korter kon ja.. maare mijn image hoeft toch niet perse te preloaden.. zoals ik het nu heb werkt het ik heb het getest .. waarom dan nog preloaden? ?

Door het preloaden voorkom je dat je huidige grafiekje eventjes invisible wordt voor de tijd die het duurt voor je browser om hem in te laden, sim-pel

[toost]

Het probleem komt me bekend voor. Ik had hetzelfde probleem, door de goede headers mee te sturen werkte het bij mij wel, maar kon ik geen overige html op die pagina kwijt (of ik moest met frame's ed gaan werken). Wat ik heb gedaan is het gegenereerde object (png) als image naar de server weg schrijven en deze dan in mijn 'html' pagina ophalen. Maar ik heb dit niet in combinatie met AJAX (dus geen auto refresh), maar het lijkt mij niet zo moeilijk omdit er op deze manier omheen te bouwen.

Hoop dat je er wat aan hebt.

[killercow]

toost schreef op maandag 11 december 2006 @ 15:13:
Het probleem komt me bekend voor. Ik had hetzelfde probleem, door de goede headers mee te sturen werkte het bij mij wel, maar kon ik geen overige html op die pagina kwijt (of ik moest met frame's ed gaan werken). Wat ik heb gedaan is het gegenereerde object (png) als image naar de server weg schrijven en deze dan in mijn 'html' pagina ophalen. Maar ik heb dit niet in combinatie met AJAX (dus geen auto refresh), maar het lijkt mij niet zo moeilijk omdit er op deze manier omheen te bouwen.

Hoop dat je er wat aan hebt.

Waar komt al dat geblaat over ajax in gods naam vandaan, ik weet dat ajax hip en stoer is, maar de X in ajax staat volgens mij nog steeds voor XML, hoe is een afbeelding XML?

Je kunt ook zonder disk opslag gewoon dynamische images gebruiken door gewoon het pad van je dynamische image direct in je img tag te gebruiken. De header tag zorgt er juist voor dat de php file inderdaad als een normale image gezien wordt door de browser.

Nogal logsch dat je daar geen html omheen kunt outputten, of kun je tegenwoordig in een image file ook html opnemen.

PHP met headers en jpgrah maakt images, images stop je in je html via een img tag, als losse file dus. Html komt dus in het aanroepende bestand, met daarin ook de img tag welke het pad naar de php image generator bevat.

Of je moet css/html of svg grafieken gaan gebruiken.

[armageddon_2k1]

Van W3Schools betreffende AJAX:
"XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.".

[toost]

killercow schreef op maandag 11 december 2006 @ 15:52:
[...]


Waar komt al dat geblaat over ajax in gods naam vandaan, ik weet dat ajax hip en stoer is, maar de X in ajax staat volgens mij nog steeds voor XML, hoe is een afbeelding XML?

Je kunt ook zonder disk opslag gewoon dynamische images gebruiken door gewoon het pad van je dynamische image direct in je img tag te gebruiken. De header tag zorgt er juist voor dat de php file inderdaad als een normale image gezien wordt door de browser.

Nogal logsch dat je daar geen html omheen kunt outputten, of kun je tegenwoordig in een image file ook html opnemen.

PHP met headers en jpgrah maakt images, images stop je in je html via een img tag, als losse file dus. Html komt dus in het aanroepende bestand, met daarin ook de img tag welke het pad naar de php image generator bevat.

Of je moet css/html of svg grafieken gaan gebruiken.

dus dat is precies wat ik zeg . Maar AJAX wordt niet alleen gebruikt voor XML. Je kunt AJAX ook als gemakkelijkere variant van javascript gebruiken. Autoupdate's zonder refresh (ja kan ook in javascript) zijn met een mooie AJAX class goed te maken.