Google Chart API
http://code.google.com/apis/chart/
これは便利。
jquery.jQchart作らなくても良いじゃん(笑;;;;。
たとえば、次のようにGETリクエストを投げると、下記のグラフ画像が返されるという仕組みです。
<img src="http://chart.apis.google.com/chart?
chs=200x125
&chd=s:helloWorld
&cht=lc
&chxt=x,y
&chxl=0:|Mar|Apr|May|June|July|1:||50+Kb"
alt="Sample chart" />
<img src="http://chart.apis.google.com/chart
?cht=lc
&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp
&chco=FF0000
&chls=4.0,3.0,0.0&chs=200x125
&chxt=x,y
&chxl=0:|Jun|July|Aug|1:||20|30|40|50
&chf=bg,s,efefef">
<img src="http://chart.apis.google.com/chart
?cht=lc
&chco=ff0000,0000ff
&chs=200x125
&chd=s:FOETHECat,lkjtf3asv,KATYPSNXJ
&chxt=x,y
&chxl=0:|Oct|Nov|Dec|1:||20K||60K||100K">
<img src="http://chart.apis.google.com/chart
?cht=p3
&chd=s:Uf9a
&chs=200x100
&chl=A|B|C|D">
<img src="http://chart.apis.google.com/chart
?cht=s
&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn
&chxt=x,y
&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100
&chs=200x125">
まぁ、やってることは、これ↓とそんなに変わらない気もするのですが、WebAPIとして提供しつつ圧倒的にパフォーマンスが良いというのはGoogleならではです。(いや、こっちは、データも出力してるし＜って張り合ってどうする^^;)
このアクセスカウンターで受信しているJSデータでGoogle Chartを描いてみました。日本語は通りませんね、やはり。
![]()
ソース
<!-- jQuery 1.2.1 -->
<script src="../../../jquery-min.js" type="text/javascript"></script>
<script charset="EUC-JP"
src="http://jsgt.org/mt/01/counter_1/cntx41.php?uid=1091192023"></script>
<img id="test18321">
<script >
<!--
(function (){
var week = ["S","M","T","W","T","F","S"],
cnt = new jg_tato_GraphCounter01(),
len = 21 ,//cnt.d.length,
_wa = [],
wa = [],
wk = [],
unit = 1000,
gridY = parseInt(
(function (){
for(var i=0;i<len;i++)wa.push(cnt.d[i][1]/25);
for(var k=0;k<len;k++)wk.push(week[cnt.d[k][3]]);
for(var l=0;l<len;l++)_wa[l]=wa[l];
return wa.sort(function (a,b){return b - a})[5]
})()/unit,10)+2,
url = "http://chart.apis.google.com/chart",
getYscaleStr = function (){
for(var j=0,str='';j<=gridY;j++)str+=(j*unit)+"|" ;
return str ;
},
param = url+"\
?cht=lxy\
&chs=200x100\
&chd=t:"+_wa.join(',')+"\
&cht=lc\
&chxt=x,y\
&chxl=0:|"+wk.join('|')+"|1:|"+getYscaleStr()
$("#test18321").attr("src",param);
})()
//-->
</script>
#速度を見たら、jsgt.orgで作った方が3倍速かった。ほっ。
で、もっと簡単なサンプル。
![]()
<!-- jQuery 1.2.1 -->
<script src="./jquery-1.2.1.min.js"></script>
<img id="test18322"><!-- ここへ出力-->
<script >
<!--
(function (){
var width = 200, //幅
height = 100, //高さ
yData = [10,20,50,100], //折れ線データ
yGrid = [0,50,100], //y軸ラベル
xGrid = [2005,2006,2007,2008], //x軸ラベル
url = "http://chart.apis.google.com/chart",
param = url+"\
?cht=lxy\
&chs="+width+"x"+height+"\
&chd=t:"+yData.join(',')+"\
&cht=lc\
&chxt=x,y\
&chxl=0:|"+xGrid.join('|')+"|1:|"+yGrid.join('|')
$("#test18322").attr("src",param); //jQueryでゴー!
})()
//-->
</script>
次に、書き換えテスト
このページの読み込みがかったるいときは、f^^ こちら
![]()
<!-- jQuery 1.2.1 -->
<script src="./jquery-1.2.1.min.js"></script>
<img id="test18323"><!-- ここへ出力-->
<p>
<button id="test18323a">[1,10,30,25]</button>
<button id="test18323b">[10,50,37,11]</button>
<button id="test18323c">[5,20,68,77]</button>
</p>
<script >
<!--
$(function (){
//ボタンにクリックイベントセット
$("#test18323a").click(function(){myChart.draw([1,10,30,25])})
$("#test18323b").click(function(){myChart.draw([10,50,37,11])})
$("#test18323c").click(function(){myChart.draw([5,20,68,77])})
});
//Googleチャート描画テスト用インスタンス
var myChart = new (function (){
this.draw=function (data){
mkChart18323(data||[10,20,50,100]);
}
function mkChart18323(data){
var width = 200, //幅
height = 100, //高さ
yData = data, //折れ線データ
yLabel = [0,50,100], //y軸ラベル
xLabel = [2005,2006,2007,2008], //x軸ラベル
url = "http://chart.apis.google.com/chart",
param= url+"\
?cht=lxy\
&chs="+width+"x"+height+"\
&chd=t:"+yData.join(',')+"\
&cht=lc\
&chxt=x,y\
&chxl=0:|"+xLabel.join('|')+"|1:|"+yLabel.join('|')
$("#test18323").attr("src",param); //jQueryでゴー!
}
})();
//初期描画
myChart.draw([10,20,80,100]);
//-->
</script>
現在、かも日記では、ブックマーク追加ボタンの作成支援Webサービス「
AddClip」を使わせていただいており、これがなかなか便利なのですが、
indexページなどの場合に、何度も表示されるたびに、AddClipsWindowという関数を、何度でもロードしてしまうので、1回こっきり(
べきとう?)になるように、抑制してみました。
<script type="text/javascript" src="http://www.addclips.org/addclips.js"></script>
これを↓こう修正
<script type="text/javascript">
if(typeof AddClipsWindow!='function')
document.write('<scr'+'ipt type="text/javascript" src="http://www.addclips.org/addclips.js"></scr'+'ipt>');
</script>
あとGoogoleも同様なんですけれど、こっちは現在iframeで読み込まれているのと、コードの変更が認められていないので、ちょっと手を出ししにくい、、、。うーん。でも、、、。
オンラインプレゼンテーションというか、スライドショーの共有サイトかな、YouTubeがあるからどうかなぁ、と思っていたら、いつの間にか、アカデミックで有用なスライドがどっさり集まり始めていました。
jQueryタグで検索
http://www.slideshare.net/tag/jquery
ページが重くなるのを承知で少し貼ります。重くてしんどかったらあとで減らします(＾＾；
P.S. やはり重かったf^^;。Flashのページを送るたびに、メモリ使用量がぐんぐん上がって戻らなくなります。とりあえず、firefoxは、親DIVをdisplay:noneにすることでメモリ解放してくれることを確認したので、ｊQueryでhide/showボタンを作ってみました。
#IEのメモリはどうしたら解放できるのかなぁ、、、。
p.s.$("+ div",this).remove();で減りそうな？
jQuery in 15 min
prototype.Js<=>jQuery
prototype.JsとjQueryの比較
JavaScript Libraries
(prototype.js,jQuery,Dojo,YUIの比較)
The JavaScript Programming Language
「世界で最も誤解された言語JavaScript」
Douglas Crockford←JSONの提唱者ですね
ActiveDOM
データベースをjQueryでマッピングする話
参考:今回作った hide/show ボタン
<script src="./jquery.js" type="text/javascript"></script>
<script>
$(function(){
$(".btn__ss").click(function(){
if($("+ div",this).css("display")!="none"){
$("+ div",this).hide(); $(this).text("show"); //hideします
}else{
$("+ div",this).show(); $(this).text("hide"); //showします
}
})
})
</script>
<style>
#slideshow1787 div{display:none}
</style>
<div id="slideshow1787">
<b>jQuery in 15 min</b>
<br><button class="btn__ss">hide/show</button>
以下はslideshareのフラッシュembedコードを貼るだけです
<div style="width:425px;text-align:left" id="__ss_88304">
<object style="margin:0px" width="425" height="355">
<param....(以下 略)
</div>
</div>←id="slideshow1787"の閉じタグ
slideshow1787は、もし最初Flashの親DIVをdisplay:noneにしないならいりません。
<button class="btn__ss">のすぐ後ろにFlashの親DIVがあるのがポイントです。
ボタンクリックのコールバック内の $("+ div",this) で検索して.show() .hide()してみました。
P.S. このhide/showボタンをいろいろな方法で書いてみました。→
分岐の書き方をいくつかテスト
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
