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:
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:
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: lineWidth
since 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