グラフを勝手に入れてみる(Chrome Extensions)

統計データは数字だけを見るよりもグラフで見たほうがより理解がしやすいと思います。ですが、WEBを見ていると時々表があってもグラフがない場合があります。

そのような場合にわざわざスプレッドシート系ソフト/サービスを起動させてデータを打ち込んでグラフを作るのは面倒です。

そこで、Chrome Extensionsで気軽にグラフを挿入するスクリプトを作成してみました。ソース置き場にあるgraph_add.zipをダウンロードアンド解凍してください。解凍するとgraph_add.crxが出来ますので、Chromeにドラッグアンドドロップしてください。

graph_add.crxが入ったChromeで「Gartnerの発表している数字から不況の度合いを測ってみる part4～サーバ以外は回復した～」をアクセスしてください。記事の中盤あたりに表があると思います(このスクリプトを実行するために入れました。いや、その上にグラフがあるんですけどね)。

表の下に"Graph Add"のボタンができました(tableタグの下につく)。これをクリックするとデータ挿入ダイアログが表示されます。

ここで表を全選択します。

この状態でCtr+Cでコピーして、ダイアログのtextareaにペースします。

この状態で、"set"ボタンをクリックしてください。"Graph Add"ボタンの下にグラフが挿入されます。

これで表しか載せていないWEBページに勝手にグラフを入れてより内容をりかいすること可能になります。

ただし、このスクリプトの注意点は以下の4つがあります。

・グラフは線グラフのみ
・データ形式は、TSV形式のみ(表をコピーするとその形式になるため)
・線グラフは5つのデータまで(これはそれで十分ではないかと)
・グループデータは列形式のみ

融通性が一切ないため、理想的な表以外は簡単にグラフに出来ません。動作条件が非常に狭いためこのような形でしか公開しませんが、円グラフやグループデータ形式をもう少し柔軟に対応できるようになれば、Chrome Extensionsギャラリーに公開したいと思います。

このように公開されているページに勝手に何かを加えたい場合はChrome Extensionsは便利ですね。

ついでに、グラフ化機能はGoogle Chart APIを使用しています(AJXのVisualization APIはChrome Extensionsで使う方法がわからずやめました)。ダイアログ等はjQuery UIを使用しています(Chrome ExtensionsでjQuery UIを使用するためには少し小細工が必要)。

【Chrome Extensions関係】
・オルタナティブブログに勝手に検索窓をつけてみた2(Chrome Extenions)
・Net Applicationsのブラウザバージョンシェア情報取得してみた(Chrome Extensions)
・オルタナティブブログの新着エントリーを20から100に増やしてみた(Chromeの拡張機能で実現)
・ChromeがGreasemonkeyをネイティブでサポートするというので試してみた
・ITmedia のニュース記事の関連キーワードのリンクを本文中に埋め込んでみる(Chromeの拡張機能で実現)