calling javascript from clojurescript (canvasjs)

Question

I have trouble converting the following javscript call for canvasjs to clojurescript:

var chart = new CanvasJS.Chart("chartContainer", {

  title:{
    text: "Fruits sold in First Quarter"              
  },
  data: [//array of dataSeries              
    { //dataSeries object

     /*** Change type "column" to "bar", "area", "line" or "pie"***/
     type: "column",
     dataPoints: [
     { label: "banana", y: 18 },
     { label: "orange", y: 29 },
     { label: "apple", y: 40 },                                    
     { label: "mango", y: 34 },
     { label: "grape", y: 24 }
     ]
   }
   ]
 });

Can someone please point me into the right direction on how to do it or provide an example?

Best Regards, Sven

Answer 1

What's the problem you are encountering? It is straightforward js interop:

(def chart (js/CanvasJS.Chart. "chartContainer" (clj->js {
  :title {:text "Fruits sold in First Quarter"}
  :data [{:type "column"
          :dataPoints [{ :label "banana" y: 18 }
                       { :label "orange" y: 29 }
                       { :label "apple"  y: 40 }
                       { :label "mango"  y: 34 }
                       { :label "grape"  y: 24 }]}]})))

Which compiles to:

cljs.user.chart = (new CanvasJS.Chart("chartContainer", cljs.core.clj__GT_js.call(
  null, new cljs.core.PersistentArrayMap(null, 2, [new cljs.core.Keyword(
      null, "title", "title", 1124275658), new cljs.core.PersistentArrayMap(
      null, 1, [new cljs.core.Keyword(null, "text", "text", 1017460895),
        "Fruits sold in First Quarter"
      ], null), new cljs.core.Keyword(null, "data", "data", 1016980252),
    new cljs.core.PersistentVector(null, 1, 5, cljs.core.PersistentVector
      .EMPTY_NODE, [new cljs.core.PersistentArrayMap(null, 2, [new cljs.core
        .Keyword(null, "type", "type", 1017479852), "column", new cljs
        .core.Keyword(null, "dataPoints", "dataPoints", 2200126623),
        new cljs.core.PersistentVector(null, 5, 5, cljs.core.PersistentVector
          .EMPTY_NODE, [new cljs.core.PersistentArrayMap.fromArray([
            new cljs.core.Keyword(null, "label", "label",
              1116631654), "banana", cljs.user.y_COLON_, 18
          ], true, false), new cljs.core.PersistentArrayMap.fromArray(
            [new cljs.core.Keyword(null, "label", "label",
              1116631654), "orange", cljs.user.y_COLON_, 29], true,
            false), new cljs.core.PersistentArrayMap.fromArray([new cljs
            .core.Keyword(null, "label", "label", 1116631654),
            "apple", cljs.user.y_COLON_, 40
          ], true, false), new cljs.core.PersistentArrayMap.fromArray(
            [new cljs.core.Keyword(null, "label", "label",
              1116631654), "mango", cljs.user.y_COLON_, 34], true,
            false), new cljs.core.PersistentArrayMap.fromArray([new cljs
            .core.Keyword(null, "label", "label", 1116631654),
            "grape", cljs.user.y_COLON_, 24
          ], true, false)], null)
      ], null)], null)
  ], null))))

You could also use the #js tagged literal and create straightforward js data (even if it looks uglier):

(def chart (js/CanvasJS.Chart. "chartContainer" #js{
  :title #js{:text "Fruits sold in First Quarter"}
  :data #js[#js{:type "column"
  ...