Change toChartHTML for jupyter notebook interoperability. (FeatureRequest #36)

Author: muehlhaus

Diff for: docsrc/content/violin-plots.fsx

@@ -32,7 +32,7 @@ violin1 |> Chart.Show
 By swapping x and y plus using `StyleParam.Orientation.Horizontal` we can flip the chart horizontaly.
 *)
 let violin2 =
-    Chart.Violin (y,x,Jitter=0.1,Points=StyleParam.Jitterpoints.All,Orientation=StyleParam.Orientation.Horizontal)
+    Chart.Violin (y,x,Jitter=0.1,Points=StyleParam.Jitterpoints.All,Orientation=StyleParam.Orientation.Horizontal,Meanline=Meanline.init(Visible=true))
 
 (***do-not-eval***)
 violin2 |> Chart.Show

Diff for: src/FSharp.Plotly/GenericChart.fs

@@ -45,14 +45,43 @@ module HTML =
 </html>"""
 
 
+  //  let chart =
+  //      """<div id="[ID]" style="width: [WIDTH]px; height: [HEIGHT]px;"><!-- Plotly chart will be drawn inside this DIV --></div>
+  //<script>
+  //  var data = [DATA];
+  //  var layout = [LAYOUT];
+  //  var config = [CONFIG];
+  //  Plotly.newPlot('[ID]', data, layout, config);
+  //</script>"""
     let chart =
-        """<div id="[ID]" style="width: [WIDTH]px; height: [HEIGHT]px;"><!-- Plotly chart will be drawn inside this DIV --></div>
-  <script>
-    var data = [DATA];
-    var layout = [LAYOUT];
-    var config = [CONFIG];
-    Plotly.newPlot('[ID]', data, layout, config);
-  </script>"""
+        let newScript = new System.Text.StringBuilder()
+        newScript.AppendLine("""<div id="[ID]" style="width: [WIDTH]px; height: [HEIGHT]px;"><!-- Plotly chart will be drawn inside this DIV --></div>""") |> ignore
+        newScript.AppendLine("<script type=\"text/javascript\">") |> ignore
+        newScript.AppendLine(@"
+            var renderPlotly = function() {
+            var fsharpPlotlyRequire = requirejs.config({context:'fsharp-plotly',paths:{plotly:'https://cdn.plot.ly/plotly-latest.min'}});
+            fsharpPlotlyRequire(['plotly'], function(Plotly) {")  |> ignore
+        newScript.AppendLine(@"
+            var data = [DATA];
+            var layout = [LAYOUT];
+            var config = [CONFIG];
+            Plotly.newPlot('[ID]', data, layout, config);")  |> ignore
+        newScript.AppendLine("""});
+            };
+            if ((typeof(requirejs) !==  typeof(Function)) || (typeof(requirejs.config) !== typeof(Function))) { 
+                var script = document.createElement("script"); 
+                script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"); 
+                script.onload = function(){
+                    renderPlotly();
+                };
+                document.getElementsByTagName("head")[0].appendChild(script); 
+            }
+            else {
+                renderPlotly();
+            }""") |> ignore
+        newScript.AppendLine("</script>") |> ignore
+        newScript.ToString()
+
 
     let description ="""<div class=container>
   <h3>[DESCRIPTIONHEADING]</h3>

Diff for: src/FSharp.Plotly/Trace.fs

@@ -468,8 +468,8 @@ module Trace =
                     Fillcolor      |> DynObj.setValueOpt boxPlot "fillcolor"   
                     Marker         |> DynObj.setValueOpt boxPlot "marker"   
                     Line           |> DynObj.setValueOpt boxPlot "line"   
-                    Alignmentgroup   |> DynObj.setValueOpt boxPlot "Alignmentgroup"   
-                    Offsetgroup      |> DynObj.setValueOpt boxPlot "Offsetgroup"                     
+                    Alignmentgroup   |> DynObj.setValueOpt boxPlot "alignmentgroup"   
+                    Offsetgroup      |> DynObj.setValueOpt boxPlot "offsetgroup"                     
                     Notched        |> DynObj.setValueOpt boxPlot "notched"   
                     NotchWidth     |> DynObj.setValueOpt boxPlot "notchwidth"   
                     QuartileMethod |> DynObj.setValueOptBy boxPlot "quartilemethod" StyleParam.QuartileMethod.convert
@@ -500,7 +500,7 @@ module Trace =
 
                 ?Box:Box,
                 ?Bandwidth,
-                ?Meanline,
+                ?Meanline:Meanline,
                 ?Scalegroup,
                 ?Scalemode,
                 ?Side,
@@ -535,10 +535,10 @@ module Trace =
                     Width            |> DynObj.setValueOpt boxPlot "width"  
                     Marker           |> DynObj.setValueOpt boxPlot "marker"   
                     Line             |> DynObj.setValueOpt boxPlot "line" 
-                    Alignmentgroup   |> DynObj.setValueOpt boxPlot "Alignmentgroup"   
-                    Offsetgroup      |> DynObj.setValueOpt boxPlot "Offsetgroup"  
+                    Alignmentgroup   |> DynObj.setValueOpt boxPlot "alignmentgroup"   
+                    Offsetgroup      |> DynObj.setValueOpt boxPlot "offsetgroup"  
 
-                    Box              |> DynObj.setValueOpt boxPlot "Box"  
+                    Box              |> DynObj.setValueOpt boxPlot "box"  
                     Bandwidth        |> DynObj.setValueOpt boxPlot "bandwidth"  
                     Meanline         |> DynObj.setValueOpt boxPlot "meanline"  
                     Scalegroup       |> DynObj.setValueOpt boxPlot "scalegroup"