Image (graph) from AJAX displayed as a bunch of symbols on page

Question

I'm using jpgraph to plot some statistics graphs for my site, and I want to do this without refreshing the page. So I put the jpgraph code in a separate file, named it plot_graphs.php and send requests to that through AJAX. Now, if I open the file plot_graphs.php directly, it opens the graphs just fine. But when I open it from AJAX and point it to display the response in a <div> on the page, what I get is this:

�PNG IHDR,��� IDATx���i@���' I;Ⱦ���&*J]�ԥB�XEEK낈��Z۷�X�^�J�P�V��m�Ro]�V*R�Z��R�E�Av��S�Y&��ߧ0̜y�3'g&shb�BԡS]B��!�a��!�a��P}�ݻ7iҤ�� etc etc

Is there a way to get this to work without reloading the page and putting the plot_graphs.php code directly into the div? Charset of the page is utf-8 in case it matters. These are the contents of plot_graphs.php:

<?php

require_once ('../jpgraph/src/jpgraph.php');
require_once ('../jpgraph/src/jpgraph_line.php');

$type=$_GET['type'];
$unit=$_GET['unit'];
$term=$_GET['term'];

$datay1 = array(20,15,23,15);
$datay2 = array(12,9,42,8);
$datay3 = array(5,17,32,24);

// Setup the graph
$graph = new Graph(300,250);
$graph->SetScale("textlin");

$theme_class=new UniversalTheme;

$graph->SetTheme($theme_class);
$graph->img->SetAntiAliasing(false);
$graph->title->Set('Filled Y-grid');
$graph->SetBox(false);

$graph->img->SetAntiAliasing();

$graph->yaxis->HideZeroLabel();
$graph->yaxis->HideLine(false);
$graph->yaxis->HideTicks(false,false);

$graph->xgrid->Show();
$graph->xgrid->SetLineStyle("solid");
$graph->xaxis->SetTickLabels(array('A','B','C','D'));
$graph->xgrid->SetColor('#E3E3E3');
/* $graph->SetBackgroundImage("tiger_bkg.png",BGIMG_FILLPLOT); */

// Create the first line
$p1 = new LinePlot($datay1);
$graph->Add($p1);
$p1->SetColor("#6495ED");
$p1->SetLegend('Line 1');

// Create the second line
$p2 = new LinePlot($datay2);
$graph->Add($p2);
$p2->SetColor("#B22222");
$p2->SetLegend('Line 2');

// Create the third line
$p3 = new LinePlot($datay3);
$graph->Add($p3);
$p3->SetColor("#FF1493");
$p3->SetLegend('Line 3');

$graph->legend->SetFrameWeight(1);

// Output line
$graph->Stroke();

?>

Answer 1

Looks like you are trying to send binary data without specifying what that data is. try this:

header("Content-type: image/png");
$graph->Stroke();