6

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).

enter image description here

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

Community
  • 1
  • 1
Vucko
  • 20,555
  • 10
  • 56
  • 107

3 Answers3

8

The following also works. I didn't need any new files in initializers (no chartkick.rb file), this just worked by adding the following code to my helper file:

  def networth_data
    [
      {name: "Assets", data: {"NetWorth": 6979.53}}, 
      {name: "Liabilities", data: {"NetWorth": 10532.32}}
    ]
  end

And then in my html.erb i specified the colors and other options I wanted:

<%= column_chart networth_data, 
  colors: ["green", "#FF0000"], 
  library: {backgroundColor: "#FFF", height: 265} %>

...renders this chart:

enter image description here

jtlindsey
  • 4,346
  • 4
  • 45
  • 73
5

From @buren's comment on GitHub it seems that using a different JSON structure will invoke different colors on the column_cart.

I changed the output in the Helper:

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

And created the chartkick.rb config file (config/initializers/chartkick.rb), adding some colors:

Chartkick.options = {
  colors: ["#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8"]
}

Which outputs the desiring result:

enter image description here

Vucko
  • 20,555
  • 10
  • 56
  • 107
1

Have you seen ColumnStyles

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2010', 14, 'color: #76A7FA'],
        ['2020', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

but take a look at the link there are some really cool stuff there

MZaragoza
  • 10,108
  • 9
  • 71
  • 116
  • How to apply that code in ruby? I've updated the OP with my code. – Vucko Dec 29 '14 at 06:59
  • @Vucko do where do you have the settings for the colors or style you want to use? – MZaragoza Dec 29 '14 at 15:36
  • @Vucko take a look at https://github.com/ankane/chartkick/blob/master/lib/chartkick/helper.rb lines (15-17) you can see that it takes 2 parameters `data_source`, and `options` as a hash so you could do `<%= column_chart parse_gender_data(@followers_gender_count, style_hash) %>` – MZaragoza Dec 29 '14 at 15:42
  • I tried like this [comment on github](https://github.com/ankane/chartkick/issues/149#issuecomment-66792065) but it doesn't work. Also, I tried like `[['Male', 23, 'color:red'], ['Female', 123, 'color:green']]` but it also doesn't work. Can you make a working example/fiddle? – Vucko Dec 29 '14 at 15:57