Javascript library in a notebook: morris¶

Links: notebook, html, PDF, python, slides, slides(2), GitHub

We try to use the library morris.js, we try to replicate the example from the page getting-started. Unfortunately, there are somme issues with raphael.js, see:

So I reused one version of Raphael which seemed to work well in a previous talk: treant-je.

libs = ["http://fperucic.github.io/treant-js/vendor/raphael.js",
        "http://code.jquery.com/jquery-1.8.2.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"]

css = ["https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"]

script = """
Morris.Line({
  element: '__ID__',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});
"""
from jyquickhelper import RenderJS
RenderJS(script=script, css=css, libs=libs)

The library is nice but it does not play very nice when the notebook is converted into RST. It works better when it is converted into HTML.