Add support for multiple axis

Author: muehlhaus

FSharp.Plotly.sln

@@ -1,6 +1,6 @@
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio 15
-VisualStudioVersion = 15.0.27004.2010
+VisualStudioVersion = 15.0.27004.2002
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = ".paket", ".paket", "{63297B98-5CED-492C-A5B7-A5B4F73CF142}"
 	ProjectSection(SolutionItems) = preProject
@@ -36,6 +36,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "content", "content", "{8E6D
 		docs\content\box-plots.fsx = docs\content\box-plots.fsx
 		docs\content\bubble-charts.fsx = docs\content\bubble-charts.fsx
 		docs\content\contour-plots.fsx = docs\content\contour-plots.fsx
+		docs\content\extensions.fsx = docs\content\extensions.fsx
 		docs\content\getting-started.fsx = docs\content\getting-started.fsx
 		docs\content\heatmaps.fsx = docs\content\heatmaps.fsx
 		docs\content\histograms.fsx = docs\content\histograms.fsx

docs/content/extensions.fsx

@@ -0,0 +1,51 @@
+(*** hide ***)
+// This block of code is omitted in the generated HTML documentation. Use 
+// it to define helpers that you do not want to show in the documentation.
+#r "../../bin/Newtonsoft.Json.dll"
+#r "../../lib/FSharp.Care.dll"
+
+(**
+Getting started...
+==================
+
+FSharp.Plotly implements charting suitable for use from F# scripting. Once you load the library as followed, you can use the members of the `Chart` type to easily build charts.
+
+The library provides a complete mapping for the configuration options of the underlying library but empowers you to use the comfortable style known from the beautiful library [F# Charting](http://fslab.org/FSharp.Charting/). So you get a nice F# interface support with the full power of Plotly.
+*)
+
+#r "../../bin/FSharp.Plotly.dll"
+open FSharp.Plotly
+
+// Functional F# scripting style for Two Y-Axes
+
+[
+Chart.Scatter ([1; 2; 3; 4],[12; 9; 15; 12],StyleParam.Mode.Lines_Markers,Name="anchor 1")
+|> Chart.withAxisAnchor(Y=1);
+Chart.Line([1; 2; 3; 4],[90; 110; 190; 120],Name="anchor 2")
+|> Chart.withAxisAnchor(Y=2);
+]
+|> Chart.Combine
+|> Chart.withY_AxisStyle("first",Side=StyleParam.Side.Left,Id=1)
+|> Chart.withY_AxisStyle("second",Side=StyleParam.Side.Right,Id=2,Overlaying=StyleParam.AxisAnchorId.Y 1)
+|> Chart.Show
+
+
+
+// Functional F# scripting style for Two Y-Axes same side
+
+[
+Chart.Scatter ([1; 2; 3; 4],[12; 9; 15; 12],StyleParam.Mode.Lines_Markers,Name="anchor 1")
+|> Chart.withAxisAnchor(Y=1);
+Chart.Line([1; 2; 3; 4],[90; 110; 190; 120],Name="anchor 2")
+|> Chart.withAxisAnchor(Y=2);
+]
+|> Chart.Combine
+|> Chart.withX_AxisStyle("x-axis",Domain=(0.3, 1.0))
+|> Chart.withY_AxisStyle("first y-axis")
+|> Chart.withY_AxisStyle("second y-axis",Side=StyleParam.Side.Left,Id=2,Overlaying=StyleParam.AxisAnchorId.Y 1,Position=0.15,Anchor=StyleParam.AxisAnchorId.Free)
+|> Chart.Show
+
+
+
+// Simple Subplot
+

docs/content/parallel-coords.fsx

@@ -18,11 +18,9 @@ open FSharp.Plotly
 let data = 
     ['A',[|1.;4.;|]; 'B',[|3.;1.5;|]; 'C',[|2.;4.;|]; 'D',[|4.;2.;|];]
 
-let dataRange = 
-    [StyleParam.Range.MinMax (1.,5.);StyleParam.Range.MinMax (1.,5.);StyleParam.Range.MinMax (1.,5.);StyleParam.Range.MinMax (1.,5.);] |> Seq.map (fun b -> Some b)
 
 (*** define-output:parcoords1 ***)
-Chart.ParallelCoord(data,Color="blue",Ranges=dataRange)
+Chart.ParallelCoord(data,Color="blue",Ranges=StyleParam.Range.MinMax (1.,5.))
 (*** include-it:parcoords1 ***)
 
 

src/FSharp.Plotly/Axis.fs

@@ -163,11 +163,11 @@ module Axis =
                 ?Zeroline,         
                 ?Zerolinecolor,    
                 ?Zerolinewidth,    
-                ?Anchor,           
-                ?Side,             
-                ?Overlaying,       
+                ?Anchor :StyleParam.AxisAnchorId,           
+                ?Side :StyleParam.Side,             
+                ?Overlaying :StyleParam.AxisAnchorId,      
                 ?Domain,           
-                ?Position,         
+                ?Position : float,         
                 ?IsSubplotObj,    
                 ?Tickvalssrc,      
                 ?Ticktextsrc,      
@@ -217,10 +217,10 @@ module Axis =
                     Gridwidth       |> DynObj.setValueOpt   axis "gridwidth"       
                     Zeroline        |> DynObj.setValueOpt   axis "zeroline"        
                     Zerolinecolor   |> DynObj.setValueOpt   axis "zerolinecolor"   
-                    Zerolinewidth   |> DynObj.setValueOpt   axis "zerolinewidth"   
-                    Anchor          |> DynObj.setValueOpt   axis "anchor"          
+                    Zerolinewidth   |> DynObj.setValueOpt   axis "zerolinewidth"           
+                    Anchor          |> DynObj.setValueOptBy axis "anchor"     StyleParam.AxisAnchorId.convert
                     Side            |> DynObj.setValueOptBy axis "side"     StyleParam.Side.convert
-                    Overlaying      |> DynObj.setValueOpt   axis "overlaying"      
+                    Overlaying      |> DynObj.setValueOptBy axis "overlaying" StyleParam.AxisAnchorId.convert      
                     Domain          |> DynObj.setValueOptBy axis "domain"   StyleParam.Range.convert               
                     Position        |> DynObj.setValueOpt   axis "position"        
                     IsSubplotObj    |> DynObj.setValueOpt   axis "_isSubplotObj"    

src/FSharp.Plotly/Chart.fs

@@ -261,7 +261,8 @@ type Chart =
         |> TraceStyle.TraceInfo(?Name=Name,?Showlegend=Showlegend,?Opacity=Opacity)        
         |> TraceStyle.TextLabel(?Text=Labels,?Textposition=TextPosition,?Textfont=TextFont)
         |> GenericChart.ofTraceObject  
-        |> GenericChart.setLayout (Layout.init (Layout.style(Barmode=StyleParam.Barmode.Stack)))
+        //|> GenericChart.setLayout (Layout.init (Layout.style(Barmode=StyleParam.Barmode.Stack)))
+        |> GenericChart.setLayout (Layout.init (Barmode=StyleParam.Barmode.Stack))
 
 
     /// Displays series of column chart type as stacked columns.
@@ -298,7 +299,8 @@ type Chart =
         |> TraceStyle.TraceInfo(?Name=Name,?Showlegend=Showlegend,?Opacity=Opacity)        
         |> TraceStyle.TextLabel(?Text=Labels,?Textposition=TextPosition,?Textfont=TextFont)
         |> GenericChart.ofTraceObject  
-        |> GenericChart.setLayout (Layout.init (Layout.style(Barmode=StyleParam.Barmode.Stack)))
+        //|> GenericChart.setLayout (Layout.init (Layout.style(Barmode=StyleParam.Barmode.Stack)))
+        |> GenericChart.setLayout (Layout.init (Barmode=StyleParam.Barmode.Stack))
 
 
     /// Displays series of tcolumn chart type as stacked bars.
@@ -435,21 +437,26 @@ type Chart =
 
 
      /// Computes the parallel coordinates plot
-    static member ParallelCoord(dims:seq<'key*#seq<'values>>,?Ranges:seq<StyleParam.Range option>,?Color,?Colorscale,?Width,?Dash,?Domain,?Labelfont,?Tickfont,?Rangefont) =
+    static member ParallelCoord(dims:seq<'key*#seq<'values>>,?Range,?Constraintrange,?Color,?Colorscale,?Width,?Dash,?Domain,?Labelfont,?Tickfont,?Rangefont) =
         let dims' = 
-            if Ranges.IsSome then 
-                Seq.zip dims Ranges.Value
-                |> Seq.map (fun ((k,vals),r) ->  
-                    if r.IsSome then Dimensions.init(values=vals,Label=k,Range=r.Value)
-                    else Dimensions.init(values=vals,Label=k)
-                    )
-            else
-                dims |> Seq.map (fun (k,vals) ->  Dimensions.init(values=vals,Label=k))
+            dims |> Seq.map (fun (k,vals) -> 
+                Dimensions.init(vals)
+                |> Dimensions.style(vals,?Range=Range,?Constraintrange=Constraintrange,Label=k)
+                )
         Trace.initParallelCoord (
             TraceStyle.ParallelCoord (Dimensions=dims',?Domain=Domain,?Labelfont=Labelfont,?Tickfont=Tickfont,?Rangefont=Rangefont)             
             )
         |> TraceStyle.Line(?Width=Width,?Color=Color,?Dash=Dash,?Colorscale=Colorscale)
         |> GenericChart.ofTraceObject
+
+
+     /// Computes the parallel coordinates plot
+    static member ParallelCoord(dims:seq<Dimensions>,?Color,?Colorscale,?Width,?Dash,?Domain,?Labelfont,?Tickfont,?Rangefont) =
+        Trace.initParallelCoord (
+            TraceStyle.ParallelCoord (Dimensions=dims,?Domain=Domain,?Labelfont=Labelfont,?Tickfont=Tickfont,?Rangefont=Rangefont)             
+            )
+        |> TraceStyle.Line(?Width=Width,?Color=Color,?Dash=Dash,?Colorscale=Colorscale)
+        |> GenericChart.ofTraceObject
 
 
 

src/FSharp.Plotly/ChartExtensions.fs

@@ -11,6 +11,7 @@ open GenericChart
 module ChartExtensions =
 
     open Trace
+    //open StyleParam
 
     /// Provides a set of static methods for creating charts.
     type Chart with   
@@ -27,7 +28,20 @@ module ChartExtensions =
                     |> TraceStyle.TraceInfo(?Name=(naming i Name),?Showlegend=Showlegend,?Legendgroup=Legendgroup,?Visible=Visible)
                 )
             )
-        
+ 
+         /// Set the axis anchor id the trace is belonging to
+        static member withAxisAnchor(?X,?Y,?Z) =
+            let idx   = if X.IsSome then Some (StyleParam.AxisAnchorId.X X.Value) else None 
+            let idy   = if Y.IsSome then Some (StyleParam.AxisAnchorId.Y Y.Value) else None 
+            let idz   = if Z.IsSome then Some (StyleParam.AxisAnchorId.Z Z.Value) else None 
+            
+            (fun (ch:GenericChart) ->                   
+                ch |> mapTrace (fun trace -> 
+                    trace 
+                    |> TraceStyle.SetAxisAnchor(?X=idx,?Y=idy,?Z=idz)                    
+                )
+            )
+  
         /// Apply styling to the Marker(s) of the chart as Object.
         static member withMarker(marker:Marker) =
             (fun (ch:GenericChart) ->                   
@@ -94,7 +108,7 @@ module ChartExtensions =
 // ####################### Apply to layout
 
         // Sets x-Axis of 2d and 3d- Charts
-        static member withX_Axis(xAxis:Axis.LinearAxis) =       
+        static member withX_Axis(xAxis:Axis.LinearAxis,?Id) =       
             (fun (ch:GenericChart) ->                                 
                 let contains3d =
                     ch 
@@ -106,8 +120,9 @@ module ChartExtensions =
                 match contains3d with
                 | false -> 
                     let layout =
+                        let id = if Id.IsSome then StyleParam.AxisId.X Id.Value else StyleParam.AxisId.X 1
                         GenericChart.getLayout ch 
-                        |> Layout.style (xAxis=xAxis)
+                        |> Layout.AddLinearAxis(id,axis=xAxis)
                     GenericChart.setLayout layout ch
                 | true  -> 
                     let layout =
@@ -119,14 +134,16 @@ module ChartExtensions =
 
 
          // Sets x-Axis of 2d and 3d- Charts
-        static member withX_AxisStyle(title,?MinMax,?Showgrid,?Showline) =                    
-            let range = if MinMax.IsSome then Some (StyleParam.Range.MinMax (MinMax.Value)) else None
-            let xaxis = Axis.LinearAxis.init(Title=title,?Range=range,?Showgrid=Showgrid,?Showline=Showline)
-            Chart.withX_Axis(xaxis)
+        static member withX_AxisStyle(title,?MinMax,?Showgrid,?Showline,?Side,?Overlaying,?Id,?Domain,?Position,?Anchor) =                    
+            let range  = if MinMax.IsSome then Some (StyleParam.Range.MinMax (MinMax.Value)) else None
+            let domain = if Domain.IsSome then Some (StyleParam.Range.MinMax (Domain.Value)) else None
+            let xaxis  = Axis.LinearAxis.init(Title=title,?Range=range,?Showgrid=Showgrid,?Showline=Showline,
+                                    ?Anchor=Anchor,?Side=Side,?Domain=domain,?Overlaying=Overlaying,?Position=Position)
+            Chart.withX_Axis(xaxis,?Id=Id)
 
 
         // Sets y-Axis of 2d and 3d- Charts
-        static member withY_Axis(yAxis:Axis.LinearAxis) =       
+        static member withY_Axis(yAxis:Axis.LinearAxis,?Id) =       
             (fun (ch:GenericChart) ->                                 
                 let contains3d =
                     ch 
@@ -138,8 +155,9 @@ module ChartExtensions =
                 match contains3d with
                 | false -> 
                     let layout =
+                        let id = if Id.IsSome then StyleParam.AxisId.Y Id.Value else StyleParam.AxisId.Y 1
                         GenericChart.getLayout ch 
-                        |> Layout.style(yAxis=yAxis)
+                        |> Layout.AddLinearAxis(id,axis=yAxis)
                     GenericChart.setLayout layout ch
                 | true  -> 
                     let layout =
@@ -149,10 +167,12 @@ module ChartExtensions =
             )
 
          // Sets y-Axis of 3d- Charts
-        static member withY_AxisStyle(title,?MinMax,?Showgrid,?Showline) =
-            let range = if MinMax.IsSome then Some (StyleParam.Range.MinMax (MinMax.Value)) else None
-            let yaxis = Axis.LinearAxis.init(Title=title,?Range=range,?Showgrid=Showgrid,?Showline=Showline)
-            Chart.withY_Axis(yaxis)                
+        static member withY_AxisStyle(title,?MinMax,?Showgrid,?Showline,?Side,?Overlaying,?Id,?Domain,?Position,?Anchor) =                    
+            let range  = if MinMax.IsSome then Some (StyleParam.Range.MinMax (MinMax.Value)) else None
+            let domain = if Domain.IsSome then Some (StyleParam.Range.MinMax (Domain.Value)) else None
+            let yaxis  = Axis.LinearAxis.init(Title=title,?Range=range,?Showgrid=Showgrid,
+                                    ?Showline=Showline,?Anchor=Anchor,?Side=Side,?Domain=domain,?Overlaying=Overlaying,?Position=Position)
+            Chart.withY_Axis(yaxis,?Id=Id)                
 
 
 
@@ -166,12 +186,46 @@ module ChartExtensions =
              )
 
         // Sets z-Axis style with ... 
-        static member withZ_AxisStyle(title,?MinMax,?Showgrid,?Showline) =
-            let range = if MinMax.IsSome then Some (StyleParam.Range.MinMax (MinMax.Value)) else None
-            let zaxis = Axis.LinearAxis.init(Title=title,?Range=range,?Showgrid=Showgrid,?Showline=Showline)
+        static member withZ_AxisStyle(title,?MinMax,?Showgrid,?Showline,?Domain,?Anchor) =                    
+            let range  = if MinMax.IsSome then Some (StyleParam.Range.MinMax (MinMax.Value)) else None
+            let domain = if Domain.IsSome then Some (StyleParam.Range.MinMax (Domain.Value)) else None
+            let zaxis  = Axis.LinearAxis.init(Title=title,?Range=range,?Showgrid=Showgrid,?Showline=Showline,?Anchor=Anchor,?Domain=domain)
             Chart.withZ_Axis(zaxis)                
 
 
+        //// Sets second x-Axis of 2d- Charts
+        //static member withX_Axis2(xAxis2:Axis.LinearAxis) =       
+        //    (fun (ch:GenericChart) ->                                 
+        //            let layout =
+        //                GenericChart.getLayout ch 
+        //                |> Layout.style (xAxis2=xAxis2)
+        //            GenericChart.setLayout layout ch
+        //            )
+
+
+        // // Sets second x-Axis of 2d- Charts
+        //static member withX_Axis2Style(title,?MinMax,?Showgrid,?Showline) =                    
+        //    let range = if MinMax.IsSome then Some (StyleParam.Range.MinMax (MinMax.Value)) else None
+        //    let xaxis = Axis.LinearAxis.init(Title=title,?Range=range,?Showgrid=Showgrid,?Showline=Showline,Side=StyleParam.Side.Top)
+        //    Chart.withX_Axis2(xaxis)
+
+
+        //// Sets second y-Axis of 2d- Charts
+        //static member withY_Axis2(yAxis2:Axis.LinearAxis) =       
+        //    (fun (ch:GenericChart) ->                                 
+        //            let layout =
+        //                GenericChart.getLayout ch 
+        //                |> Layout.style (yAxis2=yAxis2)
+        //            GenericChart.setLayout layout ch
+        //            )
+
+
+        // // Sets second x-Axis of 2d- Charts
+        //static member withY_Axis2Style(title,?MinMax,?Showgrid,?Showline) =                    
+        //    let range = if MinMax.IsSome then Some (StyleParam.Range.MinMax (MinMax.Value)) else None
+        //    let yaxis = Axis.LinearAxis.init(Title=title,?Range=range,?Showgrid=Showgrid,?Showline=Showline,Side=StyleParam.Side.Right)
+        //    Chart.withY_Axis2(yaxis)
+
 
         // Set the Layout options of a Chart
         static member withLayout(layout:Layout) =

src/FSharp.Plotly/Dimensions.fs

@@ -10,7 +10,7 @@ type Dimensions () =
     /// Initialized Dimensions object
     static member init
         (
-            values,
+            ?Values,
             ?Range,
             ?Constraintrange,
             ?Visible,
@@ -22,7 +22,7 @@ type Dimensions () =
             Dimensions () 
             |> Dimensions.style
                 (
-                    values           = values    ,
+                    ?Values          = Values    ,
                     ?Range           = Range     ,
                     ?Constraintrange = Constraintrange,
                     ?Visible         = Visible,
@@ -36,7 +36,7 @@ type Dimensions () =
     // Applies the styles to Dimensions()
     static member style
         (
-            values  : seq<#IConvertible>,
+            ?Values  : seq<#IConvertible>,
             ?Range  : StyleParam.Range,
             ?Constraintrange : StyleParam.Range,
             ?Visible,
@@ -46,7 +46,7 @@ type Dimensions () =
             ?TickFormat
         ) =
             (fun (dims:Dimensions) -> 
-                values           |> DynObj.setValue      dims "values"
+                Values           |> DynObj.setValueOpt   dims "values"
                 Range            |> DynObj.setValueOptBy dims "range" StyleParam.Range.convert                
                 Constraintrange  |> DynObj.setValueOptBy dims "constraintrange" StyleParam.Range.convert                 
                 Visible          |> DynObj.setValueOpt   dims "Visible"