« 最後の行だけ違うスタイルにするJavaScript | トップページ | 制作実績「石川被害者サポートセンター」さん »

2009.05.17

Google Chartsのグラフを簡単に

jQuery Google Charts|web creators 2009年6月

今回もweb creators 6月号の「Webデザイン スタイルアップ Tips」に紹介されているテクニックです。
「Google Chart API」は、簡単にグラフを作るコトができる便利なサービスですが、パラメータの記述がややこしい。そこで登場するのが、今回紹介する「jQuery Google Charts」です。

「jQuery Google Charts」にアクセスすると、ページの右側に「↓Download」というボタンがあるのでダウンロードして下さい。いろいろとファイルが入っていますが、とりあえず必要なのは、jgcharts.jsとjquery.jsです。

まずは、サンプルです。(このブログのアクセス数と訪問者数をグラフにしてみました)

↑このサンプルはこちらからダウンロードできます。

各種パラメーターの設定は、サンプルのHTMLの9〜23行目付近に記述していますが、詳しくは「jQuery Google Charts」を見てもらった方が分かると思います。
グラフの種類も変更できますし、他にもいろいろとパラメーターを設定するコトで、気に入ったようにカスタマイズするコトができると思いますよ!

※ただし、IE6では日本語表記ができないので、お気をつけ下さい。 どうしてもGoogle Chart APIを使って、日本語表記のグラフを作成したい!という方は、「moBlur.org - Google Charts GUI with jQuery」を試してみると良いかも知れません。その際は、下記のページを参照するコトをオススメします。

[参考ブログ]
Google Chartsのグラフを日本語で作成できる簡単グラフ作成サービス - WEBマーケティング ブログ

|

« 最後の行だけ違うスタイルにするJavaScript | トップページ | 制作実績「石川被害者サポートセンター」さん »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/45018918

この記事へのトラックバック一覧です: Google Chartsのグラフを簡単に:

« 最後の行だけ違うスタイルにするJavaScript | トップページ | 制作実績「石川被害者サポートセンター」さん »