編集できるtableと、その入力値に連動した簡易的なグラフ
Result 編集はcontenteditable属性を使っています。 動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください jQueryvar vis = function(e) { var count = $(e).children('td').not(':first-of-type').length; var width = $('.chart').height(); var barwidth = (width/count)-10; var heighest = 0; var chartTitle = $('th:first-of-type').html(); var tableTitle = $('.table-title').html(); var chartTitleVal = $(e).children('td:first-of-
Chartkick.js - 多数のグラフに対応したラッパーライブラリ MOONGIFT
Webシステムで一番苦労させられるのがグラフではないでしょうか。HTMLの表現力が上がったと言っても、コードを書かなければなりません。特にグラフやチャートになるとコード量も増えがちです。 そこで使ってみたいのがChartkick.jsです。多くのパターンに対応したクライアントサイドのグラフライブラリです。 Chartkick.jsの使い方 曲線のグラフ。 円グラフ。 ドーナッツグラフ。 棒グラフ。 横型。 エリアグラフ。 点だけのグラフ。 バブルチャート。 複数の要素を同時に。 横棒グラフでもできます。 横棒グラフで積み上げ型。 複数の要素でかつグルーピング。 色を変えた円グラフ。 データが一定でない要素同士でも。 10分ごとといった細かい単位でも。 細かい横棒グラフ。 Chartkick.jsは Chart.js、GoogleチャートそしてHighchartsに対応しており、これらのグラ
plotly.js - 3Dまでこなす高度なグラフライブラリ MOONGIFT
Webに足りないのは高度な表現力と言われていますが、HTML5のSVGやCanvasによって大幅に向上しています。しかし、それらを使いこなしたり、プログラミングと組み合わせるのは大変です。 そこでライブラリを使って手軽に表現力を増してみましょう。今回はグラフライブラリのplotly.jsを紹介します。 plotly.jsの使い方 サンプルです。マウスオーバーにも対応しており、ハイレベルな描画ができます。 マウスで囲んでズームできます。 こんなグラフまで。 データの幅から平均値を使ってトレンドを見ることができます。 この淡い感じがすごいですね。 WebGLを使った3Dグラフにも対応しています。 基本的なグラフにももちろん対応しています。 複雑かつ使われる機会も多いグラフ。 地図やローソクチャート。 3Dチャートは使いこなすのが難しそうですが、インパクトがありますね。 plotly.jsはグラ
cssCharts.js - スタイルシートでグラフを描画 MOONGIFT
HTML5によってWebの表現力は高まっています。特にSVGやCanvasを使えば高度なグラフィックが描けます。ただし使いこなすのはそうそう簡単ではありません。そのため、まだまだスタイルシートの活躍の場はとても多いです。 そこで使ってみたいのがcssCharts.jsです。スタイルシートとJavaScriptを使って作られたグラフライブラリで、簡単に使いこなせるのが大きな利点です。 cssCharts.jsの使い方 cssCharts.jsの描けるグラフです。まずは棒グラフ。 次はドーナッツグラフ。 ドーナッツグラフの2つの値版。 さらに中央を塗りつぶしたバージョン。 次に折れ線グラフ。 塗りつぶしをなくした版。 もっとシンプルに。 そしてポイントも取り除いた版。 最後にパイチャート。 オンマウスでタイトルを表示することもできます。 例えば棒グラフの場合は次のように指定します。 <!--
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」:phpspot開発日誌
AwesomeChartJS HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 データは配列で定義してdrawするだけです。描画コードは次のように美しい。 var mychart = new AwesomeChart('canvas1'); mychart.title = "Product Sales - 2010"; mychart.data = [1532, 3251, 3460, 1180, 6543]; mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"]; mychart.draw(); IEではフォールバックされていないため動作しませんがiPhoneなどのcanvasタグ対応ブラウザをターゲットとするなら便利に使えそう 関連エントリ Ja
humble software development - finance
HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on http://finance.google.com/. The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. It can be used to display any two 2-D data sets of real numerical data which share an axis. Demo: This demo displays historical stock
Canvasを使用してインタラクティブで高機能なグラフを描くライブラリ -RGraph
棒グラフ 機能：ツールチップ、コンテクストメニュー、ズーム スタイルのバリエーションも豊富で、デモページには多くのグラフが掲載されています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvasベースのグラフを描けるjQueryスクリプト・「Flot」
Chart.js
IDEA * IDEA
[JS]美しい曲線を使ったチャート・グラフが描けるHTML5 Canvasを使ったスクリプト -Flotr2