JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた！ : うえぶはっく
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います！ 必要なファイルを準備しよう！ 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます！ // index.html <!d
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
NVD3
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizable, staying away from your standard cookie cutter solutions. View more examples » GitHub Repo Download d3.v3.js. This is the only required library for NVD3. Dow
C3.js | D3-based reusable chart library
Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can define a custom style by the class and it's possible to extend the structure directly by D3. Controllable C3 provides a variety of APIs and callbacks to access th
Rickshaw: A JavaScript toolkit for creating interactive time-series graphs
Rickshaw is a JavaScript toolkit for creating interactive time series graphs. Rickshaw on GitHub Graphing Toolkit Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together. See Demo → Built on d3.js It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Customize all you l
インタラクティブな時系列グラフを描くJavaScriptツールキット「Rickshaw」
あらかじめ決めておいたデータやリアルタイムに刻一刻と変化するデータをグラフ化する際に使いやすくできています。しかもグラフ作成の時に迷いがちなカラーリングについても、最初からいくつかきれいなカラーパレットが付属しているので迷うことなくグラフ化できます。 Rickshaw http://shutterstock.github.com/rickshaw/ D3 libraryをベースにし、1721万枚のロイヤリティフリーなストックフォトを有する「Shutterstock」が開発したグラフ用のJavaScriptツールキット・時系列グラフ用フレームワークとなっており、以下のようなグラフ作成が可能です。 通常のグラフ http://shutterstock.github.com/rickshaw/examples/start.html 右下のチェックマークによって各グラフのオンオフが可能、マウスがグ
インフォグラフィック& オンラインチャートを作成 | infogr.am
Start with our collection of designer templatesNever stare at a blank screen again. Our ready-to-use templates drive engagement, impress your audience, and look perfectly polished. Stay on brand with company guidelinesGet a custom template with your brand, colors, fonts, and logo. Empower everyone on your team to create branded visuals in minutes.
分布図（散布図）とバブルチャートの使い方とは？正しいグラフの見方（第7回） | データをざくざく処理するためのグラフの読み方、使い方
「データで表現したいことを、効果的にひと目でわからせるための、グラフの種類の選び方、作り方」を紹介する本連載。これまでに「1つのグラフには1つの主張」という考え方をベースにして、「4つのグラフの使い分けポイント」「円グラフ」「棒グラフ」「折れ線グラフ」「2軸グラフ」の作成ポイントと注意点を順に解説してきました。今回は散布図とバブルチャートをご紹介して、本連載の最終回とします。 項目間・指標間の関係性を見るグラフまず第2回でご紹介したグラフを再掲載します。これはある媒体のバナー広告のインプレッション数とリーチ（累積到達率）を広告素材ごとにプロットしたグラフです。1つの点がそれぞれ1つの広告素材のインプレッション数とリーチを表しています。たとえば、一番右上にある点として表現された広告素材だと、リーチ数が約320万人で約 1.8億インプレッション表示されたということを意味します。このように散布図
YouTubeのようなグラフ共有サイト「Vizoo」 | ライフハッカー・ジャパン
今回ご紹介する「vizoo」は専門的で難解と思われがちな経済統計や企業決算などのデータを、誰でも簡単に可視化・分析できるまったく新しいグラフ作成・共有サイトです。 従来、Webに公開されている経済データを調べたり資料作成するには、それらを手作業で収集・加工する必要がありました。でも、「vizoo」はデータベースに情報があらかじめ登録してあって、検索バーで検索するだけで自動的に情報が得ることができるんです。 例えば、仕事で市場の資料作成などが必要になった時、毎日新聞を熟読したり、ネットの上場企業のデータを収集したり、結構みなさん地道な作業をする必要があると思います。でも明日までに資料を作らなくちゃいけない人やすぐに市場を把握したいなんて時には、経済統計、企業データの収集の非効率さ、難解さって、大きな障害ですよね。 「vizoo」は簡単です。Yahoo!ファイナンス以上の豊富なデータから、検索
新感覚フォント。数字と足し算からグラフを生成「FF Chartwell」 | ビジュアルシンキング
変わったフォント「FF Chartwell」を紹介します。 数字と足し算からグラフを生成できます。 AdobeのIllustrator、InDesign、Photoshopで使えるようで（参考）、フォントとして「FF Chartwell」を選び、テキストに足し算を打ち込んで変換をかけるとグラフになります。 グラフ生成手順は言葉で書くよりも、プロモーション・ムービーを見た方がわかりやすいと思います。 使う文字は、数字と足し算だけのようですね。 美しいグラフが簡単に描けそうです。 「FF Chartwell」フォントは全部で7種類あり、それぞれ対応するグラフが異なります。 フォント・レーベル「FontFont」がこちらで販売しています（1種類 $25）。
ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」:phpspot開発日誌
sigma.js | a lightweight JavaScript graph drawing library ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」。 HTML5 canvasベースのスタンドアロンライブラリだそうです。マウスでドラッグしたりマウス位置に応じてインタラクティブに変化させることができます。 次のようにグラフィックが美麗であるので、個人的にはグラフィック作成用途に使っちゃってもいい気がしました。 関連エントリ 複数要素の関連をビジュアライズできるライブラリ「arbor.js」 HTML5のキャンバスと連動させて音声をビジュアライズしたデモ 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」
NVD3
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizable, staying away from your standard cookie cutter solutions. View more examples » GitHub Repo Download d3.v3.js. This is the only required library for NVD3. Dow
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chart.js
iCharts
https://labs.juiceanalytics.com/chartchooser/index.html