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?
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
Related
Im trying to generate charts using Google Spreadsheets as datasource.
Highcharts has the following demo which works just fine:
Highcharts.chart('container', {
title: {
text: 'Highcharts data from Google Spreadsheets'
},
data: {
googleSpreadsheetKey: '0AoIaUO7wH1HwdENPcGVEVkxfUDJkMmFBcXMzOVVPdHc'
}
});
However, when I try to use my own spreadsheet there seems to be a problem.
I can only assume that I must be missing something regarding the sharing of the file.
Here is the file im trying to use:
( I have the spreadsheet sharing set up so that anyone with the link can see it.)
https://docs.google.com/spreadsheets/d/1oZK-vdEf2vBhvmAmdrKt1xHNlCXehV-WHDShkZUUaBM/edit#gid=0
Here is a fiddle where I first load the demo-file and then (fail) to load my own file.
http://jsfiddle.net/bald1/5y6onf3y/
Have someone encountered similar problem and might have a solution?
Thank you.
EDIT:
The suggested solution is loading the data the same way as I am currently doing it. By using the key.
I have 2 identical sheets. The only differences ( that im aware of ) is that one is shared from my google account and the other one from someone elses.
To make the spreadsheet available for Highcharts it is required to publish it to the web, so the callback script can be executed.
File -> Publish to the web...
New to Rails. How can I export data from my database( I'm using Sqlite3) into a chart in rails? I have 2 columns I would like to visualizes, Timestamps and Decimal values.
I have seen plenty of examples on how to display data with Google Charts in rails, but never data from a db.
Any instruction or examples would be appreciated.
Well, I guest you are using googlecharts gem. In the page there are a lot of really basic examples. like this one:
Gchart.line(:data => [0, 40, 10, 70, 20])
So, instead of put the numbers, yo can put your data like this
Gchart.line(:data => MyModel.pluck(:my_attribute))
where my_atributte is a column in the MyModel Object
this will create a link like this:
http://chart.apis.google.com/chart?chd=s:AjI9R&cht=lc&chs=300x200&chxr=0,0,70
and you can use it as you want... maybe put in a img tag or whatever
write a webservice which will return json data, use that to populate charts
look here http://pivotallabs.com/building-a-fast-lightweight-rest-service-with-rails-3/
I'm using the High Charts library with rails using the gem found here. Everything is working very nicely, except when I try and add a plotLine to either axis, I can't seem to figure it out. Here are the two options that I've tried so far and their results. Any insight into what is happening would be much appreciated.
Option 1:
chart.yAxis([{title: 'Y-Axis', min: 0, plotLines: {value: 25}])
Result: I get an error in the JavaScript of
Uncaught TypeError: Object #<Object> has no method 'concat'
Specifically, this is referencing the following code in highcharts.js
each((options.plotLines || []).concat(options.plotBands || []), function (plotLineOptions) {
//plotLinesAndBands.push(new PlotLineOrBand(plotLineOptions).render());
axis.addPlotBandOrLine(plotLineOptions);
});
When I pause the execution there the options.plotLines variable is an Object and not an Array, hence no concat method.
Option 2:
chart.yAxis([{title: '', min: 0, plotLines: [{value: 25}]}])
Result: The page fails to render with the following error message from Rails.
You must pass a Hash to Highcharts::Axis::PlotLines. You passed [{:value=>25}]
I'm not sure what to make of this, however, given the API documentation of high charts I would of expected this to work, as I would like to give more than 1 plotLine.
I have also attempted to use chart.renderer.path but that has failed as well. Can someone please explain what is going on, and hopefully suggest a way that I can draw a horizontal line across a High Charts graph in Rails with this gem.
Thanks
I actually figured this out by manipulating the underlying javascript produced by the HighCharts ruby object. Here is the code to do it
chart.yAxis([{title: '', min: 0, plot_lines_replace: plot_lines}])
# Because of a bug in this High Charts rails library, I'm going to have
# to add the plot_lines myself through the javascript
return chart.to_s.gsub("plot_lines_replace", "plotLines").html_safe
This will modify the plot_lines_replace string with plotLines in the javascript and it will work correctly.
As far as I can tell from the documentation and ReadMe for the gmaps4rails gem, you need to a model to set as acts_as_gmappable in order to use this wrapper.
In my case I am using simple a form_tag and text_field_tag elements in order to gather the addresses I want to display, and then I want to pass it through the wrapper in order to render the Google Map. I am not storing this gathered data in a database or model.
My questions are:
Can this be done with gmaps4rails? If yes can you direct me to an example of a model-less use case or give me any tips on how to do this?
If it can't be done with gmaps4rails, is there another gem/wrapper that would work? (I eventually want to show routes and directions)
I understand that I can use the original Google Maps JS V3 API, however I'm trying to keep it in Rails if possible because I'm a total newbie (business guy that decided to learn Rails and make a proto himself in order to attract a tech co-founder) and it seems like it'd be easier to use a wrapper than try to integrate with the API.
Thank you in advance for your help!
You could do this with gmaps4rails.
No need for acts_as_gmappable which is meant to geocode addresses.
Simply provide the view with something like:
#markers_json = [{lat: , lng:, description: }, {lat: , lng:, description: }].to_json
description will be displayed in infowindow.
We are using highcharts as our charting library. It's great and exporting works well in all scenarios except one. We have a donut chart with two levels. When it is rendered in the browser it shows up fine:
If you now export this chart using the default highcharts service it shows a bit like this:
Anyone know why this is happening and if there is any way we can fix this?
I would recommend creating a fiddle of your problem, and emailing HighCharts support about it (or link the fiddle here), they are very helpful and usually respond quickly.
Your problem does however seem to be related to your code as I also generate and export donut charts with no problems
My mistake in the configuration was when I was dynamically updating the colour:
chart.series[0].data[s].update({color: "#FFFFFF")}, false);
This didn't just mean I was updating the color but also the whole point. This meant that by running the above I was running y to nothing! Although the chart displayed ok the data sent to the exporting service was with unset values for the slices.. hence the empty slices in the chart. to fix it I had to do something like:
chart.series[0].data[s].update({
color: "#FFFFFF",
y: chart.series[0].data[s].y,
name: chart.series[0].data[s].name,
)}, false);