Add StaticChart extension

Author: muehlhaus

src/FSharp.Plotly.WPF/ChartWPF.fs

@@ -21,3 +21,18 @@ module ChartWPF =
             let html = GenericChart.toEmbeddedHTML ch
             ViewContainer.showHTML html
 
+
+        /// Save chart as image
+        static member SaveImageAs (format:StyleParam.ImageFormat)  pathName (ch:GenericChart,?Verbose) =                                     
+            let html = GenericChart.toEmbeddedImage format ch
+            let wnd,browser = ViewContainer.createContainerWithBrowser()
+            browser.NavigateToString (html)
+            let web = new HtmlAgilityPack.HtmlDocument()            
+            web.LoadHtml(browser.Document.ToString())
+            let url = web.GetElementbyId("jpg-export")//.GetAttributeValue("src")
+            url.Attributes
+            //let wc = new  System.Net.WebClient()
+            //wc.DownloadFile()
+            
+
+

src/FSharp.Plotly.WPF/FSharp.Plotly.WPF.fsproj

@@ -11,6 +11,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <PackageReference Include="HtmlAgilityPack" Version="1.8.4" />
     <PackageReference Include="Microsoft.Xaml" Version="4.0.0.1" />
   </ItemGroup>
 

src/FSharp.Plotly.WPF/WpfTest.fsx

@@ -1,7 +1,9 @@
 //#I "./bin/Debug"
-#r "./bin/Debug/Newtonsoft.Json.dll"
-#r "./bin/Debug/FSharp.Plotly.dll"
-#r "./bin/Debug/FSharp.Plotly.WPF.dll"
+//#r "./bin/Debug/netstandard2.0/Newtonsoft.Json.dll"
+//#r @"D:\Source\FSharp.Plotly\packages\htmlagilitypack\1.8.4\HtmlAgilityPack.dll"
+#r "./bin/Debug/netstandard2.0/FSharp.Plotly.dll"
+#r "./bin/Debug/netstandard2.0/FSharp.Plotly.WPF.dll"
+#r "netstandard"
 
 open FSharp.Plotly
 open FSharp.Plotly.WPF
@@ -20,7 +22,7 @@ let yValues' = seq [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]
     |> Chart.withLineStyle(Width=1);
 ] 
 |> Chart.Combine
-|> Chart.ShowWPF
+//|> Chart.SaveImageAs StyleParam.ImageFormat.SVG "" 
 
 
 

src/FSharp.Plotly/ChartExtensions.fs

@@ -392,4 +392,13 @@ module ChartExtensions =
             File.WriteAllText(path, html)
             System.Diagnostics.Process.Start(path) |> ignore
 
+        /// Show chart in browser            
+        static member ShowAsImage (format:StyleParam.ImageFormat) (ch:GenericChart) = 
+            let guid = Guid.NewGuid().ToString()
+            let html = GenericChart.toEmbeddedImage format ch
+            let tempPath = Path.GetTempPath()
+            let file = sprintf "%s.html" guid
+            let path = Path.Combine(tempPath, file)
+            File.WriteAllText(path, html)
+            System.Diagnostics.Process.Start(path) |> ignore
 

src/FSharp.Plotly/GenericChart.fs

@@ -28,6 +28,32 @@ module HTML =
     Plotly.newPlot('[ID]', data, layout);
   </script>"""
 
+    let staticChart =
+        """<div id="[ID]" style="width: [WIDTH]px; height: [HEIGHT]px;display: none;"><!-- Plotly chart will be drawn inside this DIV --></div>        
+  
+  <img id="jpg-export"></img>
+  
+  <script>
+    var d3 = Plotly.d3;
+    var img_jpg= d3.select('#jpg-export');
+    var data = [DATA];
+    var layout = [LAYOUT];
+    Plotly.newPlot('[ID]', data, layout)
+    // static image in jpg format
+
+    .then(
+        function(gd)
+         {
+          Plotly.toImage(gd,{format:'[IMAGEFORMAT]',height: [HEIGHT],width: [WIDTH]})
+             .then(
+                function(url)
+             {
+                 img_jpg.attr("src", url);
+                 
+             }
+             )
+        });
+  </script>"""
 
 /// Module to represent a GenericChart
 module GenericChart =
@@ -117,8 +143,10 @@ module GenericChart =
             |> JsonConvert.SerializeObject 
 
         let html =
-            HTML.chart
-                .Replace("style=\"width: [WIDTH]px; height: [HEIGHT]px;\"","style=\"width: 600px; height: 600px;\"")
+            HTML.staticChart
+                //.Replace("style=\"width: [WIDTH]px; height: [HEIGHT]px;\"","style=\"width: 600px; height: 600px;\"")
+                .Replace("[WIDTH]", string 600 )
+                .Replace("[HEIGHT]", string 600)
                 .Replace("[ID]", guid)                
                 .Replace("[DATA]", tracesJson)
                 .Replace("[LAYOUT]", layoutJson)
@@ -152,6 +180,35 @@ module GenericChart =
         html
 
 
+    /// Converts a GenericChart to its Image representation
+    let toChartImage (format:StyleParam.ImageFormat) gChart =
+        let guid = Guid.NewGuid().ToString()
+        let tracesJson =
+            getTraces gChart
+            |> JsonConvert.SerializeObject 
+        let layoutJson = 
+            getLayout gChart
+            |> JsonConvert.SerializeObject 
+
+        let html =
+            HTML.staticChart
+                //.Replace("style=\"width: [WIDTH]px; height: [HEIGHT]px;\"","style=\"width: 600px; height: 600px;\"")
+                .Replace("[WIDTH]", string 600 )
+                .Replace("[HEIGHT]", string 600)
+                .Replace("[ID]", guid)                
+                .Replace("[DATA]", tracesJson)
+                .Replace("[LAYOUT]", layoutJson)
+                .Replace("[IMAGEFORMAT]",format.ToString().ToLower())
+        html
+
+    /// Converts a GenericChart to an image and embeds it into a html page
+    let toEmbeddedImage (format:StyleParam.ImageFormat) gChart =
+        let html =
+            let chartMarkup =
+                toChartImage format gChart
+            HTML.doc.Replace("[CHART]", chartMarkup)
+        html
+
 
     /// Creates a new GenericChart whose traces are the results of applying the given function to each of the trace of the GenericChart.           
     let mapTrace f gChart =

src/FSharp.Plotly/Script.fsx

@@ -1,7 +1,7 @@
 //#I "./bin/Debug"
-#r "./bin/Debug/Newtonsoft.Json.dll"
-#r "./bin/Debug/FSharp.Plotly.dll"
-
+//#r "./bin/Debug/netstandard2.0/Newtonsoft.Json.dll"
+#r "./bin/Debug/netstandard2.0/FSharp.Plotly.dll"
+#r "netstandard"
 
 open FSharp.Plotly
 
@@ -11,7 +11,7 @@ let y = seq [5.; 2.5; 5.; 7.5; 5.; 2.5; 7.5; 4.5; 5.5; 5.]
 let y' = seq [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]
 
 Chart.Spline(x,y',Name="spline")    
-|> Chart.withYError(Options.Error(Array=[1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.; ]))
+//|> Chart.withYError(Options.Error(Array=[1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.; ]))
 
 
 //|> Chart.withLineStyle(Width=2,Dash=StyleParam.DrawingStyle.Dot)
@@ -20,8 +20,9 @@ Chart.Spline(x,y',Name="spline")
 //|> Chart.withY_AxisStyle("y axis title") 
 //|> layoutJson
 //|> GenericChart.toChartHtmlWithSize 500 500
-|> Chart.Show
 
+//|> Chart.ShowAsImage StyleParam.ImageFormat.SVG 
+|> Chart.ShowAsImage StyleParam.ImageFormat.SVG 
 
 
 

src/FSharp.Plotly/StyleParams.fs

@@ -717,3 +717,11 @@ module StyleParam =
 //Determines which trace information appear on hover. If `none` or `skip` are set, no information is displayed upon hovering. But, if `none` is set, click and hover events are still fired.
 
 
+    type ImageFormat =
+        | SVG  | PNG | JPEG
+        static member toString = function
+            | SVG  -> "svg"             
+            | PNG  -> "png"            
+            | JPEG -> "jpeg"    
+
+        static member convert = ImageFormat.toString >> box