This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-01-11
Channels
- # admin-announcements (3)
- # beginners (51)
- # boot (14)
- # cider (55)
- # cljsrn (5)
- # clojure (105)
- # clojure-austin (2)
- # clojure-brasil (3)
- # clojure-dusseldorf (2)
- # clojure-greece (5)
- # clojure-italy (1)
- # clojure-mexico (1)
- # clojure-russia (74)
- # clojure-spec (66)
- # clojure-uk (22)
- # clojurescript (124)
- # cursive (10)
- # datomic (79)
- # events (2)
- # immutant (3)
- # jobs (4)
- # klipse (38)
- # leiningen (2)
- # luminus (1)
- # off-topic (25)
- # om (48)
- # om-next (36)
- # on (1)
- # onyx (19)
- # overtone (3)
- # pedestal (2)
- # proton (3)
- # re-frame (178)
- # reagent (49)
- # ring-swagger (1)
- # spacemacs (10)
- # specter (29)
- # testing (5)
- # untangled (6)
- # yada (65)
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 see
Let me try it
OK. Now I’m reproducing your issue
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.
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. 😞
Im on my phone
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?
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