title: Image (graph) from AJAX displayed as a bunch of symbols on page
body: <p>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 <code>&lt;div&gt;</code> on the page, what I get is this:</p>
  
  <p><code>�PNG  IHDR,��� IDATx���i@���' I;Ⱦ���&amp;*J]�ԥB�XEEK낈��Z۷�X�^�J�P�V��m�Ro]�V*R�Z��R�E�Av��S�Y&amp;��ߧ0̜y�3'g&amp;shb�BԡS]B��!�a��!�a��P}�ݻ7iҤ��</code> etc etc</p>
  
  <p>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:</p>
  
  <pre><code>&lt;?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-&gt;SetScale("textlin");
  
  $theme_class=new UniversalTheme;
  
  $graph-&gt;SetTheme($theme_class);
  $graph-&gt;img-&gt;SetAntiAliasing(false);
  $graph-&gt;title-&gt;Set('Filled Y-grid');
  $graph-&gt;SetBox(false);
  
  $graph-&gt;img-&gt;SetAntiAliasing();
  
  $graph-&gt;yaxis-&gt;HideZeroLabel();
  $graph-&gt;yaxis-&gt;HideLine(false);
  $graph-&gt;yaxis-&gt;HideTicks(false,false);
  
  $graph-&gt;xgrid-&gt;Show();
  $graph-&gt;xgrid-&gt;SetLineStyle("solid");
  $graph-&gt;xaxis-&gt;SetTickLabels(array('A','B','C','D'));
  $graph-&gt;xgrid-&gt;SetColor('#E3E3E3');
  /* $graph-&gt;SetBackgroundImage("tiger_bkg.png",BGIMG_FILLPLOT); */
  
  // Create the first line
  $p1 = new LinePlot($datay1);
  $graph-&gt;Add($p1);
  $p1-&gt;SetColor("#6495ED");
  $p1-&gt;SetLegend('Line 1');
  
  // Create the second line
  $p2 = new LinePlot($datay2);
  $graph-&gt;Add($p2);
  $p2-&gt;SetColor("#B22222");
  $p2-&gt;SetLegend('Line 2');
  
  // Create the third line
  $p3 = new LinePlot($datay3);
  $graph-&gt;Add($p3);
  $p3-&gt;SetColor("#FF1493");
  $p3-&gt;SetLegend('Line 3');
  
  $graph-&gt;legend-&gt;SetFrameWeight(1);
  
  // Output line
  $graph-&gt;Stroke();
  
  ?&gt;
  </code></pre>