Chart Fuse | Get Started
Embeddable charts for any website Quickly add interactive charts and graphs to a blog post or static web page, 100% free with no user registration. Quickstart Step 1 - Prepare your Data Create a Google Sheet and set the sharing permissions to "anyone with the link can view." Add your data like below, with a header of labels and as many columns and rows as you'd like. (Your data may be single or mu
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」
Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく見かける一般的なチャートやこれらのマルチデータ、パーセンテージや積み上げ式、3Dなど様々なビジュアライズも対応されています。 少しクセがある印象ですが、慣れれば問題なさそうでした。HTML形式のデータに対応する場合にあると作業がかなり楽になりそうですね。 動作サンプル及び簡単に使い方のご紹介です。基本的にはtableが使われ、classを付与する事でビジュアライズされます。 <table class="charts-css"> ... </table>単なるtableをビジュアライズするにはCharts.cssを読み込んだうえで上記のようにcharts-cssというclassを付与します
ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz
手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図
手書き風のチャートを実装できる非依存のJavaScriptライブラリ・「roughViz.js」
roughViz.jsは手書き風のチャートを作成できる非依存のJSライブラリです 他ライブラリを必要とせず単体で動作してくれます。チャートの種類も棒チャートやドーナツ、散布図、円チャート、折れ線などよく使われるものに対応されており、今後も増える予定があるそうです 実装方法も手軽で簡単、CSVにも対応しています 動作テスト 動作サンプルです。開発者さんが用意していたものをお借りしました。簡単に使えるので手書きじゃなくても便利そう <script src="https://unpkg.com/rough-viz@1.0.4"></script>↑ スクリプトを読み込みます。CDNあるのでまずはこれを使って試すとよさそうですね new roughViz.BarH( { element: '#vis0', title: "SNS foo bar", titleFontSize: '1.5rem',
編集できる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-
簡単にレポートを作成できる「Googleデータスタジオ」を使ってみた
さまざまなデータをグラフや表で分かりやすく表示するためのツールはいろいろありますが、その中の一つが「Googleデータスタジオ」です。Googleが作ったサービスという利点を生かし、GoogleアナリティクスやAdWordsなど同じGoogle製のサービスとの連携が簡単ということで、実際にGoogleアナリティクスとの連携を試してみました。 データスタジオ（ベータ版） | データの視覚化とレポートの作成 | 無料版を試す - Google https://www.google.com/analytics/data-studio/ まずはGoogleデータスタジオのページへ行き、「無料版を試す」をクリックします。 Googleにログインします。ログインしたいアカウントをクリックして…… パスワードを入力し、「次へ」をクリック。 Googleデータスタジオを使えるようになりました。「空白」をク
billboard.js - インタラクティブ、プログラマブルなグラフライブラリ MOONGIFT
HTML5の表現力を活かすにはJavaScriptの活用が欠かせません。SVGやCanvasを使って図を描画することはできますが、JavaScriptを組み合わせることでよりインタラクティブにしたり、マウスイベントを使ったりできます。 今回紹介するのはbillboard.js、JavaScript製の再利用が容易なグラフライブラリです。 billboard.jsの使い方 グラフの一例です。 データをフィルタリングすると、他のデータが薄くなります。 折れ線グラフ。 タイムシリーズ。 曲線グラフ。 X軸の座標が異なるグラフ。 ステップグラフ。 エリアグラフ。 積み上げ型のエリアグラフ。 棒グラフ。 積み上げ型の棒グラフ。 散布図。 円グラフ。 ドーナッツグラフ。 ゲージグラフ。 複数のグラフの組み合わせ。 サブグラフ。 billboard.jsは表示に際してD3を使っています。そして、Java
Chartkick.js - 多数のグラフに対応したラッパーライブラリ MOONGIFT
Webシステムで一番苦労させられるのがグラフではないでしょうか。HTMLの表現力が上がったと言っても、コードを書かなければなりません。特にグラフやチャートになるとコード量も増えがちです。 そこで使ってみたいのがChartkick.jsです。多くのパターンに対応したクライアントサイドのグラフライブラリです。 Chartkick.jsの使い方 曲線のグラフ。 円グラフ。 ドーナッツグラフ。 棒グラフ。 横型。 エリアグラフ。 点だけのグラフ。 バブルチャート。 複数の要素を同時に。 横棒グラフでもできます。 横棒グラフで積み上げ型。 複数の要素でかつグルーピング。 色を変えた円グラフ。 データが一定でない要素同士でも。 10分ごとといった細かい単位でも。 細かい横棒グラフ。 Chartkick.jsは Chart.js、GoogleチャートそしてHighchartsに対応しており、これらのグラ
Create interactive jQuery Charts and Graphs with FusionCharts
Create Interactive Charts with the FusionCharts jQuery Plugin Use FusionCharts to create Gantt, Line, Pie, Area, and 150 other charts for your web application. Compatible with Bootstrap and jQuery UI, create interactive and responsive charts, support zooming, panning, APIs, animation, real-time updates, and drill-downs. A jQuery plugin is a code written in JavaScript that extends the functionality
Gipeda - Gitリポジトリのログを静的HTML化
プログラマーのパフォーマンスを測る一番のツールはバージョン管理のリポジトリを見ることです。コード量を増やせばいいわけではありませんが、日々のコーディング結果が反映されるのは間違いなくリポジトリです。 そこで使ってみたいのがGipedaです。GitHubに限らず、そのコミット歴などを可視化してくれるツールになります。 Gipedaの使い方 Gipedaは静的なHTMLファイルを生成します。 コミット一覧をクリックすると、変更したファイルの内容が分かります。 コミット履歴のグラフ化もできます。 Gipedaはローカルで使えますのでGitHub以外はもちろん、オフラインでも使えるのが利点になります。また、静的なファイルを生成するので任意のサイトにホスティングすることができます。 GipedaはPerl製のオープンソース・ソフトウェア（MIT License）です。 Gipeda itself –
cssCharts.js - スタイルシートでグラフを描画 MOONGIFT
HTML5によってWebの表現力は高まっています。特にSVGやCanvasを使えば高度なグラフィックが描けます。ただし使いこなすのはそうそう簡単ではありません。そのため、まだまだスタイルシートの活躍の場はとても多いです。 そこで使ってみたいのがcssCharts.jsです。スタイルシートとJavaScriptを使って作られたグラフライブラリで、簡単に使いこなせるのが大きな利点です。 cssCharts.jsの使い方 cssCharts.jsの描けるグラフです。まずは棒グラフ。 次はドーナッツグラフ。 ドーナッツグラフの2つの値版。 さらに中央を塗りつぶしたバージョン。 次に折れ線グラフ。 塗りつぶしをなくした版。 もっとシンプルに。 そしてポイントも取り除いた版。 最後にパイチャート。 オンマウスでタイトルを表示することもできます。 例えば棒グラフの場合は次のように指定します。 <!--
Chartinator
About Chartinator Chartinator - Google Charts made easier and accessible. Description: A jQuery plugin for transforming HTML tables, Google Sheets and js arrays into charts using Google Charts Repository: https://github.com/jbowyers/chartinator Demo: http://chartinator.com Bower: chartinator Requires: jQuery, Google Charts Author: jbowyers Copyright: 2015 jbowyers License: GPLv3 Version: 0.3.10 De
MetricsGraphics.js - Examples
Home Download Interactive Code Issues | Light style Dark style Accessible style Lines Multiple Lines Data Axes Rollovers Automatic time formatting Annotations Updating Other Brushing & Zooming Experimental Created by Ali Almossawi, Hamilton Ulmer — Metrics at Mozilla Shared under the Mozilla Public License.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS製の円グラフを手軽に作れるWebアプリ・「CSS Pie Chart Generator」
Chart Maker for busy people | Chartify
https://picassojs.com/
GUDANG138 - Link Official Slot88 Resmi Dan Bukti Member Mudah Maxwin
Canvasベースのグラフを描けるjQueryスクリプト・「Flot」
Googleスプレッドシートのデータを元にチャートや地図、table等に変換するスクリプト・「Sheetsee.js」
ブラウザ上で手軽にチャートを作成、公開出来るWebサービス・「 ChartBlocks」
