Fork me on GitHub
#klipse
<
2017-01-11
>
mchampine16:01:12

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.

Yehonathan Sharvit17:01:39

On my chrome browser - this is what I see:

Yehonathan Sharvit17:01:46

What is the issue exactly?

mchampine18:01:06

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

mchampine18:01:13

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

mchampine18:01:36

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

Yehonathan Sharvit18:01:54

OK. Now I’m reproducing your issue

mchampine18:01:12

great. thanks!

Yehonathan Sharvit18:01:42

You need to use 'this'

Yehonathan Sharvit18:01:02

There is a cljs macro for that

Yehonathan Sharvit18:01:30

Can u give it a try?

mchampine18:01:04

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

Yehonathan Sharvit18:01:03

Just put (js-this) instead of x

mchampine18:01:01

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

mchampine18:01:07

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

Yehonathan Sharvit18:01:16

Put parenthesis around js-this

mchampine19:01:26

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

mchampine19:01:48

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

mchampine19:01:14

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

Yehonathan Sharvit19:01:10

Will connect in an hour or so

Yehonathan Sharvit19:01:24

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

Yehonathan Sharvit19:01:58

This one works also:

Yehonathan Sharvit19:01:02

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

mchampine20:01:37

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

mchampine20:01:26

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

Yehonathan Sharvit20:01:31

What are your plans with highcharts and klipse @mchampine ?

mchampine20:01:03

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.

Yehonathan Sharvit20:01:41

I’m so happy to hear