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.
