Proof of concept to include xplot in FsSnip.WebSite

Author: forki

App.config

@@ -1,14 +1,14 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <configuration>
   <startup>
     <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.5.1" />
   </startup>
   <runtime>
-    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
-      <dependentAssembly>
-        <assemblyIdentity name="FSharp.Core" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
-        <bindingRedirect oldVersion="0.0.0.0-4.3.1.0" newVersion="4.3.1.0" xmlns="urn:schemas-microsoft-com:asm.v1" />
-      </dependentAssembly>
-    </assemblyBinding>
-  </runtime>
+    
+  <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
+  <dependentAssembly>
+    <assemblyIdentity name="FSharp.Core" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
+    <bindingRedirect oldVersion="0.0.0.0-4.3.1.0" newVersion="4.3.1.0" xmlns="urn:schemas-microsoft-com:asm.v1" />
+  </dependentAssembly>
+</assemblyBinding></runtime>
 </configuration>

FsSnip.WebSite.fsproj

@@ -5,6 +5,10 @@
 #r "packages/Suave.DotLiquid/lib/net40/Suave.DotLiquid.dll"
 #load "packages/FSharp.Azure.StorageTypeProvider/StorageTypeProvider.fsx"
 #load "packages/FSharp.Formatting/FSharp.Formatting.fsx"
+#I "packages/Google.DataTable.Net.Wrapper/lib"
+#I "packages/XPlot.GoogleCharts/lib/net45"
+#r "XPlot.GoogleCharts.dll"
+open XPlot.GoogleCharts
 open System
 open System.Web
 open System.IO
@@ -37,6 +41,7 @@ open FSharp.Azure.StorageTypeProvider
 #load "code/pages/author.fs"
 #load "code/pages/tag.fs"
 #load "code/pages/rss.fs"
+#load "code/pages/xplot.fs"
 #load "code/api.fs"
 open FsSnip
 open FsSnip.Data
@@ -78,6 +83,9 @@ let app =
       // REST API and RSS feeds
       Api.webPart
       Rss.webPart
+
+      // Graphs
+      XPlot.webPart
 
       // Static files and fallback case
       browseStaticFiles

Google.DataTable.Net.Wrapper.XML

@@ -0,0 +1,46 @@
+module FsSnip.Pages.XPlot
+
+open Suave
+open Suave.Http
+open Suave.Http.Applicatives
+open System
+open FsSnip.Utils
+open FsSnip.Data
+open FsSnip.Rssfeed
+open FsSnip.Filters
+open XPlot.GoogleCharts
+
+type GraphModel = {
+    Id : string
+    Script: string
+    Graph: string
+}
+
+let Bolivia = ["2004/05", 165.; "2005/06", 135.; "2006/07", 157.; "2007/08", 139.; "2008/09", 136.]
+let Ecuador = ["2004/05", 938.; "2005/06", 1120.; "2006/07", 1167.; "2007/08", 1110.; "2008/09", 691.]
+let Madagascar = ["2004/05", 522.; "2005/06", 599.; "2006/07", 587.; "2007/08", 615.; "2008/09", 629.]
+let Average = ["2004/05", 614.6; "2005/06", 682.; "2006/07", 623.; "2007/08", 609.4; "2008/09", 569.6]
+
+let series = [ "bars"; "bars"; "bars"; "lines" ]
+let inputs = [ Bolivia; Ecuador; Madagascar; Average ]
+
+let getGraph = delay (fun () ->
+  let image =
+    inputs
+    |> Chart.Combo
+    |> Chart.WithOptions 
+         (Options(title = "Coffee Production", series = 
+            [| for typ in series -> Series(typ) |]))
+    |> Chart.WithLabels 
+         ["Bolivia"; "Ecuador"; "Madagascar"; "Average"]
+    |> Chart.WithLegend true
+    |> Chart.WithSize (600, 250)
+  
+  let model = { 
+    Id = image.Id
+    Script = image.Js
+    Graph = image.InlineHtml }
+
+  DotLiquid.page "graph.html" model)
+  
+let webPart = (path "/graph/" <|> path "/graph") >>= getGraph

app.fsx

@@ -7,4 +7,5 @@ nuget FSharp.Data
 nuget FSharp.Compiler.Service
 nuget DotLiquid
 nuget FSharp.Formatting >= 2.10.3
-nuget FSharp.Azure.StorageTypeProvider
+nuget FSharp.Azure.StorageTypeProvider
+nuget XPlot.GoogleCharts

code/pages/xplot.fs

@@ -15,24 +15,28 @@ NUGET
     FSharpVSPowerTools.Core (1.9.0)
       FSharp.Compiler.Service (>= 0.0.90)
     FsPickler (1.3.7)
-    Microsoft.Azure.KeyVault.Core (1.0.0) - framework: wpv8.0, >= net40
-    Microsoft.Data.Edm (5.6.4)
-    Microsoft.Data.OData (5.6.4) - framework: winv4.5, wpv8.1, wpv8.0, >= net40
+    Google.DataTable.Net.Wrapper (3.1.2)
+    Microsoft.Azure.KeyVault.Core (1.0.0) - framework: >= net40, wpv8.0
+    Microsoft.Data.Edm (5.6.4) - framework: >= net40, winv4.5, wpv8.0
+    Microsoft.Data.OData (5.6.4) - framework: >= net40, winv4.5, wpv8.0
       Microsoft.Data.Edm (5.6.4)
       System.Spatial (5.6.4)
     Microsoft.Data.Services.Client (5.6.4) - framework: >= net40
       Microsoft.Data.OData (5.6.4)
-    Newtonsoft.Json (7.0.1) - framework: wpv8.0, >= net40
+    Newtonsoft.Json (7.0.1)
     Suave (0.31.2)
       FSharp.Core (>= 3.1.2.5)
       FsPickler (>= 1.2.5)
     Suave.DotLiquid (0.31.2)
       DotLiquid (>= 1.8.0)
       Suave (>= 0.31.2)
-    System.Spatial (5.6.4)
+    System.Spatial (5.6.4) - framework: >= net40, winv4.5, wpv8.0
     WindowsAzure.Storage (5.0.2)
-      Microsoft.Azure.KeyVault.Core (>= 1.0.0) - framework: wpv8.0, >= net40
-      Microsoft.Data.OData (>= 5.6.4) - framework: winv4.5, wpv8.1, wpv8.0, >= net40
+      Microsoft.Azure.KeyVault.Core (>= 1.0.0) - framework: >= net40, wpv8.0
+      Microsoft.Data.OData (>= 5.6.4) - framework: >= net40, winv4.5, wpv8.0
       Microsoft.Data.Services.Client (>= 5.6.4) - framework: >= net40
-      Newtonsoft.Json (>= 6.0.8) - framework: wpv8.0, >= net40
+      Newtonsoft.Json (>= 6.0.8) - framework: >= net40, wpv8.0
+    XPlot.GoogleCharts (1.2.2)
+      Google.DataTable.Net.Wrapper
+      Newtonsoft.Json
     Zlib.Portable (1.11.0) - framework: portable-net40+sl50+wp80+win80

paket.dependencies

@@ -3,4 +3,5 @@ Suave.DotLiquid
 FSharp.Data
 DotLiquid
 FSharp.Formatting
-FSharp.Azure.StorageTypeProvider
+FSharp.Azure.StorageTypeProvider
+XPlot.GoogleCharts

paket.lock

@@ -0,0 +1,21 @@
+{% extends "page.html" %}
+{% block head %}
+  <title>Home page | F# Snippets</title>
+{% endblock %}
+
+{% block customPageScripts %}
+<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+<script type="text/javascript">
+google.load("visualization", "1", { packages: ["corechart"] })
+{{ model.Script }}
+</script>
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-md-12"><h2>Graph</h2></div>
+</div>
+
+<div id="{{ model.Id }}" style="width: 600px; height: 250px;"></div>
+
+{% endblock %}