:formatter not working for dataLabels #73

Closed
abrambailey opened this Issue Aug 31, 2012 · 23 comments

Projects

None yet

3 participants

@abrambailey

The following code:

f.series(:data => @values, :dataLabels => { :formatter => "function() { return this.x; }".js_code, :enabled => true, :rotation => 90, :x=>-3, :y=>15, :color=>"#FFFFFF" } )

...works with the exception of the formatter function. Not quite sure why as the very next line contains a similar formatter for tooltip which does work:

f.options[:tooltip][:formatter] = "function() { return ''+ this.x +': '+ this.y.toFixed(1) +' %'; }".js_code

@xiaods xiaods was assigned Aug 31, 2012
Owner

look the readme to see how to include javascript functions

regards

Atte.
Miguel Michelson Martinez
www.artenlinea.com

On Thu, Aug 30, 2012 at 8:44 PM, Abram Bailey notifications@github.comwrote:

The following code:

f.series(:data => @values https://github.com/values, :dataLabels => {
:formatter => "function() { return this.x }".js_code, :enabled => true,
:rotation => 90, :x=>-3, :y=>15, :color=>"#FFFFFF" } )

...works with the exception of the formatter function. Not quite sure why
as the very next line contains a similar formatter for labels which does
work:


Reply to this email directly or view it on GitHubhttps://github.com/michelson/lazy_high_charts/issues/73.

I have included a js function successfully (see the bottom of my previous post) .. but it's not working in the code that appears in:

f.series(:data => @values, :dataLabels => { :formatter => "function() { return this.x; }".js_code, :enabled => true, :rotation => 90, :x=>-3, :y=>15, :color=>"#FFFFFF" } )

TypeError: f.formatter.call is not a function <= the error I see in firebug

Owner

Hi Adam, try this

f.series(:data => @values https://github.com/values, :dataLabels => {
:formatter => %|function() { return this.x; }|.js_code, :enabled => true,
:rotation => 90, :x=>-3, :y=>15, :color=>"#FFFFFF" } )

Atte.
Miguel Michelson Martinez
www.artenlinea.com

On Thu, Aug 30, 2012 at 9:35 PM, Abram Bailey notifications@github.comwrote:

I have included a js function successfully (see the bottom of my previous
post) .. but it's not working in the code that appears in:

f.series(:data => @values https://github.com/values, :dataLabels => {
:formatter => "function() { return this.x; }".js_code, :enabled => true,
:rotation => 90, :x=>-3, :y=>15, :color=>"#FFFFFF" } )

Reply to this email directly or view it on GitHubhttps://github.com/michelson/lazy_high_charts/issues/73#issuecomment-8180193.

Thanks for the help Miguel. Unfortunately this code is still producing the same TypeError as above.

Owner

could you paste the html output of the generated chart , and the js console
error if any ?

regards

Atte.
Miguel Michelson Martinez
www.artenlinea.com

On Thu, Aug 30, 2012 at 9:45 PM, Abram Bailey notifications@github.comwrote:

Thanks for the help Miguel. Unfortunately this code is still producing the
same TypeError as above.


Reply to this email directly or view it on GitHubhttps://github.com/michelson/lazy_high_charts/issues/73#issuecomment-8180326.

https://gist.github.com/3547612 <= js console ... error => "TypeError: f.formatter.call is not a function"

https://gist.github.com/3547680 <= html source

Has something to do with the quotes, I'm guessing. "formatter":"function() { return this.x; }"

The quotes don't appear around the working formatter function.

Owner

ok , you have to calls to functions

  1. "formatter": function() { return ''+ this.x +': '+
    this.y.toFixed(1) +' %'; }
    it seems to be fine
  2. {"formatter":"function() { return this.x; }",
    is wrong, because is a string and not js function,

can you fix the second formatter function with the %| |.js_code and check
again ?

regards

Atte.
Miguel Michelson Martinez
www.artenlinea.com

On Thu, Aug 30, 2012 at 9:53 PM, Abram Bailey notifications@github.comwrote:

https://gist.github.com/3547612 <= js console ... error => "TypeError:
f.formatter.call is not a function"

https://gist.github.com/3547680 <= html source


Reply to this email directly or view it on GitHubhttps://github.com/michelson/lazy_high_charts/issues/73#issuecomment-8180448.

Thanks Miguel. I am actually using that code to generate the error. :formatter => %|function() { return this.x; }|.js_code,

Owner

Hi Adam , could you paste the ruby implementation ?

i think we have a bug here , what do you think @xiaods ?

   @lazybrands = LazyHighCharts::HighChart.new('graph') do |f|
      f.options[:chart][:defaultSeriesType] = "column"
      f.options[:chart][:height] = 230
      f.options[:chart][:width] = 200
      f.options[:chart][:backgroundColor] = "#F0F0F0"
      f.options[:title][:text] = "Top Brands by Score"

      @values=[]
      @categories=[]
      @brands.each do |brand|
        @categories.push Brand.find(brand.brand_id).name
        @values.push brand.avg_score.to_f
      end
      f.options[:legend][:enabled] = false
      f.options[:xAxis][:categories] = @categories
      f.series(:data => @values, :dataLabels => { :formatter => %|function() { return this.x; }|.js_code, :enabled => true, :rotation => 90, :x=>-3, :y=>15, :color=>"#FFFFFF" } )
      f.options[:tooltip][:formatter] = "function() { return '<b>'+ this.x +'</b>: '+ this.y.toFixed(1) +' %'; }".js_code
    end

By the way, I should mention return this.y doesn't work either.. but I really wanted to post the Brand name on the column, not the value.

Collaborator
xiaods commented Aug 31, 2012

@funkdified this is no bug, the result is based on http://api.highcharts.com/highcharts#series api description.

in series definition, you can see, only support below node:
data
dataParser
dataURL
index
legendIndex
name
stack
type
xAxis
yAxis

please conformed this api. thanks for your comments .

@xiaods xiaods closed this Aug 31, 2012

"dataLabels: Object
Individual data label for each point. The options are the same as the ones for plotOptions.series.dataLabels"

Collaborator
xiaods commented Aug 31, 2012

Oops, this is trick. you can do it with this style:

data: [{
name: 'Point 1',
color: '#00FF00',
y: 0,
dataLabels : { :formatter => %|function() { return this.x; }
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5,
dataLabels : { :formatter => %|function() { return this.x; }
}]

@xiaods xiaods reopened this Aug 31, 2012
Collaborator
xiaods commented Aug 31, 2012

f.series(:data => @values, :dataLabels => { :formatter => %|function() { return this.x; }|.js_code, :enabled => true, :rotation => 90, :x=>-3, :y=>15, :color=>"#FFFFFF" } )

this above mistake is you already render data Object, you can't inject dataLabels to this array . this is root caused from you code.

Wait, why do the data labels show up at all if the data object was rendered without datalables?

The data labels appear, but only disappear when I add the formatter...

Collaborator
xiaods commented Aug 31, 2012

As clarify sample, i suppose your data is data: [0, 5]
you can change the style to apply dataLabels.

data: [{
name: 'Point 1',
color: '#00FF00',
y: 0,
dataLabels => { :formatter => function() { return this.x; }
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5,
dataLabels => { :formatter => function() { return this.x; }
}]

you should convert above code to ruby style. use lazy_high_charts to render your charts. but i am not sure this can work for gem 1.2.0, but i can say, lazy_high_charts should keep consistent function with js library.

Ok, I am just having a problem putting a loop inside data: []

Basically what you are saying though is that I cannot pass an array like [1, 2, 3] in as data because I will need to feed individual y points.

Collaborator
xiaods commented Aug 31, 2012

@funkdified crafting data point is very advance usage for highcharts. I have use it to decorate my project chart, but i can't introduce in our lazy_high_charts. so you are luck to introduce this task to me. give me some time, let me evaluate it implements.

@xiaods No problem. Thanks for the help. I will leave off the labels until further notice :)

Collaborator
xiaods commented Aug 31, 2012

in my experience, you temporary keep js version is works. paste a Fiddle version as my sample is prefer action. at last, thanks for your participate.

Collaborator
xiaods commented Aug 31, 2012

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/point/datalabels/

lucky, in my local demo projects. it's seem works for gem 1.2.0. give me some time. i will confirmed it. stay tuned!

@xiaods xiaods added a commit to xiaods/lazy_high_charts that referenced this issue Aug 31, 2012
@xiaods xiaods fixed #73,#72,74 bugs for series js_code render e0a3948
@xiaods xiaods closed this Aug 31, 2012

@xiaods - My code works now. You are a genius. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment