web-dev-qa-db-ja.com

プロファイルページの合計ユーザーポイントの折れ線グラフを作成するにはどうすればよいですか?

ユーザーのプロファイルページにユーザーの合計ユーザーポイントの折れ線グラフを表示したいのですが。ユーザーはグラフを変更できないようにする必要があります。ユーザーが登録した日から今日までのユーザーポイントをグラフ化するだけです。 グラフ モジュールを使用したいのですが、必要なデータ(日付と1日の合計ポイント)を提供する方法がわかりません。

おそらく、私のWebサイトのプロファイルページが「user_view」で上書きされている(つまり、プロファイルページを作成する方法 プロファイルページを作成する方法 )ことで、パネルページになっていることも言及しておくと便利です。

どうすればこれを達成できますか?


編集:@Felix Eveが彼の回答で提案したように、フィールドコレクションを使用して解決策を見つけようとしました。ユーザーにフィールドコレクションを正常に追加しましたが、まだ次の時点で行き詰まっています。

  1. 1日の終わりにユーザーポイントをすべてのユーザーのフィールドコレクションアイテムとして保存します。
  2. ユーザーポイントをチャートでグラフ化します。

これらの問題を解決すると、この問題も解決されます。

3
Jeroen

私はこれが古い投稿であることを理解していますが、トピックを検索するときにこの質問を見つけた人のために実行可能な解決策を追加したかったのです。

グラフモジュール の組み合わせを使用して、履歴を表示するビューを作成することができましたユーザーの合計ユーザーポイント数。

特定のユーザーのすべてのユーザーポイントトランザクションを表示するビューを作成するのはかなり簡単ですが、最も難しいのは、ユーザーのポイントの「累計」を表示することです。

次のレシピは、ユーザーのポイントの経過を経時的にグラフ化するビューを作成するのに役立ちます。

ステップ1:ダウンロード、チャートモジュールを有効化

ステップ2:「Userpoints」を表示するビューを作成し、チャート表示形式でブロックビューを作成します。下のスクリーンショット:

enter image description here

ステップ3:関係Userpoints:Userを追加します

ステップ4:次のフィールドを追加します。

  • ユーザーポイントトランザクション:タイムスタンプ
  • Userpointsトランザクション:ポイント
  • グローバル:数式

ステップ5:数式フィールドの式を[式] + [points_1]に設定します。このフィールドのラベルも調整する必要があります。

ステップ6:グラフの設定で、ラベルをタイムスタンプフィールドに設定し、データを数式に設定します。また、グラフの種類を線に設定します。

ステップ7:タイムスタンプフィールドでソートするためのソート基準を追加します。タイムスタンプ形式をY-m-dに設定します。

ステップ8:コンテキストフィルターを追加します:User:uidログインしたユーザーのuidでフィルタリングします。

実際にグラフを表示するには、ページビューを作成することができます。

enter image description here

2
ymdahi

以前、この目的のために Google Charts または Flot を使用しました。

これらは両方とも、入力に基づいてグラフを作成するJavaScriptライブラリです(jsとして提供- drupal_add_js を使用)。

hook_user_view を使用してデータを準備し、必要なjsを追加できます。

最近、Googleソリューションではグラフを再び取得するためにデータをGoogleサーバーに送信する必要があるため、Flotをさらに使用する傾向があります(Googleがデータをログに記録することに偏執しないのは、ページの読み込み時間が遅くなることだけです)。

「ユーザーポイント」の保存

ユーザーは1日の間に何らかの方法でポイントを獲得すると思います。したがって、ユーザーごとに日付とポイント数を保存する必要があります。これを行うには、ユーザープロファイルに フィールドコレクション フィールドを2つのフィールドで追加します。1つは日付用、もう1つはポイント数用です。その後、ポイントが貯まったら、ユーザーポイントを新しいポイントで更新できます。 (この投稿を参照してください プログラムでフィールドコレクションを作成/削除/変更

データの取得/表示

Hook_user_viewでは、$ accountオブジェクトが渡されます。これには、すべてのポイントデータを含むフィールドコレクションフィールドが含まれます。データ( field_collection_item_load )をロードし、それをループして、プロットするデータの配列を作成します。

フロートグラフの非常に単純な例は次のようになります。

var data = [[0, 3], [1, 8], [2, 5], [3, 13]];
$.plot("#my_graph", [ data ]);

ここで、0、1、2、3は軸上のポイントで、他の数値はラインのプロットに使用される値です。 完全なドキュメントはこちらをご覧ください

このjsをページに追加し、必要なフロートライブラリとジョブを実行します。

1
Felix Eve

Visualization モジュールを使用してみてください。 「ビュー」を使用する方が簡単です。

0
bPadaria