Rails chartkick: customizing separate curves in multi series line chart?

2.2k Views Asked by At

I'm using chartkick to make a multiple series line chart with the following code:

<%= line_chart [
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]},
    {name: "Goal trend line", data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]]}
    ]%>

And this is what it looks like:

Chart, not modified

The basic idea is that the blue is the stuff entered in by the user, the red is their goal the the yellow joins the user's most recent entry to the goal in a sort of "trend line". I wanted to customize the trendline to have no endpoints (pointSize: 0) and be dashed (lineDashStyle: [5,5]), but not the other two. I tried doing this

<%= line_chart [
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]},
    {name: "Goal trend line", data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]] , library:  {pointSize: 0, lineDashStyle: [5,5]}}
    ]%>

but it didn't work since I got the same output as before and tried doing this

<%= line_chart [
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]},
    {name: "Goal trend line", data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]]}
    ] , library:  {pointSize: 0, lineDashStyle: [5,5]} %>

but that made ALL the lines dashed and vanished all the points, as expected:

Chart, but EVERYTHING got modified (as expected)

So how do I make these attributes only apply to the one curve but not the other two? If there isn't a direct chartkick implementation, It would also be helpful to know how I could do this using only google charts. Just as long as I get the functionality!

--

EDIT 1: After seeing this, I tried to use the series option to vary some parameter (here: lineWidthsince it was easiest to type), but this also didn't work, I got an error message. This was my code:

<%= line_chart [
    {data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]]},
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]}

] , library:  library_settings %>

with

<% library_settings = {
    width: 600,
    vAxis: {ticks: choose_ticks(@track)},
    colors: ['ff9900', '3366cc', 'dc3912'],
    series: {
        0: {lineWidth: 1},
        1: {lineWidth: 2},
        2: {lineWidth: 10}
    }
} %>

but I only got the error

....html.erb:16: syntax error, unexpected ':', expecting => 0: {lineWidth: 1}, ^ ....html.erb:16: syntax error, unexpected ',', expecting keyword_end ....html.erb:17: syntax error, unexpected ',', expecting keyword_end ....html.erb:19: syntax error, unexpected '}', expecting keyword_end
1

There are 1 best solutions below

1
On BEST ANSWER

It seems you're now in te correct path. The syntax error you get now should be fixed with the following:

<% library_settings = {
    width: 600,
    vAxis: {ticks: choose_ticks(@track)},
    colors: ['ff9900', '3366cc', 'dc3912'],
    series: {
        0 => {lineWidth: 1},
        1 => {lineWidth: 2},
        2 => {lineWidth: 10}
    }
} %>

The variable library_settings is a ruby hash, and in ruby, numeric keys are allowed for hashes but they must use the hashrocket syntax, not the new colon syntax. For clarification:

2.1.2 :001 > { 0: {lineWith: 1} }
SyntaxError: (irb):1: syntax error, unexpected ':', expecting =>
{ 0: {lineWith: 1} }
    ^
(irb):1: syntax error, unexpected '}', expecting end-of-input

But

2.1.2 :002 > { 0 => {lineWith: 1} }
=> {0=>{:lineWith=>1}}