How do I use Google Charts in Clojurescript with om?

Question

I am a Clojurescript newbie and looking to port over my backbone.js based application onto CLojurescript + om. I have gone over the om tutorials and yet I do no understand how to display a chart using Google charts' syntax etc. in my clojurescript om ui. Other charting libraries have clojurescript binding but unfortunately my application has to be using Google Charts as our backend is producing JSON data formatted for use with Google Charts.

Any sample application/skeletal code would be deeply appreciated.

naomi · Answer 1 · 2016-02-15T20:09:20.483

The way using Google charts is creating a chartWrapper object (see here) when the containerId option is set with your chart-container dom-element id. Then in order to draw the chart simply call the chartWrapper.draw() function.

The question is when to draw the chart?
So sure we must do that after the element has mounted, The om way for rendering extra elements into a dom element after its mount is implementing the IDidMount protocol, So your code should look something like this:

(defn chart-view [data owner]
  IDidMount
  (did-mount [this]
    (let [wrapper-args (clj->js
                          {:chartType "line-chart"
                           :dataTable data
                           :containerId "chart-container"
                           :options {...}})
         chart-wrapper (js/google.visualization.ChartWrapper. wrapper-args)]
      (om/set-state! owner :chart-wrapper chart-wrapper);keep the wrapper in the state for later access           
      (.draw chart-wrapper))
  IRender
  (render [this]
    (dom/div #js {:id "chart-container"})))

If you need to re-draw the chart when the data changes, implement the IDidUpdate protocol like this:

IDidUpdate
(did-update [this _ _]
  (let [chart-wrapper (om/get-state owner :chart-wrapper)]
    (.setDataTable chart-wrapper (om/get-props owner))
    (.draw chart-wrapper)))

How do I use Google Charts in Clojurescript with om?

1 Answers1