Our core library. Includes all standard chart types and more.
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
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
JSON形式で値を指定すれば自動的にグラフが生成されるサイト「Tinychart」 | ライフハッカー・ジャパン
「Tinychart」はJSON形式で値を指定するだけで自動的にグラフが生成されるサイトです。値をウェブ上で指定するとグラフがリアルタイムに生成されます。生成したグラフはPNG形式の画像として保存することができますよ。 以下に使ってみた様子を載せておきます。まずTinychartへアクセスしましょう。 左側で値のセットができます。テーブル形式とJSON形式の2パターンが選べますので好きな方を使ってみましょう。右側のグラフはリアルタイムに更新されます。曲線グラフと棒グラフの2種類が選べますよ。 また、作成したグラフはPNG形式の画像としてダウンロードすることができます。ささっとグラフを書いて画像として保存したいときに便利ですね。 Tinychart （カメきち）
[JS]ちょっとかっこいい円グラフをウェブページに簡単に設置できるスクリプト -EASY PIE CHART
シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART [ad#ad-2] EASY PIE CHARTの使い方 実装は、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 外部ファイルはhead内に記述してください。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> <link rel="styl
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
様々なグラフを描画できる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
Javascript ライブラリー - HTML5.JP
HTML5.JPオリジナルのJavaScriptライブラリを公開していきます。ご自由にライブラリをダウンロードして貴サイトにてご活用ください。 <meter> polyfill (jQuery プラグイン) <meter> polyfill は、HTML5 で新たに導入された meter 要素をサポートしていないブラウザーでも meter 要素がレンダリングされるようにする jQuery プラグインです。Chrome や Opera など、すでに meter 要素をサポートしているブラウザーには何も作用しません。このプラグインは、Internet Explorer 6, 7, 8, 9 でも動作します。 html5detector (Google Chrome Extentions) html5detector は、表示されているページが HTML5 でマークアップされていれば、アドレスバ
[JS]複雑なグラフも簡単に描けるCanvasを使ったスクリプト -Protovis
棒グラフ、折れ線グラフ、エリアグラフ、パイチャート、インラインに配置できるグラフなど単純なものから複雑なものまで簡単に描けるスクリプト「Protovis」を紹介します。
MOONGIFT: » 要チェック！テーブルからグラフを生成するJavaScriptライブラリ「Bluff」:オープンソースを毎日紹介
※ 画像は公式サイトのデモより これは面白い発想だ。Web上でグラフを作成、表示するライブラリは数多く存在する。その際に使う方式としては、基準になる点をXY軸それぞれに対して追加し、描画するという方式だ。これはプログラム言語にとっては簡単な方式かも知れない。 JavaScriptだけで画像グラフを生成する だが、使い慣れている表計算ソフトウェアの場合はどうだろう。はじめに表があり、そこからデータを読み取ってグラフを描くようになっている。その慣れた方式を使えるのがこちらのライブラリだ。 今回紹介するオープンソース・ソフトウェアはBluff、グラフ描画ライブラリだ。 BluffはJavaScriptのライブラリで、画像形式（PNG）のグラフを生成する。棒グラフ、円グラフ、エリアグラフ、折れ線グラフなど様々なグラフ形式をサポートしている。背景色を変えたり、複数のデータを描画できるなど多機能なライ
フリーのグラフスクリプト１０個: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でクールなグラフサン
データが分かりやすい、グラフやチャートにする10のスクリプト | コリス
WebTeckerのエントリーから、JavaScript, Flash, Silverlight, PHPなどを使用して、グラフやチャートなどにデータをビジュアル化するスクリプトの紹介です。
MOONGIFT: » JavaScriptによる多彩なグラフライブラリ「LT Diagram Builder」:オープンソースを毎日紹介
Webページ上でグラフを描くというと、各種画像生成ライブラリを利用するだろうか。画像は手軽な反面、ダイナミックな生成ができず面倒な場合がある。 ダイナミックに描画を変更できると言えば、JavaScriptが便利だろう。そのようなニーズではこれを試してみよう。 今回紹介するオープンソース・ソフトウェアはLT Diagram Builder、JavaScriptベースのグラフ生成ライブラリだ。 LT Diagram Builderが対応しているのは棒グラフ、折れ線グラフ、関数グラフ、矢印、円グラフ、ガントチャート等多彩な描画に対応している。 ダイナミックな描画にも対応しており、関数の値を変更すれば、即座にグラフに反映する事ができる。JavaScriptの強みだろう。 また、PHPやASPでのグラフ生成にも対応している。結果的に出力されるのはJavaScriptのようだが、サーバサイドのデータを
MOONGIFT: » PHPでグラフを作るなら「Image_Graph」:オープンソースを毎日紹介
DB内に蓄えたデータは何のためにあるか。それは何らかの出力を行うためにある。HTMLなのか、メールなのか、CSVやPDF…種類は様々だが、結果的にデータは出力されるために存在する。 出力形態の一つにはグラフも存在する。意外と面倒なプログラムからのグラフ出力、専用のライブラリを使って手軽に作成してみよう。 今回紹介するオープンソース・ソフトウェアはImage_Graph、PHPでグラフを作成するPEARライブラリだ。 Image_Graphは元々、GraPHPiteというライブラリで、PEARへの登録を行う上でImage_Graphに名前が変わったようだ。公式サイトには数多くのサンプルが掲載されているのでぜひ見てみて欲しい。 直線的なものや滑らかな曲線のもの、二軸のグラフや複数の種類のグラフを重ねることもできる。また、背景は単色だけでなく画像を指定してすかして表示する事も可能だ。尚、利用には
Flash,JavaScript,CSS,PHPでグラフ作成のためのライブラリ色々:phpspot開発日誌
16 librairies et scripts pour g・・er des graphiques sur Internet | Simple Entrepreneur Flash,JavaScript,CSS,PHPでグラフ作成のためのライブラリ色々。 Flash amCharts Maani JavaScript EJSChart PlotKit AjaxMGraph CSS Css For Bar Graphs Vertical Bar Graphs with Css and Php Bargraph Dynamic Pie Chart with Css Css Vertical Bar Graphs Displaying percentages グラフ画像生成ライブラリ JFreeChart Artichow JpGraph Chart Director Graphviz Ima
Ajax・CSS・PHPで簡単に棒グラフが作成できる『Ajax MGraph』
AjaxMGraph まずは上記サイトへ行きセットファイルをダウンロードしよう。 ここから少し注意点があり、上記セットファイルにないJsファイルを手に入れよう。 画面中央からでもダウンロード可能ですし、prototype.js←ここからでもダウンロード可能です。 ダウンロードしたprototype.jpはセットファイルのフォルダに入れておこう。 ダウンロードしたらまず 『number_generator.php』を開き $data['num'][0]=43; $data['num'][1]=33; $data['num'][2]=23; $data['num'][3]=33; $data['num'][4]=43; $data['num'][5]=53; $data['num'][6]=63; $data['num'][7]=73; $data['num'][8]=83; $data['n
amCharts: customizable flash Pie & Doughnut chart
Pie charts are the most commonly used chart type to represent qualitative data (values in relation to the whole). amCharts has an extensive support for various pie chart sub-types and configuration options. This demo shows the most basic and commonly used implementation of pie chart. Key implementation details We create an instance of PieChart and add PieSeries to it with data fields configured. A
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
startapp.jp
Site Under Maintenance
ウェブでかっこいいグラフを描くためのライブラリやらテクニックやらのまとめ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
