LoginSignup
5

More than 5 years have passed since last update.

HighchartsとData Tablesを使ってみた

Last updated at Posted at 2016-10-09

Qiitaでは初めての記事です。

Wordpressでこれまで自分のブログを書いてました。

人工知能スタートアップ取締役 橋崎良哉のブログ
http://yoshiyah.com/

基本的には人工知能やVR/AR、IoT、チャットボットみたいなところの潮流を能動的に追いかける&自分の脳の体操ということもあり、新規事業や新規取り組みのアイデアをひたすら考える、ということをやって記事にしています。

で、最近プログラミングを始めたので、技術系の話はQiitaで書いていければと思って初投稿。

会社でも、ビジネス側をまるっと担当していて、プログラミングについては具体的な中身を分かっていなかったということもあり、
技術ブログの書き方があんまり分かってませんw

ゆっくり慣れていければ、という感じで進めていきます。

ということで、初稿は既存ブログの転載+追記で。


プログラミングに関しての前回の記事はこちら。

で、今開発を進めているのが、以下のサイトです。

Python、Django、開発環境はMySQL、Heroku(PostgreSQL)で作っていて、
ブログの題材である新規事業/アイデアを考えていくためのwebアプリ、ということで随時機能を追加していっています。

今回は2点追加で実装しました。

1,Highchartsで事業評価をバブルチャートにして見える化

2,Data Tablesを用いて、これまでの事業アイデアをソート、検索、なども出来るテーブルで一覧で見れるように

 

という形です。

まあどちらもテンプレート/プラグインのカスタマイズをしているだけなので、

難しい話ではないのですが、また色々はまりつつも実装出来ました。

 

1,Highchartsで事業評価をバブルチャートにして見える化


image

上記図のようなバブルチャートを作成しました。

 

このブログで書いた記事を

・X軸:事業開始の気軽さ(コスト量、投資回収期間)

・Y軸:市場の魅力度(収益性、競争優位性)

・バブルの大きさを市場規模

として、XYは独自に評価をしつつ、バブルチャートとしてプロット出来るようにしてみました。

データ形式をJSONでやるということで、

データそのものは事前にMySQLに投入しておき、DjangoのREST frameworkを使って、

JSON形式でDBの内容を吐き出す、という流れを作り、

HighchartsでJSONのデータを受け取ってバブルチャートに出す、

ということをやりました。

Hightcharsのバブルチャートのデモは以下から。

基本デモのものをそのまま使ってて、多少色や項目を変えた程度です。

 

【参考にさせてもらった記事】

http://qiita.com/kimihiro_n/items/86e0a9e619720e57ecd8

http://flame-blaze.net/archives/4999
 

2,Data Tablesでこれまでの事業アイデアをソート、検索、なども出来るテーブルで一覧で見れるように


image

テーブル上に一覧化されていて、それを検索出来るものを作りたかったところ、

ソート機能までついてきて非常に便利なData TablesというJqueryのプラグインを見つけました。

前述のJSONのデータをそのままData Tablesに渡して完成。

URLのところが横に間延びしてダサいので直したいのですが、

とりあえずやりたかったことは実現出来たのでよかったかなと。

 

【参考にさせてもらった記事】

 

ということで、次は、スクレイピングをやりたい。頑張ります。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5