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
Javascriptでだけで手軽にグラフが書ける「CanvasJS」の使い方
Javascript「だけで」グラフを描く方法について。 「CanvasJS」というライブラリが便利だったので紹介します。jQueryのプラグインじゃないのが地味なポイント。 この記事のコードをコピペして必要な箇所を書き換えるだけでグラフが書けるようになってるので、いい感じに活用してくださいな。 ライブラリの読み込み <!-- headかグラフ挿入箇所の直前 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js">; </script>; canvasjsのトップページからダウンロードして配置することもできます。 その場合srcを配置した場所に変更してください。 グラフの描画 引数を渡してグラフインスタンスを作成し、renderを呼び出すことで描画されます。 データはポケ
拡大可能なGoogleAnalytics風のグラフを描画するJSライブラリ「envision」:phpspot開発日誌
envision - demos 拡大可能なGoogleAnalytics風のグラフを描画するJSライブラリ「envision」。 グラフの特定期間をドラッグ＆ドロップで指定して拡大したり、データのビジュアライズに便利に使えそうなライブラリです。 横に長いグラフだとデータを見るのが大変になりますが、期間をインタラクティブに限定することで見やすくすることが出来ます FlashによるフォールバックでIE6+にも対応しているようです 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル faviconを円グラフにしてアニメーションできる「Piecon」
jQuery＋HTML5でカッコいいアニメーションする円形グラフが描画できる「EASY PIE CHART」:phpspot開発日誌
EASY PIE CHART by rendro jQuery＋HTML5でカッコいいアニメーションする円形グラフが描画できる「EASY PIE CHART」。 次のようなカッコいいアニメーションするグラフを描画出来るライブラリです。 ダッシュボードなんかにパーセンテージを描画する場合なんかに使えそうですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル faviconを円グラフにしてアニメーションできる「Piecon」
CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル:phpspot開発日誌
How to Create an Interactive Graph using CSS3 & jQuery - DesignModo CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル。 次のような美しく、マウス操作でインタラクティブに動くグラフを実装するチュートリアルです。 とりあえずライブラリにまかせておけばよさそうなグラフではありますが、俺はグラフもデザインするぜ、という方はメモっておけばいつか参考にできそう ざっとソースを読んだらやっぱり大変なことになるわけで、ライブラリを作っている方に感謝しなければいけないと感じました。 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 HTML5で綺
リアルタイムなデータビジュアライズ「graphene」:phpspot開発日誌
graphene D3.jsというJavaScript製ビジュアライズライブラリと、JavaScriptのMVCライブラリであるBackbone.jsをベースとして作られていてgithubでソースが公開されています。 Chromeなどのブラウザで見てみるとリアルタイムにグラフが流れているのが分かります。 デモを見るだけでも楽しいんですが、サイトの管理ツール等色々と応用が効きそうだなというところですね 今後もこうしてWEBサイトはどんどんリアルタイムに動いていく物になっていくんでしょうね 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」
見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」:phpspot開発日誌
Morris.js 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」。 マウス位置に応じて情報を変えるなど、GoogleAnalytics風のインタラクティブなグラフが描画できます。 実際には次のようなグラフが描画できます。IE6+でも動くということで、そこら辺の心配も無しです サンプルコードも載っていたりするので簡単に使えそうです グラフの種類は線グラフのみですが、多機能すぎて馬鹿でかいよりもシンプルなのが逆にいいかもしれませんね。 関連エントリ HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」
HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」:phpspot開発日誌
Flotr2 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 次のような綺麗で多様なグラフを描画できるライブラリです。 グラフをクリックするとグラフのサンプル付きでjavascriptのサンプルコードが出てとっても使いやすい iOSでグラフが必要な際に１つの選択肢として。 関連エントリ 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」
様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」:phpspot開発日誌
RickShaw 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」。 カーソルを合わせるとインタラクティブにデータが表示されたりするグラフを描画出来ます。 デザイン性もなかなか良い感じ。 グラフの描画をリアルタイムに変更したりすることも可能。 カラースキームなんかも色々と選べるようです AjaxやJSONPによるデータ取得と描画も可能。 関連エントリ シネマグラフGIFアニメで驚きの効果を作成するPhotoshopチュートリアル 様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」 tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」
Open Hi Low Close and Candlestick Charts
OHLC, HLC and Candlestick charts are all created using the $.jqplot.OHLCRenderer plugin. The plots on this page make use of the highlighter plugin which shows a customized tooltip as the mouse moves over a data point. The previous plots use the following data set. jqPlot will parse most human readable date formats. It is always safest, however, to pass a date in as a JavaScript timestamp rather th
JS Charts - Free JavaScript charts
What is JS Charts? JS Charts is a JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare your chart data in XML, JSON or JavaScript Array and your chart is
Highcharts.js を使ってみた
最近IDEA*IDEAさんで取り上げられていたHighcharts.jsを試してみましたので、躓いた点などをメモしておきます。 ■公式サイト http://www.highcharts.com/ ダウンロード、更新履歴はこちらから見られます。ライセンスもこちらに記載があります。 個人利用、教育目的の利用、および非営利組織での利用については無料ですが、商用利用の際にはライセンスの購入（1サイト$80、複数サイト$360）が必要になるので注意です。 ■公式リファレンス http://www.highcharts.com/ref/ おそらく全部JSで実装されているのだと思いますが、凄いクオリティ高いです・・・ ■実際に導入してみて躓いたポイント 以下、すべてバージョン1.0.2（2009/12/09）での気づきです。 グラフを描画する領域のサイズは、CSSでは定義できない、直接style属性に書
tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」:phpspot開発日誌
Chartify ? A Visualization Plugin for jQuery tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」 <table>のデータを最小１行でGoogleのChart APIを使ってグラフ画像に変換してくれるみたいです。 マークアップ上では次のようなテーブルがあったとします。 プラグインを読み込んで .chartify します。色なんかも指定 すると次のようなグラフに変換されて表示されます。 HTML上にデータがかけてそれをグラフに変換してくれるのはなかなかいいですね。 関連エントリ 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 ドリルダウンなグラフを作成できるjQueryプラグイン「DDChart」 地下鉄の路線図を描けるjQueryプラグイン「Subway Map Visualization」
jQueryで折れ線グラフを表示してみる « エンジニアのためのUI改善講座
データで魅せよう 情報の見せ方には様々なものがありますが、グラフほど分かりやすく、直感的な情報の見せ方は無いと思っています。データの羅列はただそれだけの情報で、そこから新たな発想や推測を生み出すのは難しいでしょう。 グラフ表示というと、Flash系の技術でFlex等が得意なイメージがありますが、JavaScriptでも十分に実現可能です。今回はjQueryとHighchartsを使って、グラフ表示を実現します。 情報をただ見せるだけでは退屈です。「魅せて」いきましょう。 まずはグラフを見てみる グラフ描画の元データはこのJSONデータです。この中身が変わると、ダイナミックにグラフの内容も変化します。また、グラフの各頂点にマウスのポインタを当ててみて下さい。数値がツールチップ方式で表示されたかと思います。 このグラフが簡単に描けたら、UIは劇的に改善出来ますね！やってみましょう。 jQuer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API
Candlestick - JSFiddle - Code Playground
Candlestick Demo | Highcharts.com
formatter for candlestick chart - Highcharts official support forum
Edit fiddle - JSFiddle - Code Playground
小さくで可愛いグラフが描けるjQueryプラグイン「Piety」:phpspot開発日誌