JavaScript++かも日記

【Webサービス】Google Chart API

【Webサービス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

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

このアクセスカウンターで受信している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>

<!-- 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^^　こちら

[1,10,30,25] [10,50,37,11] [5,20,68,77]

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

---

---

【コメント】(←clickで入力欄open)