Skip to content

Subplots

Jump to bottom
lucymukh edited this page Mar 7, 2019 · 7 revisions

Subplots is a rectangular grid of charts, which has:

It is also a block that can be transformed into HTML code for embedding.

You can create Subplots, add and remove charts from the Subplots, manage other settings of it and then get HTML code that produces the Subplots with Interactive Data Display

Create Subplots

Subplots structure is in fact a number of charts which are arranged in a rectangular grid. It can be created as follows

open FSharpIDD
open FSharpIDD.Plots
open FSharpIDD.Chart

// prepare a chart that could be a subplot
let sample_chart =
	let p_x = [|1.0; 2.0; 3.0|]
	let p_y = [|3.0; 1.0; 2.0|]		
	Chart.addPolyline (Polyline.createPolyline p_x p_y) Chart.Empty
	
let rows = 2
let cols = 2
let subplots = Subplots.createSubplots rows cols (fun r c -> Some sample_chart)

In this case all of the charts are the same.

One can assemble different charts and place them differently in the grid. One way to do this is in the initializer function

let initializer row column =
	match row,column with
	| 0,0 -> Some sample_chart1
	| 0,1 -> 
		Some {
			sample_chart1 with
				IsLegendEnabled = LegendVisibility.Visible  // chart legend
				Title = "Upper-right chart"  // chart title
		}
	| 1,0 -> Some sample_chart2
	| _ -> None
let subplots = Subplots.createSubplots 2 2 initializer

Add and remove subplot

You can add and remove charts from the Subplots by the setSubplot function, specifying the row and column of the slot that is referenced

subplots
|> Subplots.setSubplot 0 1 None
|> Subplots.setSubplot 1 0 sample_chart3

Axis sharing

Each subplot has independent navigation by default. However horizontal and vertical axes of all charts in the Subplots structure can be binded

subplots
|> Subplots.setSyncHorizontalAxes true
|> Subplots.setSyncVerticalAxes true

External legend

All of the charts can have their own legend inside a slot in the grid. Besides, Subplots have a slot for an external legend for one of the charts. It can be placed to the either side of the grid

subplots |> Subplots.setExternalLegend Right 0 0

Common visibility

Although any legend in Subplots (either external or within the grid cell) reflects plots of only one subplot, it can be used for enabling/disabling visibility of plots with the same name in all of the subplots

subplots |> Subplots.setCommonVisibility true

Subplots settings

Common title

Both Subplots and each chart can have their own titles. To set a common title

Subplots.setTitle "Common subplots name" subplots

Subplot size

All of the charts in the Subplots structure have the same size. The size can be set (in pixels) by

subplots |> Subplots.setSubplotSize 350 150

Margins

Margins between the subplots in a grid can be also set (value in pixels). This value also defines the space between the grid and external legend

subplots |> Subplots.setMargins 30

Generating HTML

Subplots can be transformed into HTML chunk that you can embed somewhere in your HTML page. To get the embeddable HTML chunk use Subplots.toHTML: Subplots -> string function.

After injection into your page generated HTML is not Subplots yet. It is just a set of DIVs that can be transformed into Subplots. To do so you need to load the Interactive Data Display JavaScript (IDD) library in some way. It can be <script src=... /> references, RequireJS module import, WebPack or any other approach depending on your needs. Anything that makes InteractiveDataDisplay JavaScript variable available will work.

An example of IDD library loading can be seen in the code repository: Demo.Net project, template.html file.

After the IDD is loaded you need to call the following code

  $("div.idd-subplots").each(function(index) {
       InteractiveDataDisplay.asSubPlots($(this));
  })

This code finds all of the Subplots DIVs on the page and transforms them into the real IDD charts.

Clone this wiki locally