EzDevInfo.com

How to change the color of a Column-chart created with Chartkick?

Is it possible to change the color of a Column-Chart created with Chartkick ? I searched for it inside the Documentation but it found nothing about it. Any Ideas ?

Rails Active Admin + Chartkick = Not working?

I was trying to use Chartkick to generate graph that shows on rails active admin dashboard. Here is the tutorial I am using: http://www.patrickedelman.com/simple-charting-for-activeadmin/

However, the graph did not show up, instead, it shows "Loading..."

I already include javascript_include_tag "//www.google.com/jsapi", "chartkick" and gem chartkick is installed, but it still does not work.

Please help! Thank you.

Rails 4: Removing grid lines chartkick?

Hi I am trying to make that code work in order to remove both axis using Chartkick with rails 4:

<%= line_chart Score.where(employee_id: params[:id]).limit(10).group(:created_at).sum(:average), :library => {hAxis: {lineColor: 'transparent'}, vAxis: {lineColor: 'transparent'}, title: "#{@employee.name} latest results"}, max: 5.5, min: 0%>

But it does not work here is what I get:

I just want the blue line, I do not want the grid lines and the axis names.

thanks for your help.

Convert Chartkick graph to Image serverside in rails 4 app

How do you convert Chartkick (using google charts) graphs to image at server side in rails 4 app?

ReferenceError: Chartkick is not defined

I am using chartkick gem to display chart. I have followed the proper installation documentation but whenever I am trying to use their methods like

timeline [["Washington", "1789-04-29", "1797-03-03"], ["Adams", "1797-03-03", "1801-03-03"], ["Jefferson", "1801-03-03", "1809-03-03"]]

It's showing error in the firebug ReferenceError: Chartkick is not defined

Rails chartkick: customizing separate curves in multi series line chart?

I'm using chartkick to make a multiple series line chart with the following code:

<%= line_chart [
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]},
    {name: "Goal trend line", data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]]}
    ]%>

And this is what it looks like:

The basic idea is that the blue is the stuff entered in by the user, the red is their goal the the yellow joins the user's most recent entry to the goal in a sort of "trend line". I wanted to customize the trendline to have no endpoints (pointSize: 0) and be dashed (lineDashStyle: [5,5]), but not the other two. I tried doing this

<%= line_chart [
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]},
    {name: "Goal trend line", data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]] , library:  {pointSize: 0, lineDashStyle: [5,5]}}
    ]%>

but it didn't work since I got the same output as before and tried doing this

<%= line_chart [
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]},
    {name: "Goal trend line", data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]]}
    ] , library:  {pointSize: 0, lineDashStyle: [5,5]} %>

but that made ALL the lines dashed and vanished all the points, as expected:

So how do I make these attributes only apply to the one curve but not the other two? If there isn't a direct chartkick implementation, It would also be helpful to know how I could do this using only google charts. Just as long as I get the functionality!

--

EDIT 1: After seeing this, I tried to use the series option to vary some parameter (here: lineWidthsince it was easiest to type), but this also didn't work, I got an error message. This was my code:

<%= line_chart [
    {data: [[most_recent_record(@track).time_entered, most_recent_record(@track).entry], [@track.goal_by, @track.goal]]},
    {name: @track.name, data: records_of_track(@track).map{|record| [record.time_entered, record.entry]}},
    {name: "Goal", data: [[@track.goal_by, @track.goal]]}

] , library:  library_settings %>

with

<% library_settings = {
    width: 600,
    vAxis: {ticks: choose_ticks(@track)},
    colors: ['ff9900', '3366cc', 'dc3912'],
    series: {
        0: {lineWidth: 1},
        1: {lineWidth: 2},
        2: {lineWidth: 10}
    }
} %>

but I only got the error

....html.erb:16: syntax error, unexpected ':', expecting => 0: {lineWidth: 1}, ^ ....html.erb:16: syntax error, unexpected ',', expecting keyword_end ....html.erb:17: syntax error, unexpected ',', expecting keyword_end ....html.erb:19: syntax error, unexpected '}', expecting keyword_end

Chartkick column charts multiple colors

I'm using chartckick in my RoR project to generate charts, which works quite nice. (along with Google Charts).

I've created a column chart with only 2 bars (male and female).

And now the client wants that each bar have different color? Is that possible?

I've seen this post - How to change the color of a Column-chart created with Chartkick? but it's more then half of year old and I'm hoping that there is a way now to specify more colors to the bars.

Update

My code looks like:

Controller

@followers_gender_count = Project.find(params[:id]).followers.group(:gender).count

View

<%= column_chart parse_gender_data(@followers_gender_count) %>

Helper

def parse_gender_data(data)
  gender_data = Hash.new
  gender_data[:male] = data[1]
  gender_data[:female] = data[2]
  ({ 'Male' => gender_data[:male], 'Female' => gender_data[:female] })
end

Update 2 - Issue on GitHub

Sinatra and Chartkick Example

I am quite new to Ruby as web platform and learn best by adapting and expanding examples. I like Sinatra and want to use it and Chartkick to display charts. Unfortunately, I'm having trouble getting even the most trivial example running and there seems to be a dearth of full examples (lots of 'one liners'). Here's what I have:

require 'sinatra'
require 'chartkick'

get '/' do
'<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
 <%= pie_chart({"Football" => 10, "Basketball" => 5}) %>'
end

So what devastatingly simple thing am I doing wrong? Any help would be greatly appreciated. Thanks!

EDIT, my solution based on accepted answer:

require 'sinatra'
require 'chartkick'

template :layout do
<<LAYOUT
<html>
<head>
<title>Sinatra ERB Chartkick Test</title>
<script src="//www.google.com/jsapi"></script>
<script src="chartkick.js"></script>
</head>
<body>
<%= yield %>
</body>
</html>
LAYOUT
end

template :index do
<<INDEX
<center>
<h1>#{Time.now.inspect}</h1>
<p>
<%= pie_chart({"Football" => 10, "Basketball" => 5, "Hockey" => 2}) %>
</p>
</center>
INDEX
end

get '/' do
    erb :index
end

Additionally, for the sake of newbies (like me), I put the chartkick.js file in the public folder. Also added Hockey just to make sure it wasn't magically defaulting to some canned example. And who doesn't like hockey?

Rails + Chartkick: How to change the date format of the tooltip?

I am generating the chart (with using Google Chart) this way:

  <%=
    area_chart [{:name => "Sold items", data: @items.group(:created_at).count}], :library => {hAxis: {title: "Period"}, vAxis: {title: "Amounts in UDS"}, title: "History Of Sales"}  
  %>

And the chart is nicely generated, but there's one thing that I am trying to change - the tooltip looks like this:

Information in the tooltip are correct, but instead of displaying Oct 19, 2014, 2:00:00 AM I would love to display only Oct 19, 2014.

Is there any way to do it with Chartkick?

Thank you very much for your time.

Rails chartkck stacked bar charts

I'm trying to create a stacked bar chart using Rails Chartkick gem and I'm using Google charts API.

I have use this line to generate the bar chart using chartkick.

<%= bar_chart data, :library => {:isStacked => true} %> 

But what i'm getting is a simple bar chart not a stacked one.My question is what is the structure of the data which i should pass to data parameter. I have try passing an array, like(from google charts samples)

[['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General','Western', 'Literature', { role: 'annotation' } ],['2010', 10, 24, 20, 32, 18, 5, '']]

but it didn't worked

Thanks in advance.

ChartKick charts do not show when rendering to PDF using Wicked_PDF

I am using Rails 4, Wicked_PDF and Chartkick Gem's
For Google Charts I use:

<%= javascript_include_tag "//www.google.com/jsapi", "chartkik" %>

The html view comes up with charts and everything as expected. When I append .pdf to the url the pdf document shows in the browser but the ChartKick charts do not show.
The following error appears where the chart should be:

Error Loading Chart: No adapter found

I have found the following online in the PDFKit documentation.

Resources aren't included in the PDF: Images, CSS, or JavaScript does not seem to be downloading correctly in the PDF. This is due to the fact that wkhtmltopdf does not know where to find those files. Make sure you are using absolute paths (start with forward slash) to your resources. If you are using PDFKit to generate PDFs from a raw HTML source make sure you use complete paths (either file paths or urls including the domain). In restrictive server environments the root_url configuration may be what you are looking for change your asset host.

I am assuming that wkhtmltopdf is not finding the link to the charts, but I am not sure how to fix this.
Does anyone have a suggestion?

I found this link:
Render jQuery in wicked_pdf

Where Unixmonkey helps FattRyan to solve this for Highcharts.

Can anyone help how to set this wicked_pdf_javascript_include_tag so that Wicket_PDF will accept charts from Chartkick using Google charts?

How to customize legend in Google Charts with Chartkick

I'm using Chartkick for visualization some statisitcs data in my Ruby-on-Rails project. Chartkick based on Google Charts. Is there some way to customized data output in legend of chart?

For example:

= pie_chart User.get_country_statistic, library: {legend: {position: "left"}, chartArea: {left:0, width:'100%'}}

It gives

But I need something like this:

I.e. more information in legend. How I can get it?

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

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?

Rails reload chartkick based on form input

I'm using chartkick in a rails 4 app. I currently run this code:

<%= bar_chart groupArticles(metric, limit) %> (groupArticles() being a custom method to get an array into chartkick. For example <%= bar_chart groupArticles("views", 5)%> gives me the top five articles by the views metric.

Now the question is this: I want to have a little form where the user can for select a different metric or limit to be passed in (i.e. change it to top 3 or from views to date or w/e).

I want to reload the chart then (I have URL params to get other stuff on the page so I can't use new url params to achieve this (i think?).

The reason behind that is that I have a table where I use url params to sort it by on the same page. I don't want the user to loose this current sorting if he changes the graph.

Is this possible? How do I build that form?

Making line straight in a line_chart using chartkick and removing dots

I am using a very nice gem to create charts using Ruby on Rails. But I am struggling to make a line chart with straight lines connecting the dots. It always creates curves. I need straight lines. Also I want to know if someone knows how to remove the dots from the line. I could not find a way to do it.

Chartkick.options = {
  height: "300px",
  min: -5, 
  max: 10,
  discrete: true,
}

<% series_a = {"10" => -5, "11" => 9,"12" => 3,"13" => -1,"14" => 4,"15" => -2,"16" => -4} %>

<%= line_chart [{name: "Series A", data: series_a}] %>