pChart - Display png image on browser

Question

I am using the pChart class library to display .png Image on the browser. Through AJAX, I call the controller action graphgenerator to call generateGraph function in a model and display the output through a view on the browser.

The generateGraph function in the MVC model, tries to generate graphs in a loop with an HTML table using pChart's stroke() function.

When I view the output in the browser, that comes with the controller, I see it as under:

How can I make sure I display the images instead of the following binary data?

�PNG  ��� IHDR����������h����tRNS������7X}�� �IDATx���wt[Y~'���C
H�Q�(�RV)TUW��v�}��cό�9�;g�xvv�;s��z����a�㝙 �v�cUu�����L�,Q)f��/��@E�� ���� 

. { W?" P} rW ! @ BB P T)$ U ! @ BB P X˲ ] (! RH B J!! RH B Jaaz * + U ! @ BB P T)$ U ! @ BB P ! @ b˸ m s EA 0LE ^늧 2

Answer 1

Save it to disk, and return the url to the browser. Then create an tag with that url.

Answer 2

If you're getting the binary data instead of a rendered image, you could just be missing the php header tags. These ensure that the browser renders the data as an actual image.

At the top of the PHP page which the browser calls add the line:

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

or if you're generating a jpg..

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

Answer 3

Generate that binary data dynamically as the result of a URL: ie accessing mysite.com/script/generateGraph/1/2/4/5

Place that link as the src attribute of an image tag, and you should be good to go.