【TwitterAPI】時間ごとのツイート数をチャート化する【C3.js】

スポンサーリンク

‘search/tweets’で100件以上のツイートを取得するようにしたので、それを時間毎にチャート化します。サンプルは最後にあるGitHubから取得できます。

前回からの続きです。

C3.jsを追加

今回のチャートの描画はJavaScriptのライブラリ「C3.js」を使用しました。とりあえずお試しでチャート化したかったので、使いやすそうなものを選択しました。チャートライブラリについては、以下を参考にさせていただきました。

導入はこちらを参考にさせていただきました。

以下のリンクから「C3.js」と「D3.js」をダウンロードします。

ダウンロードした各scriptとcssをプロジェクトに追加します。追加したら画面で読み込むようにします。(今回のサンプルではapp.blade.phpに読み込みます)

サンプルでチャートが表示されることを確認するために、チャートを表示するためのdivを追加します。

jsでチャートを生成します。

  • bindto:チャートを作成する領域のセレクタ
  • data:表示するデータを設定
このようにチャートが表示されます。チャートのX軸はデータの個数、Y軸はデータの内容で自動算出してくれます。

ツイート数を時間ごとに集計してチャートにする

チャートが表示できたので、今度はツイート数を時間毎に集計してチャート化していきます。

チャートを作成するためのデータをサーバ側で生成

検索した時に処理するsearchメソッドでチャートの元となる日時のデータをJSON形式で生成し、レスポンスします。

これまで「$result」として返していたデータを以下のように返すようにします。「修正」または「追加」コメントについている行が変更箇所です。

  • $result[‘tweets’]:ツイート情報
  • $result[‘chart_data’]:チャートの元となる日時のデータ

「修正」の部分は、上記のレスポンスの形式を変更です。「追加」の部分で$result[‘chart_data’]に日時の配列を作っていき最後にJSON形式に変換しています。

上記に対応するためにbladeも修正します。

  • $result[‘chart_data’]をhiddenで取得
  • $result[‘tweets’]がこれまでと同じようにツイートの検索結果となるように設定
こんな感じで日付の情報をhiddenに取得します。

JSでチャートを生成

チャートの作成に検索した「キーワード」と「検索日時」を利用するため、検索時にセッションに「キーワード」「検索日時」を保存して、画面読み込み時にセッションのデータを取得するようにします。

「#chart_data_hidden」に値が設定されている場合、チャートを生成するようにします。以下のような処理をしています。

  1. 検索日時(From・To)を取得して差分を分で取得します
  2. 差分に応じてチャートのX軸の間隔を設定します
  3. 検索日時(From)から検索日時(To)まで(2)の間隔毎にX軸となる配列に格納
  4. (3)の配列とチャートのデータ(ツイートの日時)の配列をループして時間毎のツイート数を集計してチャートを作成します
こんな感じに表示されます。

サンプル

GitHub:naoto-mitsuya / search_tweet_with_chart

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です