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

时间:2010-06-14 14:17:02

标签: javascript html post google-visualization

所以我设置了一个页面,通过POST请求使用Google Chart API。我有多个图表可以使用提交按钮绘制每个图表,以便用户可以查看他们想要的任何图表。因此,按下提交将会加载图表,但我希望改进它。

理想情况下,我想要一种方式(提交按钮或链接)来提交带有javascript的表单,但是返回结果并动态地将图像添加到页面。我真的不知道是否有可能喜欢使用一些javascript处理表单,这些javascript会将数据传递给Google并在不离开当前页面的情况下返回图像。我也可以吗?

我不能使用GET(这会更容易),因为我可能会达到数据限制。此外,我这样做的方式更容易生成这些表单到一个单独的HTML页面(而不是多个页面,并使用iframes,这将做我想要的)。

以下是我的页面的片段,其中包含一些图表。只是一个例子。

<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>

1 个答案:

答案 0 :(得分:0)

您可以将参数附加到网址并使用javascript将其加载为图片。

我知道你说你可能会在获取请求时达到极限,但这里有一段摘录:http://code.google.com/apis/chart/docs/making_charts.html可能对你有所帮助。

  

Google图表使用政策

     

您可以对Google Chart API每天进行的通话次数没有限制。但是,我们保留阻止任何我们认为滥用的用途的权利。如果您认为自己的服务每天超过250,000次API调用,请通过将估算值发送至chart-api-notifications@google.com告知我们。