interop to ChartJs (newbie level)

[Richard Keating]

;; this works to draw in an existing canvas
;; (def c (.getElementById js/document "myChart"))
;; (def ctx (.getContext c "2d"))
;; (def chart (new js/Chart ctx))
;; (.Radar chart (clj->js @app-state))



;; but how do i create a new canvas and set the data
;; that i want it to render
(defn hello-world []
[:canvas
(fn [this]
(let [ctx (.getContext this "2d") chart (new js/Chart ctx)]
(.Radar chart (clj->js @app-state))))]

)

;; bonus: the chart some times requires a reload to adjust its
;; configuration

;; thanks for your consideration and time

[Linus Ericsson]

Either you can checkout Quil in clojurescript, which is wrapping Processing for js. It's a well designed and mostly imperative-style graphical environment.

https://github.com/quil/quil/wiki/ClojureScript

You can, of course, use the ordinary js methods to create and paint on a canvas element like these:

http://stackoverflow.com/questions/8330956/can-the-html5-canvas-element-be-created-from-the-canvas-constructor

Given that you write [:canvas ... ] in your question, maybe you want to use a templating library that uses the hiccup-styled vector-html-syntax,  like Hipo [3]. (ClojureScript doesn't interpret [:p "hello"] as a p-tag by itself, but it's a good datastructure to generate html-source, dom-nodes or even react components from.

[3] https://github.com/jeluard/hipo/

There's also a clojurescript library called Monet which seems to be designed for painting canvases:

[4] https://github.com/rm-hull/monet

React?

As you probably know, React takes a different approach to dom manipulation which makes me recommend you to avoid trying to paint canvases with it for now. Not that it wouldn't be possible - for instance Flipboard uses a react-based canvas renderer [5], but I would be very certain on both React, ClojureScript and Canvas manipulation before I would use it. Rumors claim that React was inspired by computer game graphics, which were conservative on which pixels it actually touched and something similar would indeed suit canvases very well, but I'm not wether there are any clojurescript libraries/attempts on this (although it's tempting!).

[5] https://github.com/Flipboard/react-canvas

/Linus

--
Note that posts from new members are moderated - please be patient with your first post.
---
You received this message because you are subscribed to the Google Groups "ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email to clojurescrip...@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.