CODEWITHSUNDEEP
ruby-on-railsrubyruby-on-rails-4chartkick
lacostenycoder
lacostenycoder

Reputation: 11216

Rails Chartkick Lines not drawing in multi-series line_chart

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]: https://i.sstatic.net/u4JkJ.jpgstrong text

ERB to generate chart looks like:

Upvotes: 1

Views: 4084

Answers (4)

Siva Praveen
Siva Praveen

Reputation: 2333

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
}

Upvotes: 1

mziwisky
mziwisky

Reputation: 345

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

Upvotes: 1

germs12
germs12

Reputation: 463

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!

Upvotes: 2

Mike Hays
Mike Hays

Reputation: 93

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

Upvotes: 0

Related Questions