KAZです。

池田朋大 氏のソースを元にWidgetを作ってみました。
たいしたソースじゃないですが、公開しておきます。
改造等はご自由にどうぞ。
質問等はお気軽に書き込み＆メール下さい。

P.S.
コメント等は適当ですので、変なコメントはスルーして下さい。A(^^;

<code>
/**
* PITS - http://www.pits.jp
* Copyright (C) 2010 PITS
* Author: kazuo ito (k_ito@pits.jp)
*
* V 1.0.1 Zabbix API
*
* Example usage:
<script src="http://path/to/widget.js"></script>
<script>
new ZabbixWidget({
url : 'http://path/to/api_jsonrpc.php',
host : 'xxxxxxxx'
user : 'xxxx',
password : 'xxxx',
key : 'system.cpu.load[]'
reload : '30'
});
</script>
*
*//**
* @namespace Zabbix public namespace for Zabbix widget
*/
function ZabbixWidget(a) {
var authid;
var itemid;
var divid;

authid = authAPI(a.url, a.user, a.password);
itemid = getItemId(authid, a.url, a.host, a.key);
divid='id'+authid;
getHistory(authid, a.url, itemid, a.host, a.key, divid);

setTimeout("recursiveCall('"+authid+"','"+a.url+"','"+a.user+"','"+a.password+"','"+a.host+"','"+a.key+"','"+a.reload+"','"+divid+"')", Number(a.reloaad) * 1000);
}
function recursiveCall(authid, url, user, password, host, key, reload, divid)
{
//$("#id" + authid).remove();

var authid;
var itemid;

authid = authAPI(url, user, password);
itemid = getItemId(authid, url, host, key);
getHistory(authid, url, itemid, host, key, divid);

setTimeout("recursiveCall('"+authid+"','"+url+"','"+user+"','"+password+"','"+host+"','"+key+"','"+reload+"','"+divid+"')", Number(reload) * 1000);
}
function getHistory(authid, url, itemid, host, key_, divid)
{
var now = parseInt(new Date / 1e3);
var rep = 0;
if ($('#'+divid).length==0) {
document.write('<div id="' + divid + '"></div>');
rep = 1;
}
getAPIResponse(
authid,
url,
"history.get",
{
history: 0,
itemids: itemid,
output: "extend",
time_from: now - 86400,
time_till: now,
limit: 288
},
false,
function(result)
{
url = createChartURL(host + ":" + key_, getValues(result, "value"));
if(rep==0){
$('#'+divid+" > img").replaceWith($("<img/>").attr("src", url));
}else{
$('#'+divid).append($("<img/>").attr("src", url));
}
}
);
return divid;
}

function createChartURL(label, data) {
max = Math.ceil(Math.max.apply(null, data));
for (i in data) {
data[i] = parseInt(data[i] * 100 / max);
}
var url = "http://chart.apis.google.com/chart?cht=lc&chs=300x180&chtt=" + label + "&chxt=y&chxr=0,0," + max + "&chd=t:" + data.join();
return url;
}

function getValues(arr, key) {
return $.map(arr, function(obj) {
return obj[key];
});
}

function getItemId(authid, url, host, key_)
{
var ret;
getAPIResponse(
authid,
url,
"item.get",
{
host: host,
search:
{
key_: key_
}
},
false,
function(result)
{
ret = result[0].itemid;
}
);
return ret;
}
function authAPI(url, user, password)
{
var ret;
getAPIResponse(
null,
url,
"user.authenticate",
{
user: user,
password: password
},
false,
function(result)
{
ret = result;
}
);
return ret;
}

function getAPIResponse(authid, url, method, params, async, callback)
{
callAPI(
authid,
url,
method,
params,
async,
function(response)
{
if(response["error"])
{
alert("API Error:" + JSON.stringify(response));
}else{
callback(response["result"]);
}
},
function(response)
{
alert("Connect Error:" + JSON.stringify(response));
}
);
}

function callAPI(authid, url, method, params, async, success, error)
{
var sendData = {
jsonrpc: "2.0",
id: 1,
auth: authid,
method: method,
params: params
};
$.ajax({
url: url,
contentType: "application/json-rpc",
dataType: "json",
type: "POST",
processData: false,
data: JSON.stringify(sendData),
async: async,
success: success,
error: error
});
}
</code>