Represent Stripe Charge Amount and Date with Chart.js - ruby-on-rails

Question

My code comes from this and Im displaying the data with chart.js inside of a React component. Im using Rails 4. In the controller, the charge props comes out as: #charges = charges_by_date = {}.as_json
jsx:
var ctx = document.getElementById("moneyHistory");
var hash = this.props.charges;
var amount = [];
var d = [];
var chargeDate = Object.keys(hash).forEach(function(k) {
var cost = hash[k];
var date = moment(k).format("Do MMM");
amount.push(cost);
d.push(date);
});
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: d.sort(),
datasets: [{
label: 'Amount',
data: amount.sort(),
backgroundColor: 'rgba(0, 126, 255, 0.72)',
borderColor: '#1b6ac9',
width: 100
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
},
render: function() {
return(
<div>
<canvas id="moneyHistory" width="400" height="150"></canvas>
</div>
)
}
Chart displays great but I want to have 7 days on the graph (today + 6 days ago). I want to replace the hash dates with:
var staticDates = [
moment().subtract(6, 'days').format("Do MMM"),
moment().subtract(5, 'days').format("Do MMM"),
moment().subtract(4, 'days').format("Do MMM"),
moment().subtract(3, 'days').format("Do MMM"),
moment().subtract(2, 'days').format("Do MMM"),
moment().subtract(1, 'days').format("Do MMM"),
moment().subtract(0, 'days').format("Do MMM")
];
...
data: {
labels: staticDates,
...
Now, I need to associate those charge with those date. How to achieve this?
Edit:
I'd like this dates on the graph to be like this where today's date (30th Apr) always be on the right:

Answer 1

I don't think you want to do all this date processing in Javascript. Let Ruby/Rails do the heavy lifting for you.
Suppose you have a method that maps charges to a date, where each key in the hash is a day and the value is a count:
def each_stripe_charge_for_customer(customer_id, created)
starting_after = nil
loop do
customer_charges = Stripe::Charge.all customer: customer_id,
created: created,
limit: 100,
starting_after: starting_after
break if customer_charges.none?
customer_charges.each do |charge|
yield charge
end
starting_after = customer_charges.data.last.id
end
end
def daily_charges_for_customer(customer_id, created=nil)
charges_by_date = Hash.new(0)
# For each Stripe charge, store the date and amount into a hash.
each_stripe_charge_for_customer(customer_id, created) do |stripe_charge|
# Parses Stripe's timestamp to a Ruby date object. `to_date` converts a DateTime object to a date (daily resolution).
charge_date = Time.at(stripe_charge.created).to_date
charge_amount = stripe_charge.amount
charges_by_date[charge_date] += charge_amount
end
charges_by_date
end
So now, daily_charges_for_customer(customer_id, 1.week.ago.to_i) returns something like:
{
'19 Jan' => 10,
'20 Jan' => 20
}
You should cache this result whenever possible so you're not constantly hitting the Stripe API
Now, you can pass this as a data-attribute within the DOM:
In your view:
<%= content_tag :canvas, "", id: "myChart", width: "400", height: "200", data: { charges: daily_charges_for_customer(customer_id, 1.week.ago.to_i) } %>
This will simplify your javascript considerably:
In your JS code:
var ctx = $("#moneyHistory");
var cumulative_daily_charges = ctx.data("charges");
var date_labels = Object.keys(cumulative_daily_charges);
var daily_charges = date_labels.map(function(v) { return cumulative_daily_charges[v]; });
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: date_labels,
datasets: [{
label: 'Date',
data: daily_charges
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
I'm writing this sort of "off the cuff" so you may need to fix some typos/syntax errors, but the logic and major nuts-and-bolts should work. Let me know if you run into any issues.
EDIT
Also, I don't think amount.sort() and d.sort() will act as you expect them to. If they're separate arrays, they'll be sorted independently.