Chart.jsで作成する折れ線グラフの実例
たまに必要に迫られて、ブラウザで完結するように生のJavaScriptを書くことがあります。 今回はそんなシンプルな構成でも案外きれいなUIを作成するのに役立つグラフ作成ライブラリ、Chart.jsについてメモしておきます。 機能の豊富さとコーディングの簡潔さは往々にしてトレードオフなので、ライブラリの選択が重要ですね。 D3ほど高機能でなくてもいいが、できるだけ簡単にグラフを書きたい、という時に扱いやすい（と個人的に思っている）ライブラリです。 ■ シンプルな記述 ■ よく使われるような種類のグラフなら標準の機能だけでも作成できる ■ (ちょっとサイズが大きいが)ファイルひとつで動く ■ デフォルトでアニメーション(パフォーマンス要件が厳しければ無効化することもできる) もくじ： Chart.jsの設置 基本の折れ線グラフ 線のスタイル 線の色と背景色 破線 直線 ステップ 点 欠損値
JSDoc：メインページ - リファレンス メモ
トップ 言語 等 CSS HTML JavaScript Python ライブラリ・プラットフォーム jQuery micro:bit Xamarin ドキュメンテーション Doxygen JSDoc Markdown SHFB (Sandcastle Help File Builder) XML ドキュメント コメント その他 各種資料 子サイト・SNS 簡易リファレンス・Tips Facebook X サポート寄付 JSDoc (起動・タグ一覧)メイン メモ 起動 起動オプション タグ一覧 外部ファイルコンフィグファイル (-c・--configure) パッケージファイル (-P・--package) READMEファイル (-R・--readme) テンプレート (-t・--template) チュートリアルファイル (-u・--tutorials) マークダウン(Markdown
Google Charts サンプル
https://www.itdashboard.go.jp/PublicApi/getData.json?dataset=BasicInformation&year=2014&field=organization&option=count グラフ作成手順 環境準備 jQueryとGoogle Chartsを利用するための<script>タグを記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> パッケージ読み込みとコールバック グラフ作成に必要なパッケージを
google chartsで横軸が日時なグラフを作成する
google charsで横軸(x軸)が時間軸になるようなグラフの作成方法のメモです。 データタイプによって24時間表記のみか日付+時間かのどちらかを選択可能です。 DataType:datetime DataType:date ソースコード デモ <!doctype html> <html> <head> <meta charset="utf-8" content=""> <title>google-charts 横軸が日時なグラフ</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script> <script type="text/javascript" src="https://www.google.com/
iframe先のページが404でないか判定する方法 (javascript)
こんばんは、ころすけ(@wg_koro)です。 諸々の理由で、iframe先のページが生きているのか死んでいるのか(404など)、判定しなくてはならなくなりました。 さてどうしよう。iframeは404でもonload走るし、ステータスコード取れないし・・・。 そうだ、postMessage使おう というわけで、たどり着いたのがpostMessageを使う方法。iframe先が自分のページであることが前提になりますが、こいつを使えばどうにかなる。 あ、「postMessage」はiframeを使って、異なるページ間でメッセージ(文字列)を送受信する仕組みです。クロスドメインであってもOK。IE以外はもちろんのこと、IEも8以上で対応しています。割と広いブラウザで使える技術です。 ページ作って試してみた。 iframe先が生きているかのテスト 上記のページを表示して「iframe先は生きてる
クロスドメインでiframeを扱う - knowledge base
以前、iframeについていくつか記事を書かせて頂きましたが、その続編です。 iframeで別ページを読み込む際、同じドメインでないとエラーが発生し、iframe内の要素にアクセスすることができなくなってしまいます。 一例ですが、子ページと同じ大きさにiframeをリサイズすることができなくなってしまいます。 対処法をまとめます。 postMessageを使う 親ページ→子ページへのアクセスは禁じられていますが、window.postMessage()メソッドを用いて子ページ→親ページへメッセージを受け渡すことは可能になっています。 モダンブラウザ、IE8で実装済みです。 子ページ側（メッセージを送る側） parent.postMessage('hello','*'); 第一引数は送りたいメッセージ、第二引数には対象ドメインを指定します。 ここでは対象ドメインに「*（すべて可）」を指定して
postMessageとiframeでクロスドメインメッセージを送受信してみる
こんばんは、ころすけ(@wg_koro)です。 2ページ間の通信(片方は別ドメイン)をどうしようかなーと考えていたら、JSONPでもクロスドメインAjax(XmlHttpRequest Lv2)でもない、postMessageなるものを見つけました。IEも、IE8から使えるそうな。結構前からあるのね。全然知らなかった・・・。 window.postMessage は、安全にクロスドメイン通信を可能にするためのメソッドです。通常、異なった複数のページでのスクリプトはそれらが実行されたページが同じプロトコル（たいてい http）、ポート番号（http のデフォルトは 80）、ホスト（両方のページによって同じ値に設定される document.domain を基準とする）である場合に限りお互いにアクセスすることだけが可能です。window.postMessage は正しく使われたときに安全な方法で
たぶん世界一簡単なIndexedDBのサンプル - DRYな備忘録
WebSQL先輩… localStorageのようなシンプルなkvsじゃなくて、検索を伴うようなブラウザで永続化できるストレージあるかな、そういえばWebSQLってどうなってるんだろう？と思って調べたら、 Developer's blog | HTML5のWeb SQL DatabaseがW3Cの仕様策定の範囲から外れていた W3C、「Web SQL Database」の仕様策定を正式に断念 - builder by ZDNet Japan あらまあ Migrating your WebSQL DB to IndexedDB - HTML5 Rocks 代わりにIndexedDBを使えということらしい. なにそれ食えんの. IndexedDBとは？ どうやら検索キーを指定してドキュメントをつっこめるストレージっぽい. IndexedDB is a way for you to persis
javascriptでMD5 | 悠雀堂ブログ
「車輪の再発明」ですが、javascriptでMD5を計算するスクリプトを作成しました。そして2049通りのテストケースを作成し、各ブラウザでテストしました。おまけに各ブラウザのjavascript実行速度のベンチマークもしました。 はじめに さくらレンタルサーバーのApacheはmod_digestが入っていないようで、Digest認証ができません。 パスワードを平文で毎回送るベーシック認証も如何なものだろう？と思っていました。（まあSSLにすればよいんですが。） ふと、「ブラウザ側で、javascriptにてDigest認証と同様にハッシュを生成してやればよいのでは？」と思いつきました。 そこで、javascriptでMD5が実装されているか調べてみました。 尚、今回作成した記事中で参照しているファイル（yjdmd5.js, testcase.js, md5test.html）の再利用
JavaScriptでPHPの静的変数（static変数）みたいな事をやる方法 - Qiita
<?php function test(){ // 変数"$a"を初期化 static $a = 0; // 変数"$a"をカウントアップ $a++; // 変数"$a"の値を返す return $a; } // ループでtest関数を10回実行する for($i = 0; $i < 10; $i++){ echo 'out: ' . test(); echo '<br>'; }
Like excel Mround function in Javascript - Stack Overflow
I am trying to round a decimal number to nearest fraction number which end with 0 or 5 in Javascript.example if value is 543.55 should return 545 and if value is 541.99 should return 540. i tried with Math.round() but not able to achieve. kindly suggest me how to achieve that. Thanks in advance, Bijay
[JavaScript] 全角を2、半角を1と数えるコード | きほんのき
JavaScriptで全角を2、半角を1と数える必要があったので調べてみたら、大量に参考になるページが出てきました。結構需要があるのですね。 html5のcanvas上にテキストを描画する際、テキストの長さを取得するにはmeasureText()メソッドを使います。canvasを初めて使った時、このメソッドに気づかず、「全角を2、半角を1として数え、フォントサイズを掛けて長さを求めよう」などと考えたのですね。その時に必要になったわけですが、これで正しいwidthが分かるわけもなく。 それはそれとして、表題のコードは非常に有用で使い所も多いのでメモしておきます。コードはこちらを参考にさせていただきました。 var charcount = function (str) { len = 0; str = escape(str); for (i=0;i<str.length;i++,len++)
JavaScriptでゼロ埋めする方法 | You Look Too Cool
「5」を「05」のように桁を合わせるためにゼロを使うことを「ゼロ埋め」とか「ゼロパディング」などと言うそうです。 JavaScriptではsliceを使うと簡単にできます。
わずか1行のコードで「リアルタイムWeb通知」が実装可能になったMilkcocoaを試してみた！ : うえぶはっく
国産のバックエンドサービスとして人気の「Milkcocoa」ですが、いつの間にか「リアルタイムWeb通知」を実現できるようになっていたのでご紹介しておきます！ これが出来るようになると、自分のWebサイトやサービスなどを利用しているユーザーに向けて、スマホの「プッシュ通知」のような感覚で、リアルタイムに任意のメッセージを送信し、ユーザーのブラウザ上に表示させるようなことが出来るので便利です。 今回は、チュートリアル形式でサンプルを作っていく過程をご紹介しようと思います！ まずは初期設定をしよう！ まず最初に「Milkcocoa」にログインし、管理画面から新しいアプリを作成します。(無料プランで問題ありません…)
ワイ、円周率を割り切った模様 → 円周率＝7825万6779 分の 2億4585万922
こんにちは。 ３.１４から始まる円周率はどこまでも続く男のロマン・・・そんな風に考えていた時期が、ワイにもありました。 「円周率が１０桁で割り切れた」とかいう嘘記事が虚構新聞から出回ったりしたこともありました。 しかしさっきプログラムを作っていろいろ計算していたところ、円周率が割り切れてしまったので報告させてください。 そもそもは、円周率を分数で表現する手法を最近知り興味を持ったのがきっかけです。例えば とかです。７分の２２が円周率のそこそこの近似値（３桁まで正しい）になっています。 次に有名なのが、 らしいです。この１１３分の３５５はなんと７桁まで正しい近似になってます。３桁の整数２つ覚えるだけで、円周率７桁分の精度が得られるとは何ともお得な数です。 ここで疑問が湧きました。 この調子で分母の整数値を上げていったらどうなるのだろうか・・・？ 本来数学でのやりかただと、ここで「連分数」など
テキストファイルを読み込む－JavaScript入門（HTML5編）
HOME JavaScript入門[HTML5編] テキストファイルを読み込む 前のページではファイル選択ダイアログの出し方を見ました。 ここではそれを利用してローカルにあるテキストファイルを選択し、 テキストエリアに読み込む方法を見ていきたいと思います。 テキストを読み込む ローカルにあるファイルを読み込むには、FileReaderを使います。以下に使い方を掲載します。 変数 = new FileReader() FileReaderを作成し、変数に格納します。 変数.readAsText(Fileオブジェクト) テキスト形式でファイルを読み込みます。 変数.result 読込結果を取り出します。 以下のサンプルでテキストファイルを読み込みますが、このページの文字コードがUTF-8なので、 UTF-8形式のテキストでないと字化けします。もしUTF-8形式のテキストファイルが無ければ、 以
javascript - JavaScriptからファイルをダウンロードさせるのはどうしたら良いですか？ - スタック・オーバーフロー
contentをfileNameでダンロードしたい場合の実装 contentは生の文字列 var downloadAsFile = function(fileName, content) { var blob = new Blob([content]); var url = window.URL || window.webkitURL; var blobURL = url.createObjectURL(blob); var a = document.createElement('a'); a.download = fileName; a.href = blobURL; a.click(); }; コレでも可 var downloadAsFile = function(fileName, content) { var a = document.createElement('a'); a.d
緯度・経度からを住所取得する
Google Maps API V3で、google.maps.Geocoderクラスのgeocode()を使って、緯度・経度から住所を求めるサンプルプログラムです。プログラムに興味はなく、地図上で調べたいだけの場合は緯度・経度・住所・標高を取得するを。住所から緯度経度を求めたい場合は、地名や住所から緯度・経度を取得するを。 function getAddress(latlng) { // ジオコーダのコンストラクタ var geocoder = new google.maps.Geocoder(); // geocodeリクエストを実行。 // 第１引数はGeocoderRequest。緯度経度⇒住所の変換時はlatLngプロパティを入れればOK。 // 第２引数はコールバック関数。 geocoder.geocode({ latLng: latlng }, function(result
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dashboard - Ace Admin
Welcome to m-bsys.com