如何使用ajax加载图形

i got this script where i click a button and shows the graph however its shows weird looking symbols

this is my code

anothertestmustdel.php

<input id='submit-button' type = 'button' value='simulate' id='submit' class='but1' />
<div id='randomNum10'>0</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="ajax.js"></script>
<script>
var submitEvent = document.getElementById("submit-button").onclick = function()
{
        hello6(HTTP);
}
</script>

ajax.js

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}

  var HTTP = loadXMLDoc();

  function hello6(){

    var url = "testmustdel.php";


    HTTP.onreadystatechange=function()
    {
        if (HTTP.readyState==4 && HTTP.status==200)
        {
            document.getElementById("randomNum10").innerHTML=HTTP.responseText;
        }
    };

    HTTP.open("POST", url ,true);
    HTTP.send();
}

testmustdel.php

<?php // content="text/plain; charset=utf-8"
require_once ('jpgraph/jpgraph.php');
require_once ('jpgraph/jpgraph_line.php');

// Some data
$ydata = array(11,3,8,12,5,1,9,13,5,7);

// Create the graph. These two calls are always required
$graph = new Graph(350,250);
$graph->SetScale('textlin');

// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot->SetColor('blue');

// Add the plot to the graph
$graph->Add($lineplot);

// Display the graph
$graph->Stroke();
?>

do i have to use different type of ajax to load the graph or is just my code that is wrong, I just don't know what going on here.