CODEWITHSUNDEEP
ruby-on-rails-4chartkick
sebasessling
sebasessling

Reputation: 3

How can I see the month and year in x axis with a Date? and values in y axis? with chartkick

How can I see the month and year in x axis with a Date? and values in y axis? with chartkick

 <div class="panel-body">

 <%= line_chart [{name: "Cantidad de voluntarios en estado activo", 

        data: [Time.new, '20'] },

       {name: "Study", data: [Time.new, '30'] }, <!-- # How can I do that with it? -->


       {name: "Conversation", data: [Time.new, '50'] } ]

        , {library: {hAxis: {title: "Tiempo"}, vAxis: {title: "Valores"}}} %>

</div>

Upvotes: 0

Views: 1016

Answers (1)

Tyler
Tyler

Reputation: 66

NOTE: this answer assumes you are using Google Charts as your charting library, which it appears as if you are.

Month and Year on the x-axis:

add the option:

library: {:hAxis=>{:format=>'MMM y'}}

If you go to Google Charts Documentation, you'll see the section on hAxis.format. They explain that their format is similar to the ICU Pattern Set (see http: //icu-project.org/apiref/icu4c/classSimpleDateFormat.html#_details).

Values on the Y-axis

I think your issue is that you have the data: option formatted incorrectly. (1) I would make your values ints as opposed to strings (not sure if that matters), and (2) your key/values are a little off (this definitely matters). You can pass as a hash, like data: {Time.new => 20}, or as an array like you had, except you need to nest the array, like data: [ [Time.new, 20] ]. This is because since it's a line chart, you could have many many values, i.e. [ [Time.new, 20], [Time.new, 30], [Time.new, 40] ] all in one series.

So, this is how I refactored your code:

<%= line_chart [
    {name: "Cantidad de voluntarios en estado activo", data: {Time.new => 20} },
    {name: "Study", data: {Time.new => 30} },
    {name: "Conversation", data: {Time.new => 50} } ],
    {library: {hAxis: {title: "Tiempo", format: 'MMM y'}, vAxis: {title: "Valores"}}} %>

Which ends up looking like this:

[I can't post pics apparently, but you can find it here: https://i.sstatic.net/TTVgP.png ]

Hope this helps!

Upvotes: 2

Related Questions