Flexible javascript charting library for data exploration.Designed with passion and taste :)
Taucharts flexible javascript charting library for data exploration
Flexible javascript charting library for data exploration.Designed with passion and taste :)
ECharts - 多種多様な表現に対応したグラフ/チャートライブラリ MOONGIFT
Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。 そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパターンの用意されたチャートライブラリです。 EChartsの使い方 今回はその多様なグラフ、チャートを紹介します。 曲線のグラフ。 積み上げグラフ。 棒グラフ。 エリアグラフ。 曲線。かなり複雑です。 こちらもユニークです。途中で途切れています。 棒グラフですが、範囲が指定できています。 左右の比較グラフ。 複数グループの棒グラフ。 散布図。 こちらも散布図。 画像も合わせた表示。 散布図と色の組み合わせ。 ローソクチャート。 円グラフ。 より描画にこだわった円グラフ。 レー
簡単にリッチなチャートが作れるC3.jsを使ってみた - undefined
C3.jsとは? C3.js | D3-based reusable chart library C3 はチャートに特化したビジュアライゼーションライブラリです。D3 のラッパーライブラリで、D3 の見た目の美しさやインタラクション性などの特徴を残しながら、チャートライブラリとして分かりやすいインターフェースを提供するという方針で開発を進めています。 http://blog.xica-inc.com/about-xica/member-12/ これはまではhighchart.jsを使っていましたが、商用利用は有償だったりするので今回C3.jsをいじってみます。 サンプル どんなチャートが作れるか以下のサンプルを見れば分かります。 C3.js | D3-based reusable chart library 使ってみる 音ゲーなどではゲーム終了時にスコアの軌跡がグラフとして描画されたりしま
dc.js - Dimensional Charting Javascript Library
dc.js is a javascript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter's demo). It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive and therefore provide instant feedback to user interaction. dc.js is an easy yet powerful javascript l
データ可視化のためのグラフ描画JavaScriptライブラリ20選 | ゆっくりと…
SixRevisionsでオンラインでグラフを描画する場合に活躍しそうなJavaScriptライブラリの特集がありましたので、紹介します。個人サイトではあまり役に立たないかもしれませんが、観ているだけで楽しくなります。元記事に敬意を表し、なるべく趣旨が異ならずかつ変な日本語にならないよう心がけたつもりですが、訳に間違えがありましたら容赦願います。 2010年1月17日 by Jacob Gube 退屈な数値データを美麗かつインタラクティブに解り易く可視化するためのJavaScriptライブラリは数多くあります。通常はHTMLテーブルで表現するデータを、JavaScriptを使って可視化し美しく見せる事ができればあなたのデータはアクセシビリティーの優れたものとなるでしょう。私は2008年にデータのグラフ化＆チャート化のためのJavaScriptを書き上げましたが、今回再び単なるデータに生命を
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
Post/jquery bullet graph - dingsdax
jQuery Bullet Graph A jQuery plugin, turning a html select element into a bullet graph slider. Bullet graphs, developed by Stephen Few, feature a single primary measure, a comparative measure. These measures are displayed in the context of qualitative and quantitative measures. Additionally the qualitative ranges are displayed as varying intensities of a single hue to make them discernible. This p
jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」:phpspot開発日誌
Post/jquery bullet graph - dingsdax jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」 select エレメントをプラグインで初期化すると次のようなグラフが描画できます。 棒グラフを細分化して使い方次第で情報を分かりやすく表示できます。 売上等のパフォーマンスを分類して目標ラインに到達しているかどうか、といった表示をする際に使えそう 関連エントリ テーブルをグラフに変換してくれるjQueryプラグイン CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 クールなドアノブ風の％グラフを描画できるjQuery Knob
グラフ描くならMorris.jsがお手軽で良いかも - (ﾟ∀ﾟ)o彡 sasata299's blog
2012年11月16日13:55 JavaScript Ruby グラフ描くならMorris.jsがお手軽で良いかも こんにちわ。寒くなってきましたがみなさまお元気ですか？ さて、先日ちょっとしたグラフを描画したかったんですよ。それでなにか使いやすいライブラリ無いかなーと思っていたら railscast (revisedなので有料です) で Morris.js ってjQueryプラグインが紹介されてて良さげだったので使ってみました。google analytics みたいなツールチップも出してくれます。 使い方はとっても簡単です。 まず、jQuery (>=1.7) と Raphael (>=2.0) が必要です。あとは Morris.js があれば動作します。 これらを app/assets/javascripts/application.js に設定してください。この記事執筆時点での
Eegraph - 美しいグラフが簡単に作成できる！グラフ作成サービス
Step1.タイトルを入力 グラフのタイトルを入力します。管理しやすいようにタグの入力も可能です。作成したグラフは、タイトル、タグからグラフを検索することができます。 Step2.データを入力 グラフデータを入力します。グラフデータはCSV、TSV形式に対応しています。CSV、TSVファイルをアップロードもしくは、エクセルなどのスプレッドシートからデータをコピー＆ペーストでグラフデータを入力できます。 Step3.グラフのテーマと種類を選択 グラフのテーマと種類を選択します。グラフのテーマは、「white」「grid」「dark-blue」「dark-green」「dark-unica」の5テーマ、グラフの種類は、「棒グラフ」4種類、「線グラフ」2種類、「面グラフ」4種類、「円グラフ」3種類、グラフの色は4パターンから選べます。
Web Graphical Platform
2012年5月9日 Acroquest Technology、HTML5+CSS3+JavaScriptによる グラフィカルなWebUIを開発するためのプラットフォーム 「Web Graphical Platform」をオープンソースとして公開 ネットワークインフラ向けにミッションクリティカルシステム開発／コンサルティングを行うAcroquest Technology株式会社（以降、Acroquest）は、2012年5月9日、HTML5+CSS3+JavaScriptによるグラフィカルなWebUIを開発するためのプラットフォーム「Web Graphical Platform（以降、WGP）Ver. 0.1」をオープンソースとして公開しました。 WGPは、当社の製品であるENdoSnipe（※1）の運用監視機能であるDashboardを実現する基盤として開発したものです。WGPはjQuery
Modern Syntax
写真家のエイリク・ソルヘイムさんがノルウェーの森を1年かけて撮影した静止画を使って作られたビデオで、森の変化を40秒にまとめています。 このビデオを観ると春が楽しみになってきますし、夏が懐かしく思えますし、ああ秋はやっぱりいいなあと思うわけです。 このビデオ、15年前に公開されこれまで357万回も再生されています。
JavaScriptグラフライブラリHighchartsをPHPから使いやすくする·HighRoller MOONGIFT
HighRollerはJavaScriptのグラフライブラリHighchartsをPHPでラッピングしたソフトウェアです。 非商用であれば無料で使えるCanvasタグベースのグラフ表示ライブラリがHighchartsです。そんなHighchartsをPHPから使いやすくしてくれるライブラリがHighRollerになります。 グラフのサンプルです。円グラフ。 棒グラフ。円グラフの項目にマウスを当てるとフローティングが表示されます。 横および縦の棒グラフ。 折れ線グラフと曲線のグラフ。 エリアグラフも折れ線および曲線でも。 プロットだけのグラフもできます。 タイトルに日本語を使うこともできます。 jQuery版の他、Mootools版も。 利用法。requireするファイルが多数あります。 円グラフの描き方。とても簡単です。 折れ線グラフ。こちらも同じくらいシンプルです。 HighRoller
様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」:phpspot開発日誌
RickShaw 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」。 カーソルを合わせるとインタラクティブにデータが表示されたりするグラフを描画出来ます。 デザイン性もなかなか良い感じ。 グラフの描画をリアルタイムに変更したりすることも可能。 カラースキームなんかも色々と選べるようです AjaxやJSONPによるデータ取得と描画も可能。 関連エントリ シネマグラフGIFアニメで驚きの効果を作成するPhotoshopチュートリアル 様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」 tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」
GrowthForecastというグラフ表示ツールで捗る話 - blog.nomadscafe.jp
追記 2012/06/22 公式ページを作りました。そちらも参考にしてくださいませ GrowthForecast - Lightning fast Graphing / Visualization http://kazeburo.github.com/GrowthForecast/ Kansai.pmのLTでも紹介したんだけど、APIを叩く事でグラフを更新するツールを書きました。話の発端としては「cloudforecastのグラフを外からAPIで更新したい」ということでしたが、cloudforecastではグラフの追加が重い処理になってしまうので、別のプロダクトとしています。 サーバの負荷などのメトリクスを収集し、グラフ化することで、システムに掛かっている負荷を把握し、パフォーマンスに影響がでるまえに対策をうったり、改善の結果を知る事ができますが、同じ事はシステムだけではなく提供しているサ
paper.jsでインタラクティブなグラフを描こう - Preferred Networks Research & Development
canvasベースのベクターグラフィクス描画用jsライブラリとして、既に各所で紹介されているpaper.jsですが、これを、ウェブに載せるグラフの描画に使ってみましょう、というお話です。 paper.jsではパスをつくって描画をしつつ、パスに対するhit testも可能ですし、アニメーションも実装することができます。プロジェクトサイトではオシャレなサンプルが多数掲載されていて、paper.jsで何ができそうなのかを簡単にざっくりと知ることが出来ます。 javascriptでインタラクティブなグラフを、というとGoogle Chart Toolsなど、既存のグラフ用ライブラリを使って簡単に済ませることもできますが、ひと手間加えて独自性のある表現を出したい場合は、paper.jsのようなライブラリを使ってみると良いかと思います。 試しにpaper.jsの学習がてら、下記リンク先にあるような棒グ
サイト内でカウントダウンできるjQueryプラグイン「Pietimer」 | Web活メモ帳
サイト内でカウントダウンする際に使えそうなjQueryプラグインをみつけたのでご紹介。 「Pietimer」を使うと残り時間を視覚的に表示する事ができるようになります。 使い方 使い方は簡単で以下のように時間、色、高さ、横幅を指定するだけです。 $('#element').pietimer({ seconds: 10, colour: 'rgba(0, 0, 0, 0.8)', height: 100, width: 100 }, function(){ alert('10秒経過しました。'); }); 第2引数でcallback関数を指定する事もできます。 アイデア次第で色々使えそうですね。 使ってみたい方は下のリンクからどうぞ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
小さくで可愛いグラフが描けるjQueryプラグイン「Piety」:phpspot開発日誌
Canvasで作るグラフライブラリ「canvasXpress」 | Web活メモ帳
