Can I link to other URL's using chartkick's charts?

Question

I've got a rails 4 app and I'm using chartkick. I'm currently using pie charts, and I'm wondering if there is a way I can get each section of my pie chart to navigate to an endpoint or a url or anything really.

How would someone tackle that? Would it be done in the ERB file, or the controller? And how would it be done?

Answer 1

I've spent a lot of time trying to figure this one out myself. Unfortunately, there does not seem to be a simple 'add the link here and go' kind of option.

Chartkick allows you to specify whether you want to use the Google Charts Library or the Highcharts library. Both of these libraries allow you to draw charts where you can specify the 'click' action of a particular data point / data series. To utilize this, you can draw your chart using straight JQuery/JS -- it's much easier than it seems if you're only used to the standard chartkick stuff.

Here is the HighCharts documentation for this: http://api.highcharts.com/highcharts#plotOptions.pie.events.click

Here is an awesome blog post showing how to setup the JS/Jquery (you can convert this to Coffescript really easy using http://js2.coffee) http://birdchan.com/home/2012/09/07/highcharts-pie-charts-can-have-url-links/

His approach there works great, and, you can make it easier by creating an endpoint on your resource's controller that serves up the data hash you'll need for the chart, replacing:

data: [
            {name: 'Not Tested', color: '#FFA850', y: 87, url: 'http://my_site1.com'},
            {name: 'Fail', color: '#FF2929', y: 2, url: 'http://my_site2.com'},
            {name: 'Pass', color: '#31FF4F', y: 32, url: 'http://my_site3.com'}
        ]

With something like:

$.ajax {
url: "/place/resources/resource_id/top_members.json"
success: (data) ->
  draw_some_pie_chart(data)
}

Or you can also use the GON gem to make that hash available as a variable in your Coffeescript/JS file.

I'm sure there is a more specific/thorough way to answer your question. I can update my answer if you'd like to post samples of the code you're trying to use