3

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.

2
  • 1
    have you tried drupal.org/project/quant it have the user points transaction option and I never used this before!
    – Bala
    Mar 8, 2014 at 9:19
  • @Bala: Indeed, the Quant module supports userpoints, but so do Charts and many others. The problem is how to store the necessary data and use it properly. I haven't been able to figure that out with Quant either...
    – Jeroen
    Mar 12, 2014 at 0:21

4 Answers 4

2

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:

enter image description here

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:

enter image description here

3
  • Nice, finally another proposal! Unfortunately, your answer does not work for me yet. The math expression works (cool!), but the line chart does not want to show up. I suspect that this is due to multiple transactions on the same day. Did you have to tackle this problem? Also, why exactly do you need the user relationship?
    – Jeroen
    Sep 5, 2017 at 15:59
  • 1
    The issue with multiple transactions is something I realized was an issue only afterwards. I haven't found a solution yet, but it is just a matter of grouping by transaction date. I've update here if I come across any potential solutions to that. As for the user relationship - I am creating a block to display on the user's profile page, so user the user relationship to relate the transactions to the user profile, otherwise it will display all transactions for any user.
    – ymdahi
    Sep 5, 2017 at 16:21
  • I just stumbled on this answer (without searching ...). As a co-maintainer of Charts I can only say "nice!" (and +1). If you ever have a chance to also address those multiple transactions, please further update your answer (or post a new self answered question as a followup question, with a link to this answer ...). Nov 22, 2017 at 16:15
1

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.

7
  • Thanks for your answer. Suppose I prefer using Flot (just like you, I prefer a faster solution), how should I supply the inputs, namely userpoints, for the line graph? I suppose that the total amount of userpoints should be saved somehow at the end of every day, but I don't have a clue about how to do that. After that, how can I make use of the data for the linegraph? I don't have any experience with Javascript, so I'd like to get some help. :)
    – Jeroen
    Mar 5, 2014 at 16:11
  • I've updated my answer with more details
    – Felix Eve
    Mar 5, 2014 at 16:36
  • Thanks for your efforts. Maybe using Field Collection to save the user points can work, but as using Flot means coding all the way, I don't think this is the solution I'm looking for (it seems way to complicated for a newbie like me). Isn't it possible to use the data with the Charts module? I think that one is pretty easy to use and I already have some other charts on my website using that module.
    – Jeroen
    Mar 6, 2014 at 17:05
  • I've not used the chart module so couldn't be certain but I'm sure it would be possible.
    – Felix Eve
    Mar 7, 2014 at 8:47
  • Could you provide yet some more detailed guidelines for saving the userpoints and using them with views? I've added a field collection to my users with two fields 'Date' and 'Points', but I don't know how I can save the daily total points there. I assume that I'll have to do it programmatically?
    – Jeroen
    Mar 7, 2014 at 9:40
0

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

3
  • I installed the Visualization module and I've tried to create a new view with a Visualization format, but I can't figure out how to get what I want. I've added the 'Userpoints total: Current total points ' field, a 'Userpoints: User' relationship and a 'Userpoints Transactions: User' context filter, but there's no line graph showing up. I suppose that the data aren't provided correctly, but I don't know the right way to do so. Can you explain your answer a bit more?
    – Jeroen
    Mar 5, 2014 at 16:37
  • Create a table with "Views" using "Date" and "total point" columns on per day basis. If you get all the accurate data needed, you can change "Views" format to "Visualization" instead "table" and set X-axis and Y-axis accordingly. Check this video youtube.com/watch?v=ot2cFQVgzfA for exact details
    – bPadaria
    Mar 6, 2014 at 14:24
  • I can't find a 'Date' field anywhere when I'm working with userpoints. The problem lies in providing the data, not in displaying a chart...
    – Jeroen
    Mar 6, 2014 at 14:38
-1

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.

1
  • I prefer not to use developer releases. I'm now using the Charts module, but I don't know how to provide the necessary data (date and userpoints). Any ideas?
    – Jeroen
    Mar 5, 2014 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.