How to create a line graph of the total user points on a profile page?

Question

I'd like to have a line graph of my users' total user points in time on their profile page. Users shouldn't be able to modify the graph: it should simply graph the user points from the day the user registered until today. I'd like to use the Charts module, but I don't know how I can provide the necessary data (date and daily total points).

Perhaps it's also handy to mention that the profile pages on my website have been overridden with "user_view" (see: How to create a profile page?) into a panels page.

How can I achieve this?

---

Edit: I tried to find a solution, using Field Collections as @Felix Eve suggested in his answer. I've successfully added a Field Collection to my users, but I'm still stuck at these points:

1. Save the userpoints at the end of the day as a field collection item for all users.
2. Graph the userpoints in a Chart.

Solving these problems, solves this problem aswell.

Answer 1

I realize this is an old post, but I wanted to add a workable solution for those that find this question when searching the topic.

I've been able to use a combination of the Charts module to create a view that display the history of the user's total userpoints.

It is fairly straight-forward to create a view that displays all of the userpoints transactions of a given user, however, I found the trickiest part to be display a 'running total' of a user's points.

The following recipe should help you create a view that charts the progression of a user's points over time.

Step 1: Download, enable the Charts module

Step 2: Create a view that Shows "Userpoints", and create a block view with the Chart display format. Screenshot below:

Step 3: Add the relationship Userpoints:User

Step 4: Add the following fields:

• Userpoints Transactions: Timestamp
• Userpoints Transactions: Points
• Global: Math Expression

Step 5: Set the expression for the math expression field to: [expression] + [points_1]. You should also adjust the label for this field.

Step 6: In the chart settings, set the label to be the timestamp field and the data to be the math expression. Also, set the chart type to line.

Step 7: Add a sort criteria to sort by the timestamp field. Set the timestamp format to be Y-m-d.

Step 8: Add a contextual filter: User:uid to filter by logged-in user's uid.

You may want to create a page view to see the chart in action:

Answer 2

I've used either Google Charts, or Flot for this purpose before.

They are both javascript libraries that create graphs based on your input (supplied as js - use drupal_add_js).

You can use hook_user_view to prepare your data and add the necessary js.

Recently I've been tending to use Flot more as the Google solution requires sending data off to Google servers to get your chart back again (Whilst I'm not paranoid about Google logging my data is just that it slows down page load times).

Saving the 'User Points'

I assume users accrue points somehow over the course of the day. So you need to store a date and number of points per user. To do this you could add a field collection field to the user profile with 2 fields, one for date and one for the number of points. Then when ever a point is earned you can update you users profile with the new points. (See this post on Programmatically creating/deleting/modifying field-collection)

Getting / displaying the data

In hook_user_view the $account object is passed in. This will have your field collection field in it with all of our points data. Load the data (field_collection_item_load) and then loop over it to build up the array of data we want to plot.

A really simple example of a flot graph would be:

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

Here 0, 1, 2, 3 are points on the axis and the other number are the values that are used to plot the line. For full documentation see here.

Add this js to the page along with the necessary flot library and job done.

Answer 3

Try using Visualization module. It is easier to use with "Views".

Answer 4

You should be able to use Views Charts to create a view from the userpoints. Note that only a dev release is currently available for D7.