Skip to main content

Chart Size Convert

General • Asked by Emrah Yıldırım

Hi

I have a table called Download, the data in this table comes in bytes.
I want to prepare a chart with Chartkick. However, with the following code, the data comes in bytes. I want it to come in the form of Mb or Gb.

<%= line_chart Item.group_by_month(:created_at).sum(:download) %>

Can this code be used with something like number_to_human_size?


Is there anyone who can help me with this?

Respects


Hey Emrah,

I'm not really sure what you're after, did you try it? What was the error?

See the docs - https://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html#method-i-number_to_human_size


Hey

I've looked at this link before. Actually, there's no mistake. The data from the Download table comes in the form of bytes, and I want to show this data in the form of megabyte, gigabyte and Terebyte.

<% @tasks.each do |task| %>
   <tr class="gradeX">
     <td><%= Time.at(task.intime).utc.strftime("%H:%M:%S") %></td>
      <td><%= number_to_human_size(task.downloads) %></td>
      <td><%= number_to_human_size(task.uploads) %></td>
   </tr>
 <% end %>

I managed to show it using Number_to_human_size on the index page with the code above.

However, when I want to display the same process with Chartkick gem file, the data appears as byte.

What's important is how do I add a method like Number_to_human_size to the following Chatkick code?

<%= line_chart Item.group_by_month(:created_at).sum(:download) %>


Ahh ok, I see what you're doing.

The best I can come up with is to take the return of your code and apply the number_to_human_size with an additional map like so:

<%= line_chart Item.group_by_month(:created_at).sum(:download).map{|k,v| [k, number_to_human_size(v)]} %>

First of all, the code you gave me worked. Thank you so much for that.
Number_to_human_size is doing the calculation, but does not add MB, GB, TB to the end.

You can see it in the picture below.

https://cdn1.imggmi.com/uploads/2018/12/11/e7693f4727397b2957f9d5e5a33c02d8-full.jpg


I think the solution is going to be a bit more complex.

I realized that you're probably going to run into a situation where a data point of 100gb will appear higher on your chart than a 1tb data point. As far as I'm aware, chartkick isn't parsing the unit of measure so all it is seeing are the values 100 and 1 in this example.

In some libraries, you can pass in the data point value along with its label value or at least format the label value separately from the point value. This way you could pass the data point value as the raw bytes so you avoid 100gb being higher on the chart than 1tb and then manipulate the label value so you can display the properly formatted value (1tb, 100gb, etc).

I glanced at the chartkick docs and I'm not seeing that ability, but that doesn't mean I didn't overlook it or dig deep enough to find that feature. What charting library are you using within chartkick?

Unfortunately this is about as far as I can help on this specific issue until I can get more time to dig into it more, but I doubt that will happen in the next few days. Hopefully someone with more experience with chartkick and the specific library you're using will chime in.


You did the best you could for me... I don't have to use Chartkick. Can you recommend another library or method other than Chartkick? Frankly, you've wasted enough time for me.

I'm using the Chartjs library


You can keep using Chartkick for your simpler charts, then for your more complex implementations you can bypass Chartkick and embed the chart.js manually.

Creating a chart:

Example usage in an ERB file:

What you're looking for to format the tooltip is the tooltip callback function

In the example erb file, you'll see you can put the js code directly in an erb file and then pass the data in as you would any other view. You'll notice I put raw before the data variable, I'm not 100% sure this is necessary but I think it will be, otherwise, your array will be wrapped in quotes.

I would suggest trying to get the chart embedded with some data, once you have that then you can start working on manipulating the tooltips to display as you need. One other thing you'll need to be aware of, you'll most likely have to do the byte to mb/gb/tb in js instead of ruby. You can check out this SO for an idea on how to handle it - https://stackoverflow.com/a/18650828


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 20,000+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.