ヒートマップが簡単に描画できるライブラリ「heatmap.js」:phpspot開発日誌heatmap.js Examples ヒートマップが簡単に描画できるライブラリ「heatmap.js」。 よくクリックされる位置等の計測に使われるヒートマップを簡単に描画できます。 デモ集 地図上にレイヤーをかぶせるなども可能のようです 関連エントリ 新し目のAPIにも対応したGoogleマップ操作jQueryプラグイン「Maplace.js」
データ分析や資料作り等に活かせるTSVからデータをコピーして様々にビジュアライズ出来る便利ツール「Raw」:phpspot開発日誌
データ分析や資料作り等に活かせるTSVからデータをコピーして様々にビジュアライズ出来る便利ツール「Raw」 2013年10月25日- Raw データ分析や資料作り等に活かせるTSVからデータをコピーして様々にビジュアライズ出来る便利ツール「Raw」 ExcelからコピーしたTSVなどのデータを貼り付けて、軸を選んでドラッグ＆ドロップするだけでグラフを描画できます。 Excelだけでも色々な事ができると思いますが、Excelがない場合でも、TSVさえ吐ければクールなグラフをブラウザ上で作れます クラスタリングしてビジュアライズなども可能っぽい 動画でのチュートリアルはこちら 関連エントリ 線グラフを描くだけの軽量グラフ描画JS「Aristochart」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 どんなデータもリアルタイムなグラフにできるフレ
様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」:phpspot開発日誌
NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob
ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」:phpspot開発日誌
sigma.js | a lightweight JavaScript graph drawing library ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」。 HTML5 canvasベースのスタンドアロンライブラリだそうです。マウスでドラッグしたりマウス位置に応じてインタラクティブに変化させることができます。 次のようにグラフィックが美麗であるので、個人的にはグラフィック作成用途に使っちゃってもいい気がしました。 関連エントリ 複数要素の関連をビジュアライズできるライブラリ「arbor.js」 HTML5のキャンバスと連動させて音声をビジュアライズしたデモ 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」
データのビジュアリゼーションに使えるJSライブラリ「d3.js」:phpspot開発日誌
d3.js データのビジュアリゼーションに使えるJSライブラリ「d3.js」 ユニークで様々なビジュアリゼーションが可能になっており、更にアニメーションしたりインタラクティブな要素を盛り込めるのも特徴 次のようなデータビジュアリゼーションをjavascriptのコードを使って描画でき、サンプルコードなんかも公開されています。 IEには対応していませんが、かなり色々なことができるので覚えておいてもよいかも。 関連エントリ 色々と使えそうなグラフや図が描けるビジュアリゼーションライブラリ集 データの様々なヴィジュアリゼーションが可能なFlexライブラリ「birdeye」
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」:phpspot開発日誌
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」。 このプラグインを使えば、テーブルのデータを読み込んで、リアルタイムにグラフ化してくれます。 $('#table1').graphTable({series: 'columns'}); みたいにすることで、指定したテーブルのデータを次のように描画させることが可能です。 既存の表がある場合は、ブラウザ上でグラフ化することが出来て便利ですね。 以下のエントリを参照してください。 graphTable: graph data from HTML table using flot | jQuery Wisdom 関連エントリ jQueryで実装する進捗グラフ付き複数ファイルアップローダー JavaScript用のグラフ描画ライブラリ色々 CSSだけで円グラフを表示するサンプル
ドリルダウンなグラフを作成できるjQueryプラグイン「DDChart」:phpspot開発日誌
jQuery Plugin Drill Down Charts Exmaples ドリルダウンなグラフを作成できるjQueryプラグイン「DDChart」。 グラフ自体は次のようなイメージで、アニメーション表示出来るグラフなのですが、一味違うところは、グラフをクリックすると、更にそのグラフを細分化して表示できるところ。 例えば、A~Dのチェーン店があったとして、Bのグラフをクリックすることで、今度はBの店舗別の売上を表示するといったことが可能です。 更に、Bの店舗で何が売れているか？というのをクリックでたどれるようなイメージです。 クリックするとアニメーションしながら、更にグラフを子要素にたどることが出来ます。 若干分かりづらいかもしれませんが、パンくずリストのようなものがグラフの下部に表示されています。 ありそうで、なかったグラフライブラリかもしれませんね。 グラフで一覧表示できるのはわ
PHPでベクターグラフィックスを作成するためのチュートリアル:phpspot開発日誌
PHPでベクターグラフィックスを作成するためのチュートリアルが公開されてます。 svgというとxmlベースのテキストデータですが、これをPHPから出力する方法です。 チュートリアルといえど、便利なライブラリを使うので実際にはそのライブラリの使い方をマスターすれば誰でも簡単に使える内容になってます。 対応ブラウザであれば次のようなグラフが描画できるので便利です。 出力されたsvgのデータの内容。ライブラリを使ってこれが出力できるので、形式について覚える必要はありません。 線グラフの他、円グラフなども描画できます。 JSやFlashなど、様々なライブラリが存在しますが、SVGでの描画の方法も知っておくといつか役立つ時がくるかもしれませんね。
Google Chart API を jQuery で簡単に使えるラッパーライブラリ「jQuery Google Charts」:phpspot開発日誌
Google Chart API を jQuery で簡単に使えるラッパーライブラリ「jQuery Google Charts」 2009年07月08日- jQuery Google Charts 1.0 - Demo Site Google Chart API を jQuery で簡単に使えるラッパーライブラリ「jQuery Google Charts」。 たとえば、次のようなコードを書きます。 var api = new jGCharts.Api(); var opt = { data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]//mandatory }; jQuery('<img>').attr('src', api.make(opt)).appendTo("#bar1"); すると、次のグラフが簡単にページに挿入されます。 もちろ
PHPベースのグラフ生成ライブラリ·pChart MOONGIFT
システムに入れたデータは何らかの形で出力される。多いのはグラフや表だろう。表は数値を細かく判断する場合には便利だが、もっと感覚的に肌で違いを感じられるのはグラフの方だ。そのため、グラフ作成に関するニーズは多い。 曲線を描くグラフ グラフを生成するライブラリは数多く存在するが、使い勝手や機能面で物足りない思いをしている人もいるだろう。そこでこちらをご紹介。 今回紹介するオープンソース・ソフトウェアはpChart、PHP向けのグラフ生成ライブラリだ。 pChartは折れ線グラフ、面グラフ、棒グラフなどを画像として生成することができる。細かな指定ができ、各要素が離れた円グラフ、なんてことやポインタに画像を使ったりすることもできる。もちろん複数の要素を同時に表示したり、折れ線グラフと面グラフを合わせるなんてこともできる。 コメント付き PHP単独で作られているので、PHPでシステムを構築している場
グラフ作成やデータ可視化を楽に美しくできる便利なサービス22個まとめ | Web担当者Forum
このコーナーでは、ネットビジネスを強力に支援する製品について、それを支える技術や市場動向を説明し、さらに各社から提供されている製品を紹介する。競合商品がひしめく市場で、他社に差を付けるための武器として、ぜひ導入を検討してみてほしい。今回は、「グラフ作成・データ可視化」サービスだ。 売り上げの推移、業界におけるシェア、自社製品の出荷数内訳などなど…。「顧客の説得のため、ウェブサイトでもグラフ要素を掲載したい」といったケースは増えている。大手企業では、PHPを使いデータベースと連動させて動的に最新グラフを表示させる、といった仕組みを用意できる場合もあるが、たいていは「エクセルで作成したグラフを画像として貼り付け」といった、手作業感あふれるものだった。 だが、昨年末にGoogle Chart APIが登場して以降、さまざまなサービスや独自APIが増加し、選択肢がグッと増えてきた。無料で利用できる
MOONGIFT: � JavaScriptだけのダイナミックなグラフライブラリ「ProtoChart」:オープンソースを毎日紹介
※ 画像は公式サイトデモより 最近は簡単に使えるグラフライブラリが増えてきた。Flashのものは見た目が奇麗で、画像出力のものも見やすさではひけを取らない。だがこうしたグラフは一度表示したが最後、リロードしないと変化しないものが多かった。 パイチャート そうではない、もっとダイナミックに変化するグラフを描きたい場合はこれを使ってみよう。 今回紹介するオープンソース・ソフトウェアはProtoChart、JavaScriptだけで描くグラフライブラリだ。 ProtoChartはCanvasを使って、JavaScriptのみでグラフを生成している。Canvasは本来、IE6には対応していないが、外部ライブラリを読み込むことで描画できるようにしている。これにより対応ブラウザはIE6/7、Firefox2/3、Safariとなっている。またSafariに対応しているとあって、iPhone/iPod
Prototypeベースのグラフ描画用JSライブラリ「ProtoChart」:phpspot開発日誌
ProtoChart: Prototype Canvas = Pretty Charts :: Deensoft We finally have a bit stable version of our new charting library. Prototypeベースのグラフ描画用JSライブラリ「ProtoChart」 線グラフ 棒グラフ 円グラフ 曲線グラフ などが作成可能です。 関連エントリ JavaScriptで小さくて可愛いグラフを作れる「jQuery Sparklines」 フリーのグラフスクリプト１０個
JavaScriptで小さくて可愛いグラフを作れる「jQuery Sparklines」:phpspot開発日誌
jQuery Sparklines This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. JavaScriptで小さくて可愛いグラフを作れる「jQuery Sparklines」 PHPを使って、サーバサイドで以下のような、小さくて可愛く場所をとらないグラフを書くプログラムを以前紹介しました。 ミニグラフ作成ライブラリSparkline 時代は変わって、今はJavaScriptでもグラフは当たり前という時代になり、SparklinesのJS版が出たみたいです。 グラフ描画処理はサーバ側に負担をかけますが、JSであればクライアントサイドでの描画な
折れ線チャートを生成してくれるjQueryプラグイン『jQuery Sparklines』 – creamu
サイト上で簡単にチャートを作りたい。 そんなときにおすすめなのが、『jQuery Sparklines』。折れ線チャートを生成してくれるjQueryプラグインだ。 このプラグインは、↑のように<input>に数値を入力することで表を生成してくれる。 サイズや色を変更できたり、バータイプのチャートや株価チャート的なデザインにも変更可能だ。 ソースはサイト上からダウンロードすることができる。 ライセンスはNew BSD License。 折れ線チャートを生成してくれるjQueryプラグイン、チェックしてぜひ使ってみてはいかがだろうか。 サイトをがしがし制作中。朝の6時頃までやってしまったが力尽きた。。でもかなり気分がいい。久々にいい夢も見た。 post、ページング、入力チェックが大体終わった。あとはデザインに移行していくよ、と。
PHPでクールなグラフを描画できるクラスライブラリ「pChart」:phpspot開発日誌
pChart | a PHP Charting library pChart is a PHP class oriented framework designed to create aliased charts.PHPでクールなグラフを描画できるクラスライブラリ「pChart」。 次のようなグラフが描画できます。（円、棒グラフなど） 色々と、グラフ描画ライブラリは存在しますが、こうした描画スタイルもいいですね。 関連エントリ GoogleChartsAPIをPHPから簡単に使える「GoogChart」 jQueryベースの滑らかなグラフ描画ライブラリ「Flot」 CSSだけで円グラフを表示するサンプル
フリーのグラフスクリプト１０個:phpspot開発日誌
10 Free Chart Scripts | WebTecker the latest Web Tech, Resources and News. This week I’ve been working on a project that required data to be shown visually. フリーのグラフスクリプト１０個が特集されてました。 JavaScriptやFlash製のグラフを使う際の選択肢として使えます。 Flot Open Flash Chart AmCharts Emprise JavaScript Charts PlotKit Flotr PHP/SWF Charts Visifire FusionCharts JFreeChart グラフを作る際にはこうしたツールを使えば一瞬ですね。 その他、グラフ関連エントリは以下 ピュアCSSでクールなグラフサン
HTMLで、FLASH Graph フラッシュグラフ｜XML/SWFライブラリーでグラフ作成サンプル｜XML/SWF Charts 使用
INDEX； HTML基本編 はじめに サンプルグラフ等 1.アプリケーションの構成 2.システム構成（環境） 3.グラフライブラリーXML/SWF Chartsのインストール 4.グラフの作成方法 5.出力フラッシュグラフ（結果） 6.Reference（XMLリファレンスマニュアル） リファレンス和訳 7.特記事項 CGI応用動的XML編 1.グラフ作成Webページ 2.データ定義動的XML >>サイト内グラフ関連リンク TARGET； XML/SWF Chartsでグラフを描く グラフ作成WebページはHTMLで作成く グラフデータ定義XMLは、静的に作成（CGIで動的に作る方法もある） グラフのテキスト等を日本語で表示する 発見？フォント指定のデフォルトは、日本語フォント？>>7.特記事項参照 確認できている日本語フォント(2007.1.18 Windows環境)；
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
小さくで可愛いグラフが描けるjQueryプラグイン「Piety」:phpspot開発日誌
IDEA * IDEA