生成服务器端Google图表作为图像 [英] generate server-side google charts as images

问题描述

我刚刚开始使用（新的）Google Charts api，它非常酷。我已经使用此api成功创建了图表。

I've just started using the (new) Google Charts api and its pretty cool. I'm successfully creating charts using this api.

但是我遇到了吞吐量挑战。在我的应用程序中，我从NOAA提取的实时数据生成了三个图表。获取数据，将其按摩成图表形式，然后在客户端绘制图表所花费的时间是令人无法忍受的缓慢用户体验。

I have a throughput challenge however. In my application I generate three charts from real-time data I'm pulling down from NOAA. The time it takes to get the data, massage it into chart form and then draw the chart client-side is an intolerably slow user experience.

所以我的想法是生成定期（每15-30分钟）在（托管）服务器上绘制图表，然后向访问者提供最新的图像。

So my thought was to generate the chart periodically (every 15-30 min) on the (hosted) server and then just serve up an image of the most recent to visitors.

我看着phantomjs（按照这篇文章）中的建议进行操作，但看起来使用了.exe文件，但无法将其上传到共享主机。

I looked at phantomjs (as recommended in this post), but it looks like its an .exe file is used and I can't upload that to my shared host.

还有（Highcharts），但我想首先探讨开源替代方案

There's also this thread for a proprietary solution (Highcharts), but I want to explore open source alternatives first before going down the Highcharts path.

其他解决方案着重于允许用户将呈现的图表另存为图像，但是我的我们的目标是永远不要在浏览器中呈现图表或在页面请求时添加图像以外的任何服务器负载。

Other solutions focus on allowing the user to save a rendered chart as an image, but my goal is to never render the chart in the browser or have any server load other than including an image at the time of page request.

我只是没有看到任何东西处理动态生成的图表，这些图表在页面呈现时自动转换为自动提供的图像。

I just haven't seen anything that handles dynamically generated charts that are "automatically" converted into an image that is "automatically" served when the page is rendered.

总而言之，这是我的三个部分尝试凑在一起：

In summary, here are the three pieces I am trying to cobble together:

1）从第三方（在这种情况下为NOAA）提取数据并将数据呈现为Google图表（完成，此处无问题）
2）在服务器端自动将每个呈现的图表转换为图像，并创建图像网址
3）在呈现之前将图表的图像URL（将经常刷新）粘贴到网页的html中（通过php）

1) pulling data from a third party (NOAA in this case) and rendering data as a Google Chart (done, no issues here) 2) converting each rendered chart into an image automatically, server side and creating image urls 3) sticking the image URL of the chart (which will be refreshed frequently) into the html of the web-page before rendering (via php)

PS可以为每个图表图像都有一个静态网址...我没有创建图像档案...

P.S. its ok to have a static url for each chart image...I'm not creating an archive of images...

有什么建议吗？我会丢失什么吗？

Any recommendations? Am I missing something?

推荐答案

使用 Watir 来加载网页并保存图像。 Watir是一个基于Ruby的测试平台，旨在测试网页。我将执行以下操作。

Use Watir to load the web page and save the images. Watir is a Ruby-based test platform aimed at testing web pages. I would do the following.

1. 创建一个呈现图表的网页。它不会供
   公共使用，而只是用于生成图表图像。


2. 为每个图表添加调用getImageURI（）的Javascript以获取
   PNG数据。


3. 使用Ajax在服务器上调用PHP脚本。传递PNG数据
   并将其保存到文件中。


4. 在Watir中编写脚本，只需打开浏览器并加载
   网页即可。


5. 安排Watir脚本按您希望的频率运行。

1. Create a web page that renders the charts. It would not be for public use, only for generating the chart images.
2. Add Javascript that calls getImageURI() for each chart to get the PNG data.
3. Use Ajax to call a PHP script on the server. Pass in the PNG data and save it to a file.
4. Write a script in Watir that simply opens a browser and loads your web page.
5. Schedule the Watir script to run as often as you desire.

Watir脚本可以在任何操作系统上运行

The Watir script can run on any local computer (PC or Mac) or even on a server.

这里的Javascript通过Ajax将PNG数据发送到PHP脚本。仅仅是获取图像数据并将其发送的片段，而不是完整的解决方案。

Here's Javascript to send the PNG data to a PHP script via Ajax. It is just the snippet that gets the image data and sends it, not a complete solution.

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(chartDiv);
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
    pieDone=1;
    piePNG=chart.getImageURI();
    saveChartPNGs(piePNG); 
});
chart.draw(data, options);

function saveChartPNGs(png)
{
  var jsonSavePNG = $.ajax({
    type: "POST",
    url: pngSaveUrl,
    dataType:"json",
    data: 'png=' + png
  }).done();
}

此PHP代码处理Ajax调用并保存文件。

This PHP code processes the Ajax call and saves the file.

if (isset($_REQUEST['png']))
{
    // Remove header string
    $data=str_replace('data:image/png;base64,','',$_REQUEST['png']);
    // Restore data to original format; convert space to '+'
    $data=str_replace(' ','+',$data);
    // Save PNG file
    $outFile=DOC_ROOT.'/atest.png';
    // Decode base 64 before saving
    $fres=file_put_contents($outFile, base64_decode($data));
}

在您的本地计算机上，Watir脚本（实际上是用Ruby编写的）很简单。

On your local computer, the Watir script (actually written in Ruby) is simple.

# Load watir
require 'watir-webdriver'
require "watir-webdriver/extensions/alerts"

# Launch the browser; common choices: chrome, firefox, ie.
# Headless browsers are available.
browser = Watir::Browser.new :chrome # chrome browser window

# Load the web page
browser.goto 'http://domain.net/page/'

要完全自动化Watir端，我会编写图表渲染网页以在加载该网页时加载新页面已完成文件的保存。您可以让Watir在浏览器中检查该页面，然后退出直到页面再次执行。

To fully automate the Watir side I would write the chart rendering web page to load a new page when it has finished saving the files. You can have Watir check for that page in the browser and then exit until it executes again.

如果可以安排在服务器上安装Ruby，Watir和浏览器，那么您可以使用cron作业来自动化整个方案。

If you can arrange to install Ruby, Watir and a browser on your server, then you can automate this entire scenario with a cron job.

这篇关于生成服务器端Google图表作为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！