Thanks David,<div><br></div><div>As an update, HJScript is a bit of a nightmare to figure out (missing documentation, examples).  And the model of JS values:</div><div><div>    <a href="http://hackage.haskell.org/packages/archive/language-javascript/0.4.10/doc/html/Language-JavaScript-Parser.html#t:Node">http://hackage.haskell.org/packages/archive/language-javascript/0.4.10/doc/html/Language-JavaScript-Parser.html#t:Node</a></div>

</div><div>Seems less human comprehensible than, for example, WebBits&#39;:</div><div><div>    <a href="http://hackage.haskell.org/packages/archive/WebBits/2.0/doc/html/BrownPLT-JavaScript-Syntax.html">http://hackage.haskell.org/packages/archive/WebBits/2.0/doc/html/BrownPLT-JavaScript-Syntax.html</a><br>

</div><div><br></div><div>However, jmacro is a breeze for spitting out JS code.  The little script below will make a simple line plot with google charts.</div><div><br></div><div>I&#39;ll give flot a try latter.  Zooming / panning sounds nice.</div>

<div><br></div><div>Cheers,</div><div>  -Ryan</div><div><div><br></div><div>Aforementioned script:</div><div>-------------------------------------------------------------------------------</div><div><br></div><div>{-# LANGUAGE QuasiQuotes #-}</div>

<div><br></div><div>import Language.Javascript.JMacro</div><div><br></div><div>hdr :: String</div><div>hdr = &quot;&lt;html&gt; &lt;head&gt; &lt;script type=\&quot;text/javascript\&quot; src=\&quot;<a href="https://www.google.com/jsapi\">https://www.google.com/jsapi\</a>&quot;&gt;&lt;/script&gt; &lt;script type=\&quot;text/javascript\&quot;&gt;&quot;</div>

<div><br></div><div>ftr :: String</div><div>ftr = &quot;    &lt;/script&gt;  &lt;/head&gt;  &lt;body&gt;  &lt;div id=\&quot;chart_div\&quot; style=\&quot;width: 900px; height: 500px;\&quot;&gt;&lt;/div&gt;  &lt;/body&gt; &lt;/html&gt;&quot;</div>

<div><br></div><div><br></div><div>testdata :: [(String, Int, Int)]</div><div>testdata = [</div><div>      (&quot;2004&quot;, 100, 400),</div><div>      (&quot;2005&quot;, 1170, 460),</div><div>      (&quot;2006&quot;,  860, 580),</div>

<div>      (&quot;2007&quot;, 1030, 540)</div><div>    ]</div><div><br></div><div>-- | This provides a set of basic functional programming primitives, a few utility functions</div><div>-- and, more importantly, a decent sample of idiomatic jmacro code. View the source for details.</div>

<div>-- body :: JStat</div><div>body :: (ToJExpr a3, ToJExpr a2, ToJExpr a1, ToJExpr a) =&gt; (a, a1, a2) -&gt; a3 -&gt; JStat</div><div>body (title,line1,line2) testdata = [$jmacro|</div><div><br></div><div>  google.load(&quot;visualization&quot;, &quot;1&quot;, {packages:[&quot;corechart&quot;]});</div>

<div><br></div><div>  fun drawChart {</div><div>    var dat = new google.visualization.DataTable();</div><div>    dat.addColumn(&#39;string&#39;, `(title)` );</div><div>    dat.addColumn(&#39;number&#39;, `(line1)` );</div>

<div>    dat.addColumn(&#39;number&#39;, `(line2)` );</div><div><br></div><div>    // -- Here&#39;s our data... this can get BIG:</div><div>    dat.addRows( `(testdata)` );</div><div><br></div><div>    var options = {  title: `(title)` };</div>

<div>    var chart = new google.visualization.LineChart(document.getElementById(&#39;chart_div&#39;));</div><div>    chart.draw(dat, options);</div><div>  }</div><div><br></div><div>  google.setOnLoadCallback(drawChart);</div>

<div>|]</div><div><br></div><div>main = do</div><div>  putStrLn hdr</div><div>  print$ renderJs$ body (&quot;blah&quot;,&quot;line1&quot;,&quot;line2&quot;) testdata</div><div>  putStrLn ftr</div></div></div><div><br></div>