So I have a page set up to use Google Chart API via POST requests. I have multiple charts to draw each with a submit button so that a user can view any chart they want. So it's working where pressing the submit will load the chart, but I want to improve that.
Ideally, I'd like a way (submit button or link) to submit the form with javascript, but get the result back and add the image to the page dynamically. I really don't know if it is possible to like process the form with some javascript that will pass the data to Google and give an image back without leaving the current page. So can I?
I cannot use GET (which would be easier) because I might hit the data limit. Also, it is way easier the way I am doing this to generate these forms into a single HTML page (instead of multiple pages and using iframes which would do what I want).
Here is a snippet of my page with some charts. Just an example.
<tr class="chart-row">
<td colspan="2">
<form action="http://chart.apis.google.com/chart" method="POST" id="chartForm-idtestcasex2x32time">
<input type="hidden" name="cht" value="lc">
<input type="hidden" name="chs" value="800x375">
<input type="hidden" name="chtt" value="Performance Graph for SingleFrameNotNullSurface Time">
<input type="hidden" name="chts" value="FFFFFF,24">
<input type="hidden" name="chco" value="000000">
<input type="hidden" name="chls" value="2">
<input type="hidden" name="chm" value="o,006A71,0,-1,4">
<input type="hidden" name="chma" value="15,15,15,15">
<input type="hidden" name="chf" value="bg,s,006A71|c,s,CCDDDD">
<input type="hidden" name="chd" value="t:0.208,0.133">
<input type="hidden" name="chds" value="0.12,0.22">
<input type="hidden" name="chg" value="100,10">
<input type="hidden" name="chxt" value="x,x,y,y">
<input type="hidden" name="chxr" value="2,0.12,0.22,0.01">
<input type="hidden" name="chxl" value="0:|140|143|1:|Build Number|3:|Time (ms)">
<input type="hidden" name="chxp" value="1,50|3,50">
<input type="hidden" name="chxs" value="0,FFFFFF|1,FFFFFF,16|2N*f5*,FFFFFF|3,FFFFFF,16">
<input type="submit" value="Show Time Graph">
</form>
</td>
<td colspan="2">
<form action="http://chart.apis.google.com/chart" method="POST" id="chartForm-idtestcasex2x32fps">
<input type="hidden" name="cht" value="lc">
<input type="hidden" name="chs" value="800x375">
<input type="hidden" name="chtt" value="Performance Graph for SingleFrameNotNullSurface Time">
<input type="hidden" name="chts" value="FFFFFF,24">
<input type="hidden" name="chco" value="000000">
<input type="hidden" name="chls" value="2">
<input type="hidden" name="chm" value="o,006A71,0,-1,4">
<input type="hidden" name="chma" value="15,15,15,15">
<input type="hidden" name="chf" value="bg,s,006A71|c,s,CCDDDD">
<input type="hidden" name="chd" value="t:0,0">
<input type="hidden" name="chds" value="-1,1">
<input type="hidden" name="chg" value="100,25">
<input type="hidden" name="chxt" value="x,x,y,y">
<input type="hidden" name="chxr" value="2,-1,1,0.5">
<input type="hidden" name="chxl" value="0:|140|143|1:|Build Number|3:|Average FPS">
<input type="hidden" name="chxp" value="1,50|3,50">
<input type="hidden" name="chxs" value="0,FFFFFF|1,FFFFFF,16|2N*f5*,FFFFFF|3,FFFFFF,16">
<input type="submit" value="Show FPS Graph">
</form>
</td>
</tr>