時系列データのグラフをjQueryとFlotで描く
JSONの時系列データがたくさん手に入りました。なにせJSONなんだし、JavaScriptを使ってブラウザにインタラクティブなグラフを簡単に描けそうな気がします。そこでとりあえず折れ線チャートを描くことにしました。むかしjQuery用のFlotというライブラリを使ったことがあったので、今回もこれを使おうと思ったのですが、完全に使い方を忘れていた！そういえば、むかし使ったときも、API.txtという英文がだらだら書かれたテキストファイルしかドキュメントがなくて面倒だったのを忘れていました。そこで今回は備忘録を残しておくことにしたしだい。 なお、Flotはべつに時系列の折れ線チャートを描くためのライブラリではないので、ほかにもいろいろなチャートが描けるはずですが、とくに調べていないので知りません。あくまでも時系列データの折れ線チャートを描くことが目標の備忘録です。 下準備描画したい時系列デー
JavaScript で，クリックした座標に点を追加できるグラフチャートを描画する方法 （jQuery のプラグイン jquery.sparklines / jquery.flotの使い方) - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ JavaScriptを使って，ブラウザ上でグラフチャートを作成する事ができる。 折れ線グラフ 棒グラフ 点だけでプロット のようにグラフの種類を変えたり，色を付けたり，プロットした点をマウスで操作したりすることもできる。 IE・Firefoxの両方に対応。 下記では，サンプルコード付きで描画用ライブラリを２つ紹介する。 試してみるのは， 簡易なライブラリである sparklines 多機能な flot の２つ。 どちらも jQuery のプラグインなので，jQuery も入手して同フォルダに設置しておくこと。 jQueryダウンロード http://docs.jquery.com/Downloading_jQ... （１）sparklines で手軽に描画 このライブラリは，プラグインの紹介記事にて「小さなかわいいグラフが簡単に描ける！」として
jqueryベースのグラフ描画ライブラリFlot
Flotってご存知ですか こんにちは。松下です。 みなさんはFlotというjqueryベースのjavascriptグラフ描画ライブラリををご存知でしょうか？ データ形式はjsonで行うことができ、flashベースのOpenFlashChartのように複雑なことはできないですが、きれいなグラフを簡単に描画することができます。 データのやり取りがjson形式で行うためサーバ側でデータをjsonに加工すれば、あとはライブラリがプロットするだけなので、扱いがかなり楽です。 簡単なHow toをご紹介したいと思います。 まずは簡単に描画してみる 描画の仕方は、flotの描画ライブラリの呼び出し（ $.plot()） 行うだけです。 以下に例を示します。ここでは、第一引数で描画を行う場所、第二引数でデータを設定してライブラリを呼び出しています。 var d1 = [ [1, 96], [2, 89],
Flotでグラフ作成 時系列のグラフ | Arti
続いて、時系列のグラフを作成してみます。 時間データは1970/1/1からのミリ秒で表現します。 UNIX時間とかエポックミリ秒といわれるやつです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Basic Linechart</title> <!-- 必要なライブラリのインポート --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/flot/jquery.flot.min.js">
Flotでグラフ作成 折れ線グラフ・棒グラフ |
FlotというjQueryベースでグラフを作成するライブラリについての調査メモです。 Flotプロジェクト 上記ページからリンクされていますが、下記のExamplesとAPI referenceが参考になります。 Examples API reference まずはシンプルな折れ線グラフです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Basic Linechart</title> <!-- 必要なライブラリのインポート --> <script src="assets/j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
