How can I mix a column and line chart in Rails using Chartkick?

Question

I would like to present graphs in my rails app. I was able to find a lot of projects that could do that, as Chartkick. But I would like to have charts like this one, where I max lines and columns. Is there any project that is able to draw this kind of graphs? I was not able to find anything on chartkick's website or Google.

score 6 · Answer 1 · answered Apr 14 '14 at 23:16

6

You could do it like this using chartkick:

= column_chart(@your_data, library: { :series => { 0 => { type: "line"} } })

This will set the first series in @your_data as the line chart. Of course you can set every other series in that as well just exchange the "0" for another number.

I hope this helps!

answered Apr 14 '14 at 23:16

tomr

1,134
2
10
25

1

maybe you can show how this would look like in javascript? – JNM Dec 15 '14 at 11:04
1

I wasn't able to get this to work. It seems to be contradicted by [this](https://github.com/ankane/chartkick/issues/263#issuecomment-339586412): "Chartkick doesn't currently support any type of combo chart." – klenwell Jul 28 '18 at 19:59
It doesn't work with chartkick gem, any luck yet ? @klenwell – chrisgeeq Jul 30 '19 at 11:25
2

@klenwell that does actually work but you need to add: `adapter: 'google', library:...` and you need: `javascript_include_tag "https://www.gstatic.com/charts/loader.js"` – Khalil Gharbaoui Jun 20 '20 at 03:21

usha · Accepted Answer · 2014-03-19T20:48:44.983

2

Google Visualization Combo charts should be able to do what you are looking for

Have a look at documentation for more info

Js Fiddle

edited Mar 19 '14 at 20:48

answered Mar 19 '14 at 20:42

usha

28,973
5
72
93

score 2 · Answer 3 · answered May 12 '15 at 05:57

This can be done in Javascript using something like:

new Chartkick.AreaChart("chart", [{"name":"Series 1","data":{"2013-03-11 00:00:00 -0700":3,"2013-03-31 00:00:00 -0700":5}},{"name":"Series 2","data":{"2013-02-10 00:00:00 -0800":0,"2013-02-17 00:00:00 -0800":0}},{"name":"Series 3","data":{"2013-02-10 00:00:00 -0800":0,"2013-02-17 00:00:00 -0800":1}}], { library: { series: { 0: { color: "blue" }, 1: { type: "line", color: "yellow" }, 2: { type: "line", color: "green" } } } }  );

Series 2 and 3 will be lined, and Series 1 will be an area chart. :)

(This is primarily a response to JNM's question on Timo's answer, but I can't reply to comments at the moment. :/ )

How can I mix a column and line chart in Rails using Chartkick?

3 Answers3