レスポンシブ対応！Webサイトにグラフを表示できるJavaScriptライブラリー3つ
2017年11月16日 JavaScript グラフを必要とするWebサイトは限られるかもしれませんが、いざという時に知っておくと便利なグラフ作成用JavaScriptライブラリー。意外とレスポンシブ対応のものが少なかったので、対応しているものを集めてみました。 ↑私が10年以上利用している会計ソフト！ 1. Chart.js 公式サイト｜サンプル｜ドキュメント｜GitHub Chart.jsはグラフ作成用JavaScriptライブラリーの大御所とも呼べるのではないでしょうか？手軽にアニメーションのついた美しいグラフを表示できますよ。棒グラフ、円グラフ、折れ線グラフ、極座標グラフ、バブルチャート等、様々な種類が用意されています。もちろんレスポンシブ対応！どのグラフ描画ライブラリーにするか悩んだら、ひとまずChart.jsを試してみるといいでしょう。 Chart.jsの読み込み まずはファイ
「先輩のExcelグラフ、ダサいですね」とデザイナーが言ってきたので教えを請うたら恋が始まった
『Soldi』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や支払いの有無が影響を及ぼすことはございません。また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。 社内・社外向け問わず、資料作りで大活躍するのが Excelのグラフ。 Excelのデフォルト機能でさくっと作ったグラフでも結構いい感じに仕上がるので、「俺の資料、結構イケてるじゃん」と思っていました。 ところがある日の残業中、私が翌日の会議用資料の最終見直しをしていた時のことです。 私の後ろを通りかかったデザイナーのP子さんがぼそっとつぶやいた一言が、グサッと胸に刺さりました。 ※P子さんはこんな感
上の階の人の騒音をAmazon Dash ButtonとGoogle Sheetsで記録する - Qiita
かくかくしかじか 賃貸マンションの上の階の人がうるさい。 野球の硬式ボールを落としたような「ドン」、「ゴン」という音が朝と夜に聞こえてくる。上の階の人は野球選手？ 管理会社に相談すると、記録をとって欲しいとのこと。 目的 ということで、上の階の人の騒音をなんとかしたい。 というか、管理会社になんとかして欲しい。 管理会社に連絡したところ、「騒音の日時を記録してもらえますか？」と言われた。 なんとなく「はいはい、とりあえず記録してください。話はそれからです。」的な雰囲気を感じたので、「どうですか、見てくださいよこの状況。」と自信を持って伝えたい。 記録する情報 時刻 回数(断続的に騒音が続く場合があるので、その回数) まずは紙とペンで 手っ取り早く、紙とペンで時刻と回数を記録。 こんな感じ。「ドン」は音の感じ。お察しください。 集計して報告 紙に記載された記録をExcelに転記し、グラフ付き
仕事が早い人になる！Macのエクセルで時短する5つの裏技 - Findy
2016.06.06｜最終更新：2018.04.09 仕事が早い人になる！Macのエクセルで時短する5つの裏技 表計算がグラフの作成などに便利なExcel。お仕事やご家庭でも使われている方は多いのではないでしょうか。Excelには、普段使っているだけでは気づけない、知れば知るほど便利な技がたくさんあります。仕事が早い人は、スピーディーに仕事をこなせる機能を使いこなしているものです。この記事では、Macユーザーの方向けに、仕事を早く終わらせるために覚えておきたいExcelの技をご紹介します。 動作時間を短縮！覚えておきたい基本の7個のショートカットキー 皆さんは、どのくらいショートカットキーを使いこなしているでしょうか。使いこなすためには組み合わせるキーを暗記しないといけないので、日常的には3〜4つしか使えていないという方もいるかもしれません。ですが、ショートカットキーを使わないとマウスまで
項目名と数値を入れるだけで動くグラフを作れる「Data Gif Maker」をGoogleが公開
資料作成やプレゼンテーションの際に効果的にデータ内容をアピールできそうなアニメーショングラフを作ることができるWebツール「Data Gif Maker」をGoogleがローンチしました。 Make your own data gifs with our new tool https://www.blog.google/topics/journalism-news/make-your-own-data-gifs-our-new-too/ Data Gif Makerを使うと、以下のような動くグラフを作ることが可能です。作成できるのは、横棒グラフのいわゆる「100%積み上げグラフ」で、あたかも2つの要素がせめぎ合いしているような様子をアニメーションで表示しています。 グラフの作成はこの編集ページから行うことが可能。ページにアクセスすると、以下のような入力フォームが表示されます。 まず、左右に
【資料作り講座・第3回】分かりやすい資料にはグラフが必須！数値をより見やすくする解決策 | プリント日和 | 家庭向けプリンター・複合機 | ブラザー
産業用製品 工作機械 工業用ミシン ガーメントプリンター デジタル印刷機 燃料電池 レーザーマーカーグループ会社のWebサイトに移動します ギアモータ・歯車グループ会社のWebサイトに移動します 業務用通信カラオケシステムグループ会社のWebサイトに移動します コーディング・マーキング機器グループ会社のWebサイトに移動します
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
【コピペOK】Chart.jsで手軽にブログにグラフを埋め込もう
準備 WordPressなどファイルをアップロードできる場合はファイルをダウンロード、サーバーにアップロードして下さい。 はてなブログのようにファイルをアップロードできない場合はCDNが用意されているのでこちらを利用しましょう。 Chart.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! グラフを埋め込みたいページに一度だけ以下のファイルを読み込みます。 chart.js base 後は埋め込みたいグラフのコードを貼り付けるだけで表示されます。 棒グラフ PV推移などに使える棒グラフ。はてなアクセス解析風でしょうか。 gist1c24cb9ef50b60c3898638809ed05c45 <canvas id="myChart1" width="400" hei
Re:dashで異なるData Sourceのクエリ結果をJOINできるようになったので試してみた - Query Results (Alpha) - Gunosyデータ分析ブログ
こんにちは。グノシー開発部で部長をしている@cou_zです。最近はDJ RYOWのビートモクソモネェカラキキナ 2016 REMIXをよく聴いています。11/23のライブが楽しみですね。 Gunosyにおけるプロダクト改善は、データ可視化による現状把握から始まると考えています。Gunosyではデータ可視化にいくつかのツールを利用していますが、その中でも最近はRe:dashを用いることが多くなってきました。 先日、Re:dashを用いたリアルタイムKPI通知について紹介しました。 data.gunosy.io 今回は、Re:dashの新しい機能である Query Results (Alpha) Data Source を紹介します。 この機能により、複数Data Sourceのクエリ結果のJOINが可能になりました。アルバイトで分析を担当している松嶋も「ついに使えるようになったんですね！！r
Google の可視化ツールの Data Studio を試してみた - 唯物是真 @Scaled_Wurm
Google Data Studio (データスタジオ) という可視化サービスがベータ版で使えるようになっていたので試してみた 見たい数値を一覧するためのダッシュボード的なものを作るためのサービスなので、いろんな場所からデータを取ってきて一箇所でまとめて確認するのが用途っぽい(今のところ似たようなサービス・ツールの方が機能が多そう データソース データソースとしてGoogle AnalyticsやBigQuery、Google Spreadsheet、MySQLなどを選んでデータを取ってこれる データソースを選んでGUIでグラフやテキストを配置していく データの既存のフィールドに関数を適用した結果の値を使うこともできる 使える関数のリスト 下の画像ではGoogle Analyticsの「ブラウザ」(Chrome, Firefoxなど)と「ブラウザのバージョン」(バージョンの番号)をCONC
ブログを量産すると、どれくらい工数が短縮できるのかを習熟曲線を使って計算した件 - 嫁を動かす
「ワイ、ブログ書くの早くなってね？」 と思ったことがあるブロガーさんは多いと思います。これは、いわゆる”慣れ”によって制作時間が短くなった現象であることは言うまでもありません。 ぢゃあ実際、どんくらい早くなっていくか計算してみよっか！というノリで考え出されたのが経営工学で「習熟曲線」や「慣熟曲線」「ラーニングカーブ」などと呼ばれる理論です。 今日はこの習熟曲線を使って、ブログを書く時間がどれくらい短縮されるのかを計算してみようと思います。 習熟曲線とは？ 元々、この理論は車や飛行機を作っている工場で、量産時の工数（製作時間）を計算するために考え出されたもので、１台目の車を作った時と２台目の車を作った時の工数を比較したら、２個目は１個目の８割くらいの時間でできるやん！といった経験知を数式化したものです。 例として１個作るのに100時間かかる製品があったとします。もし、２個目を作った時に80時
JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式
ネットワーク分析ライブラリiGraphをPythonから使うための準備（Macの場合） - StatsBeginner: 初学者の統計学習ノート
ネットワーク分析のツール ネットワーク分析ってありますよね。 表面的な理解としては、こんな風情の図を描いたりするやつです。 頂点（node, vertex）と、頂点を結ぶ線（link, edge）の集まりとしての「グラフ」の性質を記述するグラフ理論というものがあって、これに基づいてたとえばソーシャル・ネットワーク上の人間関係とかが分析されたりするわけです。 ネットワーク分析のツールとしては、 igraph + Pythonによるネットワーク分析 ~ Blog of an immature researcher Python/NetworkXで簡単ネットワーク分析 - あんちべ！ 2章グラフ理論スピード入門 このあたりの記事を拝読すると、RやPythonのユーザとしては、iGraphってやつとNetworkXってやつを知っておけばよさそうです。 iGraphは（たぶん）Rのものが有名で、↑の
Slackで痩せる！！！エンジニアのための健康管理
はじめまして、リラクヘルステック室の丸山です。 このブログは、都内を中心にリラクゼーションサロンを展開する株式会社リラクのテックブログです。 「リラクゼーションサロンを展開する会社なのにテックブログ？」という声が聞こえてきそうですが、弊社ではリラクゼーションサロンの運営の他、リアルメディア事業、デジタルメディア事業を展開しています。今は、さらにテクノロジーでひとびとの健康をサポートする事業を展開していく動きをしており、「未来のヘルスケアテクノロジーを作る」というミッションをもって「ヘルステック室」という部署を構えています。 さて、この記事はヘルステック室ブログの第1号です。前述の通り弊社はテクノロジーで健康をサポートしていくミッションを持っているのですが、ヘルステック室のメンバーのうち何名か（というかおもに私）は、まあ、なんというか、ありていに言って、「デブ」です。肥満は万病のもと。ヘルス
グラフをweb上で作るのに使っているツール。 – @attrip
ぼくは、 infogr.amを使っています。こんなグラフが簡単に作れます。 インフォグラフィックをWeb上で作るツールです。 作る際には、あらかじめグーグルスプレッドシートやエクセルなどのツールを使って数字を入れておくと便利です。インフォグラフィック＆オンラインチャートなどのグラフをweb上で作るのに使えるツール「infogr.am」 紹介サイト： infogr.am 例えば、グラフを人で表示してみる。 簡単に作れちゃえます。 アカウントを取得しているので過去に作ったグラフも残っています。 過去のデータにアクセスし、グラフの表示を変更しよう！って時も簡単です。 ソースだけで埋め込み可能
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無線LANの状況をビジュアル表示できる診断ツール「WiFi Analyzer」NOT SUPPORTED
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。