通过POST请求将Google图表加载到页面中

Question

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>

Answer 1

You can append the parameters to the url and load it as an image with javascript.

I know you said you might hit the limit with get requests, but here is an excerpt from : http://code.google.com/apis/chart/docs/making_charts.html that might help you.

Google Chart Usage Policy

There's no limit to the number of calls per day you can make to the Google Chart API. However, we reserve the right to block any use that we regard as abusive. If you think your service will make more than 250,000 API calls per day , please let us know by mailing an estimate to chart-api-notifications@google.com.