人工知能スタートアップ取締役 橋崎良哉のブログ(はてな)

人工知能スタートアップ エッジコンサルティング株式会社 橋崎のブログ(http://yoshiyah.com/)のはてな版(コピー)です。

【プログラミング】HighchartsとData Tablesを使ってみた

本ブログは、以下の元となっているブログをコピーして若干修正しながら、運用しています。

 

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

 

以下転載

 ------------------------------------------------------

 

引き続きプログラミングをやっています。

 

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

yoshiyah.com

 

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

https://herokucards.herokuapp.com/cardsapp/template/

 

自分のブログに関係させた機能を随時追加していっています。

 

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

 

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

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

という形です。

 

まあどちらもテンプレート/プラグインのカスタマイズをしているだけなので、 難しい話ではないのですが、また色々はまりつつも実装出来ました。  

 

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

%e7%84%a1%e5%90%8d%e3%81%ae-qq-%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%8820161009135343 上記図のようなバブルチャートを作成しました。

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

 

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

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

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

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

 

データ形式JSONでやるということで、 データそのものは事前にMySQLに投入しておき、DjangoのREST frameworkを使って、 API化→JSON形式でDBの内容を吐き出す、という流れを作り、 HighchartsでJSONのデータを受け取ってバブルチャートに出す、 ということをやりました。

 

 

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

qiita.com

racchai.hatenablog.com

http://

flame-blaze.net

 

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

%e7%84%a1%e5%90%8d%e3%81%ae-qq-%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%8820161009135429

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

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

 

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

 

URLのところが横に間延びしてダサいので直したいのですが、 とりあえずやりたかったことは実現出来たのでよかったかなと。

 

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

qiita.com

 

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