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を呼び出すことで描画されます。 データはポケ
PHPでのグラフ画像作成 - akiraneko’s blog
現在グラフを描画する方法として、有名なものに以下の方法があります。 PHPによる画像生成 外部画像生成APIの利用 JavaScriptによる描画（Canvas） Flashによる描画 本当は外部APIを利用したかったのですが、Google Chart API(http://code.google.com/apis/chart/)は漢字が現在利用できません。 ひらがなは表示できているので、もう少したったら漢字にも対応しそうではあります。 次に検討したのがFlash。各種ライブラリがあってわりと使いやすいのですが、Firefoxとの相性がいまいちでした。 印刷などで使えないのと、リロードしたときに描画がおかしくなること。印刷時はどうやらFlashの１フレーム目などが描画し終わる前に印刷用の画像を内部で生成していると思われて真っ白の画面か、たまに画像が表示される状況で実用的ではありませんでした
JpGraph - 高性能なグラフ表示ライブラリ | アシアル株式会社
高性能なグラフ生成ライブラリ PHP5、PHP7、PHP8対応の高機能なグラフ生成ライブラリ 20種類以上の豊富なプロット形式をサポート 製品・サービス JpGraph4.xはPHP言語（PHP5.1から5.6、PHP7、PHP8）に対応した高機能なグラフ生成用ライブラリです。データベースと連動させ動的にグラフを描画することができることはもちろん、20種類以上のプロット形式をサポートしているため、あらゆるグラフ生成ニーズにお応えします。 JpGraphはPHPのオブジェクト指向機能を最大限に活用しているため、描きたいグラフを少ないコード量で簡単に作成できます 豊富なプロット形式であらゆるグラフニーズに対応 － 合計23種類 データベースに連動した動的なグラフ生成が可能 － 日々変化する数値に対応 少ないコード量で作成 － オブジェクト指向機能に沿ったタイプ QRコード、スパム対策にも対応
highcharts 使い方
「highchartsの使い方」の目次 2013/07/03 23:25 ここでは"highchartsの使い方"について書いた記事を紹介しています。 分かりずらい部分はあるかと思いますが、少しでも皆様のお役に立てることができれば幸いです。 ※highchartsは日々進化しています。過去記事の中で使えなくなっている機能・表現等あるかと思います。 そういう場合には、私にどこぞこが間違っている！とそっと教えて頂けると助かります。 1.highchartsのグラフをまずは表示させる方法 2.highchartsを無料ブログ(ここではFC2ブログ)に表示させる方法 3.highchartsの軸の設定方法 (グラフタイトル部分に「charts context menu」が多数表示され見にくい状態になっています。記事内のグラフ数に応じて「charts context menu」のボタンが自動的に増
work.log » Highcharts の応用メモ
Highcharts のちょっと高度な使い方です。 Highcharts を試す と Highcharts のメモ書き で基本的なことを書きましたが、 今回は下記の事をグラフで表現したいと思います。 その1. 長期間のグラフデータを表示 その2. 時には詳細な値も確認したい その3. 1 枚のグラフ上に複数の値を描画 サーバリソースの情報をグラフ化する場合は、MRTG が一般的ですが期間が経つと 値が丸められて詳細な情報がわからなくなるといった不満があります。 で、その不満を解消したグラフがコレです。 データは適当なのですが、100 を起点としたグラフを書いています。なので、100 のラインを赤で表示させてます。 基本的な部分は前回作成したグラフと大した変わりはないのですが、”Zoom” で 1ヶ月、 年単位などで表示させたり、”From” で期間指定をしたりグラフをスライドさせて
拡大可能な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で綺
dl要素を美しくデザインするスタイルシートのまとめ | コリス
実用的なものからちょっとトリッキーなものまで、dl要素を使った美しいデザインのスタイルシートを紹介します。 In Defence of the Definition List HTML <dl class="wrapper1"> <dt>News Item 1</dt> <dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec d
Animated 3D Bar Chart with CSS3 | Codrops
A tutorial on how to create an animated 3d bar chart using CSS only. It all began with a small experiment that was inspired by a tutorial from Nettuts+ which shows a way how to embed a 3D bar chart into HTML pages using CSS, images and JavaScript. After reading the tutorial I challenged myself to turn this idea into pure CSS and see how far I can take it. The initial challenge was to create a clas
リアルタイムなデータビジュアライズ「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」
TechCrunch | Startup and Technology News
Live Nation says its Ticketmaster subsidiary was hacked. A hacker claims to be selling 560 million customer records. An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Ov
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API
JpGraph サンプル集
Animated 3D Bar Chart with CSS3
Candlestick - JSFiddle - Code Playground