Rails Chartkick Lines not drawing in multi-series line_chart - ruby-on-rails

Question

Why are the lines not connecting the dots on my chart?
I know the last array item has no data but I don't think that's the problem.
[1] pry(#<#<Class:0x007fb1936e6828>>)> result
[
[0] {
:name => "Positive Room Pressure",
:data => {
Thu, 12 Jun 2014 16:25:28 UTC +00:00 => true,
Mon, 16 Jun 2014 19:27:21 UTC +00:00 => true,
Tue, 01 Jul 2014 08:58:40 UTC +00:00 => true,
Mon, 07 Jul 2014 19:21:42 UTC +00:00 => true,
Wed, 23 Jul 2014 20:43:23 UTC +00:00 => true,
Wed, 23 Jul 2014 21:05:04 UTC +00:00 => true,
Fri, 25 Jul 2014 05:24:18 UTC +00:00 => false,
Mon, 25 Aug 2014 13:29:40 UTC +00:00 => true
},
:discrete => true
},
[1] {
:name => "Room Humidity",
:data => {
Fri, 16 May 2014 12:13:07 UTC +00:00 => 65.0,
Tue, 10 Jun 2014 19:27:53 UTC +00:00 => 64.0,
Wed, 11 Jun 2014 15:45:17 UTC +00:00 => 65.0,
Thu, 12 Jun 2014 16:25:27 UTC +00:00 => 25.0,
Mon, 16 Jun 2014 19:27:22 UTC +00:00 => 66.0,
Mon, 16 Jun 2014 20:35:34 UTC +00:00 => 97.0,
Tue, 01 Jul 2014 08:58:46 UTC +00:00 => 70.0,
Mon, 07 Jul 2014 19:22:25 UTC +00:00 => 52.0,
Wed, 23 Jul 2014 21:05:18 UTC +00:00 => 65.0,
Mon, 25 Aug 2014 13:29:32 UTC +00:00 => 0.3
},
:discrete => true
},
[2] {
:name => "Ambient Temperature",
:data => {
Fri, 16 May 2014 12:13:10 UTC +00:00 => 33.0,
Tue, 10 Jun 2014 19:28:05 UTC +00:00 => 32.5,
Wed, 11 Jun 2014 15:45:25 UTC +00:00 => 33.0,
Thu, 12 Jun 2014 16:25:40 UTC +00:00 => 34.0,
Mon, 16 Jun 2014 19:27:23 UTC +00:00 => 26.0,
Tue, 01 Jul 2014 08:58:51 UTC +00:00 => 25.0,
Mon, 07 Jul 2014 19:22:33 UTC +00:00 => 34.0,
Wed, 23 Jul 2014 21:05:29 UTC +00:00 => 23.0,
Tue, 12 Aug 2014 22:39:31 UTC +00:00 => 41.0,
Mon, 25 Aug 2014 13:29:31 UTC +00:00 => 23.0
},
:discrete => true
},
[3] {
:name => "smell",
:data => {},
:discrete => true
}
]
![my test chart][1]
[1]: http://i.stack.imgur.com/u4JkJ.jpgstrong text
ERB to generate chart looks like:

Answer 1

I also encountered this issue and fixed it by making sure my date fields were all the same value. Since I was doing my aggregation by day, the time value on the field was meaningless. I quickly fixed the issue by converting the DateTime object to a Date object.
User.first.created_at.to_date
I hope this helps!

Answer 2

As previous answers have mentioned, this seems to be due to the data points not sharing x-axis values. However, Highcharts handles such irregular data just fine, and it's supported by chartkick. Just source Highcharts (and jQuery as a dependency) instead of Google charts, e.g.
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="path/to/chartkick.js"></script>
For a demo, check out: http://www.highcharts.com/demo/spline-irregular-time

Answer 3

I just encountered the same issue and I figured it out. Chartkick cannot draw lines if one of the data element is an empty hash.
In your case, the third array object has an empty data hash. Replace it with the below snippet and you should see lines
[3] {
:name => "smell",
:data => {
Fri, 16 May 2014 12:13:10 UTC +00:00 => 33.0,
Tue, 10 Jun 2014 19:28:05 UTC +00:00 => 32.5
}
:discrete => true
}

Answer 4

I ran into the same thing, and found that this happens when your data points don't share X-axis values. So in your example, the hash keys would need to be the same for each hash in the array.
Edit (2): I got this to work using Google Charts scatter chart (https://developers.google.com/chart/interactive/docs/gallery/scatterchart) directly. I had to do some permutations on the data to make it work... The data needs to look like the following to get the multi-line chart effect:
[['count', 'users', 'page views', 'bounces'],
[ new Date('09 Oct 2014'), 0, null, null ],
[ new Date('10 Oct 2014'), 1, null, null ],
[ new Date('11 Oct 2014'), 3, null, null ],
[ new Date('12 Oct 2014'), 3, null, null ],
[ new Date('09 Oct 2014'), null, 2, null ],
[ new Date('11 Oct 2014'), null, 15, null ],
[ new Date('12 Oct 2014'), null, 17, null ],
[ new Date('10 Oct 2014'), null, null, 1 ],
[ new Date('11 Oct 2014'), null, null, 10 ],
[ new Date('12 Oct 2014'), null, null, 10 ]]
There's also this: https://github.com/JohnathanWeisner/chartkick/tree/FEATURE/Trendline. It's a fork that adds scatter_chart, but I didn't feel like doing the necessary data permutations in ruby :P