to-array is not sufficient, use clj->js
On Fri, May 10, 2013 at 8:58 PM, Timothy Washington <twash...@gmail.com>wrote:
> Hi all,
>
> I'm trying to suss out some problems I'm encountering when compiling
> Clojurescript, down to Javascript. I'm using i) a 3rd-party charting
> library (highcharts.com), and ii) using cljsbuild with :optimizations
> :whitespace ( :simple doesn't make a difference).
>
> 1. Clojurescript in *fig.1*, generates the Javascript in *fig.2*. Now,
> this clojurescript compiles and runs in a browser.
> 2. But the chart doesn't render properly, as it's expecting an array
> of *arrays* (see *fig.3*), and instead, gets an array of *
> cljs.core.PersistenVector(s)*.
> 3. If I change only the *edgar.tick_list* , using fig.3, it still
> doesn't work.
> 4. I have to manually change both the tick_list, and the call (all of
> fig.3), in order for the highcharts library to render properly.
>
> What this tells me, is that there's a problem with both i) the data and
> ii) invoking the highcharts function. While legal JS, it is not usable with
> some libs, because of things like *cljs.core.PersistenVector* or
> *cljs.core.ObjMap.fromObject
> (["\ufdd0'rangeSelector",etc*. So basically I'm trying to solve that
> problem. Is there anyway to get from fig.1 to fig.3 ? Or is there another,
> cleaner solution? To some degree, we're always going to have to use
> external JS libs.
>
>
> Thanks for any insights. Code is below:
>
>
> (def *tick-list* (to-array [[1368215573010 203.98] [1368215576331 203.99]
> [1368215576857 203.99] [1368215577765 203.99] [1368215578769 204.0]
> [1368215579272 204.01] [1368215579517 204.02] [1368215581769 204.02]
> [1368215583602 204.01] [1368215585650 204.02] [1368215586060 204.02]
> [1368215587029 204.01] [1368215588318 204.02] [1368215589335 204.01]
> [1368215589536 204.01] [1368215589846 204.0] [1368215591079 203.99 ]
> [1368215591789 203.99] [1368215592104 203.98] [1368215592615 203.98]
> [1368215592758 203.99] [1368215594039 203.97] [1368215597119 203.98]
> [1368215597632 203.97] [1368215599396 203.97] [1368215603876 203.96]
> [1368215606059 203.96] [1368215610316 203.95] [1368215610634 203.95]
> [1368215610813 203.93] [1368215612886 203.95] [1368215615858 203.94]
> [1368215618621 203.94] [1368215619138 203.96] [1368215623846 203.94]
> [1368215632669 203.94] [1368215634709 203.92] [1368215636587 203.93]
> [1368215636952 203.94] [1368215638328 203.93]]))
>
> (-> ($ "#tab-one-graph")
> (.highcharts "StockChart"
> {:rangeSelector {:selected 1},
> :title {:text "Test Stock Data"},
> :series [{:name "Test Stock Data",
> :data *tick-list*,
> :marker {:enabled true, :radius 3},
> :shadow true,
> :tooltip {:valueDecimals 2}}]}
> ))
>
> *fig.1* - source Clojurescript
>
>
> *edgar.tick_list* = cljs.core.PersistentVector.fromArray
> ([cljs.core.PersistentVector.fromArray ([1368215573010, 203.98], true),
> cljs.core.PersistentVector.fromArray ([1368215576331, 203.99], true),
> cljs.core.PersistentVector.fromArray ([1368215576857, 203.99], true),
> cljs.core.PersistentVector.fromArray ([1368215577765, 203.99], true),
> cljs.core.PersistentVector.fromArray ([1368215578769, 204], true),
> cljs.core.PersistentVector.fromArray ([1368215579272, 204.01], true),
> cljs.core.PersistentVector.fromArray ([1368215579517, 204.02], true),
> cljs.core.PersistentVector.fromArray ([1368215581769, 204.02], true),
> cljs.core.PersistentVector.fromArray ([1368215583602, 204.01], true),
> cljs.core.PersistentVector.fromArray ([1368215585650, 204.02], true),
> cljs.core.PersistentVector.fromArray ([1368215586060, 204.02], true),
> cljs.core.PersistentVector.fromArray ([1368215587029, 204.01], true),
> cljs.core.PersistentVector.fromArray ([1368215588318, 204.02], true),
> cljs.core.PersistentVector.fromArray ([1368215589335, 204.01], true),
> cljs.core.PersistentVector.fromArray ([1368215589536, 204.01], true),
> cljs.core.PersistentVector.fromArray ([1368215589846, 204], true),
> cljs.core.PersistentVector.fromArray ([1368215591079, 203.99], true),
> cljs.core.PersistentVector.fromArray ([1368215591789, 203.99], true),
> cljs.core.PersistentVector.fromArray ([1368215592104, 203.98], true),
> cljs.core.PersistentVector.fromArray ([1368215592615, 203.98], true),
> cljs.core.PersistentVector.fromArray ([1368215592758, 203.99], true),
> cljs.core.PersistentVector.fromArray ([1368215594039, 203.97], true),
> cljs.core.PersistentVector.fromArray ([1368215597119, 203.98], true),
> cljs.core.PersistentVector.fromArray ([1368215597632, 203.97], true),
> cljs.core.PersistentVector.fromArray ([1368215599396, 203.97], true),
> cljs.core.PersistentVector.fromArray ([1368215603876, 203.96], true),
> cljs.core.PersistentVector.fromArray ([1368215606059, 203.96], true),
> cljs.core.PersistentVector.fromArray ([1368215610316, 203.95], true),
> cljs.core.PersistentVector.fromArray ([1368215610634, 203.95], true),
> cljs.core.PersistentVector.fromArray ([1368215610813, 203.93], true),
> cljs.core.PersistentVector.fromArray ([1368215612886, 203.95], true),
> cljs.core.PersistentVector.fromArray ([1368215615858, 203.94], true),
> cljs.core.PersistentVector.fromArray ([1368215618621, 203.94], true),
> cljs.core.PersistentVector.fromArray ([1368215619138, 203.96], true),
> cljs.core.PersistentVector.fromArray ([1368215623846, 203.94], true),
> cljs.core.PersistentVector.fromArray ([1368215632669, 203.94], true),
> cljs.core.PersistentVector.fromArray ([1368215634709, 203.92], true),
> cljs.core.PersistentVector.fromArray ([1368215636587, 203.93], true),
> cljs.core.PersistentVector.fromArray ([1368215636952, 203.94], true),
> cljs.core.PersistentVector.fromArray ([1368215638328, 203.93], true)],
> true);
>
> jayq.core.$.call (null, "#tab-one-graph").highcharts ("StockChart",
> cljs.core.ObjMap.fromObject (["\ufdd0'rangeSelector", "\ufdd0'title",
> "\ufdd0'series"], { "\ufdd0'rangeSelector":cljs.core.ObjMap.fromObject
> (["\ufdd0'selected"], { "\ufdd0'selected":1}),
> "\ufdd0'title":cljs.core.ObjMap.fromObject (["\ufdd0'text"], {
> "\ufdd0'text": "Test Stock Data"}),
> "\ufdd0'series":cljs.core.PersistentVector.fromArray
> ([cljs.core.ObjMap.fromObject (["\ufdd0'name", "\ufdd0'data",
> "\ufdd0'marker", "\ufdd0'shadow", "\ufdd0'tooltip"], { "\ufdd0'name": "Test
> Stock Data", "\ufdd0'data":*edgar.tick_list*,
> "\ufdd0'marker":cljs.core.ObjMap.fromObject (["\ufdd0'enabled",
> "\ufdd0'radius"], { "\ufdd0'enabled":true, "\ufdd0'radius":3}),
> "\ufdd0'shadow":true, "\ufdd0'tooltip":cljs.core.ObjMap.fromObject
> (["\ufdd0'valueDecimals"], { "\ufdd0'valueDecimals":2})})], true)}));
>
>
> *fig.2* - generated JS from Clojurescript
>
>
>
> *edgar.tick_list* = [[1368215573010, 203.98], [1368215576331, 203.99],
> [1368215576857, 203.99], [1368215577765, 203.99], [1368215578769, 204.0],
> [1368215579272, 204.01], [1368215579517, 204.02], [1368215581769, 204.02],
> [1368215583602, 204.01], [1368215585650, 204.02], [1368215586060, 204.02],
> [1368215587029, 204.01], [1368215588318, 204.02], [1368215589335, 204.01],
> [1368215589536, 204.01], [1368215589846, 204.0], [1368215591079, 203.99],
> [1368215591789, 203.99], [1368215592104, 203.98], [1368215592615, 203.98],
> [1368215592758, 203.99], [1368215594039, 203.97], [1368215597119, 203.98],
> [1368215597632, 203.97], [1368215599396, 203.97], [1368215603876, 203.96],
> [1368215606059, 203.96], [1368215610316, 203.95], [1368215610634, 203.95],
> [1368215610813, 203.93], [1368215612886, 203.95], [1368215615858, 203.94],
> [1368215618621, 203.94], [1368215619138, 203.96], [1368215623846, 203.94],
> [1368215632669, 203.94], [1368215634709, 203.92], [1368215636587, 203.93],
> [1368215636952, 203.94], [1368215638328, 203.93]]
>
> $("#tab-one-graph").highcharts('StockChart', {
> rangeSelector : {
> selected
> : 1},
> title : {
> text : 'Test
> Stock Data'},
> series : [{
> name : 'Test
> Stock Data',
> data : *
> edgar.tick_list*,
> marker : {
>
> enabled : true,
>
> radius : 3},
> shadow : true,
>
>
>
>
>
> tooltip : {
>
> valueDecimals : 2}}]});
>
>
> *fig.3* - alternative, hand-written JS, in console
>
>
>
> Thanks
> Tim
>
> --
> --
> You received this message because you are subscribed to the Google
> Groups "Clojure" group.
> To post to this group, send email to clojure@googlegroups.com
> Note that posts from new members are moderated - please be patient with
> your first post.
> To unsubscribe from this group, send email to
> clojure+unsubscr...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/clojure?hl=en
> ---
> You received this message because you are subscribed to the Google Groups
> "Clojure" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to clojure+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
>
--
--
You received this message because you are subscribed to the Google
Groups "Clojure" group.
To post to this group, send email to clojure@googlegroups.com
Note that posts from new members are moderated - please be patient with your
first post.
To unsubscribe from this group, send email to
clojure+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/clojure?hl=en
---
You received this message because you are subscribed to the Google Groups
"Clojure" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojure+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
