Skip to content
lucymukh edited this page Dec 12, 2018 · 11 revisions

A chart is an entity that corresponds to Chart in IDD.

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

You can create a chart, add some plots to it, tune the general appearance of it and then get HTML code that produces the chart with Interactive Data Display

Chart creation

The chart can be created as follows

open FSharpIDD
let chart = Chart.Empty

Adding plots

The chart can contain plots (e.g. polyline, markers)

There are functions to add the plots to the chart

  • Chart.addPolyline: polyline:Plots.Polyline.Plot -> whereToAdd:Chart -> Chart

Example

let chart =
   Chart.Empty
   |> Chart.addPolyline curve1
   |> Chart.addPolyline curve2
   |> Chart.addPolyline curve3
  • Chart.addMarkers: markers:Plots.Markers.Plot -> whereToAdd:Chart -> Chart

Example

let chart =
   Chart.Empty
   |> Chart.addMarkers markersPlot1
   |> Chart.addMarkers markersPlot2
   |> Chart.addMarkers markersPlot3

Configuring style

The chart have the following visual properties that can be configured

  • Title - text that is placed above the plotting area and identifies the chart in general.
  • X label - text that is placed below the X axis. Usually specifies X axis meaning including the axis units.
  • Y label - text that is placed to the left of the Y axis. Usually specifies Y axis meaning including the axis units.
  • Size (in pixels)

These properties can be configured with the corresponding functions of FSharpIDD.Chart module:

  • setTitle: title:string -> chart:Chart -> Chart
  • setXlabel: label:string -> chart:Chart -> Chart
  • setYlabel: label:string -> chart:Chart -> Chart
  • setSize: widthPixels:int -> heightPixels:int -> chart:Chart -> Chart

Example

Chart.Empty
    |> Chart.setTitle "Parameter evolution"
    |> Chart.setSize 600 300
    |> Chart.setXlabel "iteration"
    |> Chart.setYlabel "Parameter value"

Generating HTML

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

After injection into your page generated HTML is not a chart yet. It is just a set of DIVs that can be transformed into the chart. To do it 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

  $(".fsharp-idd").each(function(index) {
       InteractiveDataDisplay.asPlot($(this));
  })

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

That's it! You have charts on your page.

Clone this wiki locally