Mirror of forum.nim-lang.org

3185 :: Using Plotly.js in Nim

• sdwfrost (orginal) [2017-09-21T23:51:33+02:00] view original

  Dear All,

  I was playing with wrapping Javascript libraries in Nim, and I thought I would try Plotly.js. My first go is here. I'm sure I'm breaking tons of good practices here, so any tweaks to the code would be appreciated.

---

• jlp765 (orginal) [2017-09-22T01:06:08+02:00] view original

  This is an excellent example (YMMV).

  It raises a question: Is there a guide for JS development in Nim?

  I looked in the "docs", and "learn" and came across Nim backend integration

  Should an FAQ question be added, something like "How do I use Nim to write a JS App"?

---

• Jipok (orginal) [2017-09-22T10:23:18+02:00] view original

  Please, add Github Pages

---

• sdwfrost (orginal) [2017-09-22T19:36:19+02:00] view original

  Hi @Jipok,

  Do you mean me adding gh-pages? I didn't want to put any docs up given that this is just a toy example. In any case, I added the output here .

  My library code is tiny and looks like this:

  import jsffi
  import jsbind
  
  type PlotlyObj = ref object of JsObject
  
  proc newPlotly*(): PlotlyObj {.jsimportgWithName: "function(){return (Plotly)}" .}
  let Plotly* = newPlotly()
  proc newPlot*(p: PlotlyObj; divname: cstring; data: seq[JsObject]; layout: JsObject) {.jsimport.}
  
  Run

  The examples are as follows:

  import jsffi
  import plotly
  
  # Line plot
  
  var trace1=newJsObject()
  trace1.x = @[1, 2, 3, 4]
  trace1.y = @[18, 15, 13, 12]
  trace1.mode = "lines+markers"
  var data1 = @[trace1]
  var layout1 = newJsObject()
  layout1.title = "Line plot".cstring
  Plotly.newPlot("line-plot", data1, layout1)
  
  # Bar plot
  
  var trace2 = newJSObject()
  trace2.x = @["giraffes".cstring,"orangutans".cstring,"monkeys".cstring]
  trace2.y = @[20,14,23]
  trace2.type = "bar".cstring
  var data2 = @[trace2]
  var layout2 = newJsObject()
  layout2.title = "Bar plot".cstring
  Plotly.newPlot("bar-plot", data2, layout2)
  Run

  Some questions:

  1. Is the use of a variable Plotly as above to emulate the Javascript API OK?
  2. How can I avoid the explicit cstring conversion?

---

• sdwfrost (orginal) [2017-09-22T22:13:53+02:00] view original

  PS. One more thing; the more sophisticated examples using Plotly.d3.csv, Plotly.d3.json etc. (see here). How can this nested structure be kept in Nim?

---

• Tiberium (orginal) [2017-09-22T22:17:13+02:00] view original

  Well you would wrap this functions too? And I really think you should make it a real wrapper :)

---

• sdwfrost (orginal) [2017-09-23T11:02:23+02:00] view original

  I know I have to wrap them; it's a matter of how to access the nested functions...

---