Clojurians Log v2

Hi All. This blog entry shows the use of Klipse with HighCharts. http://ingesolvoll.github.io//2017/01/01/how-to-use-a-charting-library-in-reagent.html Very nice. Starting from there, I'm trying to figure out how to configure a HighChart with a y-axis label formatter function. I currently have it specified as: :yAxis {:title {:text "Billions"} :labels {:formatter (fn [x] (/ x 1000.0))}} . This generates a javascript function: {:formatter #object[Function "function (x) {return (x / (1000)); }”]} but the chart doesn’t have any y axis values. See http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/area-stacked/ for how it’s done in straight javascript. Does anyone here know how this would be done?? I’m wondering if there’s some klipse/reagent/javascript interop magic that I’m missing.

On my chrome browser - this is what I see:

What is the issue exactly?

Would you please share your chart config? My rendered chart doesn’t show any y axis values.

(def default-config {:chart {:type :area} :title {:text "Historic and Estimated Worldwide Population Growth by Region"} :subtitle {:text "Source: http://Wikipedia.org"} :xAxis {:categories ["1750", "1800", "1850", "1900", "1950", "1999","2050"] :tickmarkPlacement :on :title {:enabled :false}} :yAxis {:title {:text "Billions"} :labels {:formatter (fn [x] (/ x 1000.0))}} :tooltip {:split :true, :valueSuffix "millions"} :plotOptions {:stacking :normal} :legend {:layout :vertical :align :right :verticalAlign :middle :borderwidth 0} :series [{:name "Asia" :data [502, 635, 809, 947, 1402, 3634, 5268]} {:name "Africa" :data [106, 107, 111, 133, 221, 767, 1766]} {:name "Europe" :data [163, 203, 276, 408, 547, 729, 628]} {:name "America" :data [18, 31, 54, 156, 339, 818, 1201]} {:name "Oceania" :data [2, 2, 2, 6, 13, 30, 46]}]}) (reset! config-atom default-config)

I’ve just opened the jsfiddle you sent http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/area-stacked/

Oh, I’m trying the above config in the klipse + highcharts blog page..

Oh I see

Let me try it

OK. Now I’m reproducing your issue

great. thanks!

You need to use 'this'

There is a cljs macro for that

Its (js-this)

Can u give it a try?

Where is it applied? I tried it as a wrapper around my formatter function - but that didn’t work.

No no

Just put (js-this) instead of x

Ok, I have {:formatter (fn [] (/ js-this 1000.0))} - the output looks “right” but still not seeing y axis..

output is {:formatter #object[Function "function (){return (cljs.core.js_this / (1000));}

Put parenthesis around js-this

Input: {:formatter (fn [] (/ (js-this) 1000.0))} output: {:formatter #object[Function "function (){return (this / (1000));} Looking better! But still no joy. 😞

Do you have it working? Can you share the exact formatter function?

Im on my phone

ah, sorry. I think we’re getting closer.. I really appreciate the help so far.

😊

Will connect in an hour or so

Here you go

(fn [] (/ (js* "this.value") 1000.0))

This one works also:

(fn [] (/ (.-value (js-this)) 1000.0))

@mchampine does it work for u?

Yes!! Both work. Thank you! Now I need to understand why. 🙂

(not saying that you need to explain - Just that I want to figure it out!)

Ok

What are your plans with highcharts and klipse @mchampine ?

Two fold: 1) The topic of the Boston Clojure Group meetup tomorrow is “Klipse” and I wanted some nice use cases. (I organize Boston Clojure Group). 2) I wanted a quick and easy-to-use method to create and share modifiable charts at work. This seems like a great fit.

I’m so happy to hear