Add Image docs

Author: kMutagene

Plotly.NET.sln

@@ -58,6 +58,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
 		docs\02_5_pie-doughnut-charts.fsx = docs\02_5_pie-doughnut-charts.fsx
 		docs\02_6_table.fsx = docs\02_6_table.fsx
 		docs\02_7_heatmaps.fsx = docs\02_7_heatmaps.fsx
+		docs\02_8_Images.fsx = docs\02_8_Images.fsx
 		docs\03_0_3d-scatter-plots.fsx = docs\03_0_3d-scatter-plots.fsx
 		docs\03_1_3d-surface-plots.fsx = docs\03_1_3d-surface-plots.fsx
 		docs\03_2_3d-mesh-plots.fsx = docs\03_2_3d-mesh-plots.fsx

docs/02_8_Images.fsx

@@ -0,0 +1,130 @@
+(**
+---
+title: Images
+category: Simple Charts
+categoryindex: 3
+index: 9
+---
+*)
+
+(*** hide ***)
+
+(*** condition: prepare ***)
+#r "nuget: Newtonsoft.JSON, 12.0.3"
+#r "nuget: DynamicObj"
+#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
+
+(*** condition: ipynb ***)
+#if IPYNB
+#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
+#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
+#endif // IPYNB
+
+(** 
+# Images
+
+[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
+[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
+[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
+
+*Summary:* This example shows how to create image charts in F#.
+
+There are multiple ways of generating image charts:
+ - From 3 Dimensional color collections, where the inner arrays contain 3 (color dimensions without alpha channel) or 4 (color dimensions and alpha channel) values. The color model can be set separately as shown below.
+ - From a 2 dimensional collection Plotly.NETs `ARGB` type that represents rgba values
+ - From a base64 encoded image data source
+
+## Creating Image charts from raw color arrays
+*)
+
+// 3d collection containing color values
+open Plotly.NET 
+
+let colors = [
+    [[0  ;0  ;255]; [255;255;0  ]; [0  ;0  ;255]]
+    [[255;0  ;0  ]; [255;0  ;255]; [255;0  ;255]]
+    [[0  ;255;0  ]; [0  ;255;255]; [255;0  ;0  ]]
+]
+
+let imageRaw = 
+    Chart.Image(Z=colors)
+    |> Chart.withTitle "Image chart from raw color component arrays"
+
+(*** condition: ipynb ***)
+#if IPYNB
+imageRaw
+#endif // IPYNB
+
+(***hide***)
+imageRaw |> GenericChart.toChartHTML
+(***include-it-raw***)
+
+(**
+To change the color model to HSL for example, add the `ColorModel` argument:
+*)
+
+let imageRawHSL = 
+    Chart.Image(Z=colors, ColorModel=StyleParam.ColorModel.HSL)
+    |> Chart.withTitle "HSL color model"
+
+(*** condition: ipynb ***)
+#if IPYNB
+imageRawHSL
+#endif // IPYNB
+
+(***hide***)
+imageRawHSL |> GenericChart.toChartHTML
+(***include-it-raw***)
+
+(**
+## Creating Image charts from ARGB arrays
+
+Note that this way of creating image charts uses the RGBA color model.
+*)
+
+let argbs = [
+    [ColorKeyword.AliceBlue     ; ColorKeyword.CornSilk ; ColorKeyword.LavenderBlush ] |> List.map ARGB.fromKeyword
+    [ColorKeyword.DarkGray      ; ColorKeyword.Snow     ; ColorKeyword.MidnightBlue  ] |> List.map ARGB.fromKeyword
+    [ColorKeyword.LightSteelBlue; ColorKeyword.DarkKhaki; ColorKeyword.LightAkyBlue  ] |> List.map ARGB.fromKeyword
+]
+
+let imageARGB = 
+    Chart.Image(argbs)
+    |> Chart.withTitle "ARGB image chart"
+
+(*** condition: ipynb ***)
+#if IPYNB
+imageARGB
+#endif // IPYNB
+
+(***hide***)
+imageARGB |> GenericChart.toChartHTML
+(***include-it-raw***)
+
+(**
+## Creating Image charts from base64 encoded images
+*)
+open System
+open System.IO
+
+let imageSource = $@"{__SOURCE_DIRECTORY__}/img/logo.png"
+
+let base64String = 
+    imageSource
+    |> File.ReadAllBytes
+    |> System.Convert.ToBase64String
+
+let logoImage = 
+    Chart.Image(
+        Source=($"data:image/jpg;base64,{base64String}")
+    )
+    |> Chart.withTitle "This is Plotly.NET:"
+
+(*** condition: ipynb ***)
+#if IPYNB
+logoImage
+#endif // IPYNB
+
+(***hide***)
+logoImage |> GenericChart.toChartHTML
+(***include-it-raw***)