Skip to content

Chart

Jump to bottom
LucyMu edited this page Mar 7, 2019 · 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

The empty chart contains numeric X and Y axes, grid lines and has interactive navigation enabled by default.

Adding plots

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

There are functions to add the plots to the chart

  • Chart.addPolyline: polyline:Plots.Polyline.Plot -> whereToAdd:Chart -> Chart
  • Chart.addMarkers: markers:Plots.Markers.Plot -> whereToAdd:Chart -> Chart
  • Chart.addBars: bars:Plots.Bars.Plot -> whereToAdd:Chart -> Chart
  • Chart.addHistogram: bars:Plots.Histogram.Plot -> whereToAdd:Chart -> Chart

Example

let chart =
   Chart.Empty
   |> Chart.addPolyline curve1
   |> Chart.addMarkers markersPlot1
   |> Chart.addBars barsPlot1
   |> Chart.addHistogram histogramPlot1

Configuring style

Adding title and labels. Specifying chart size

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) - the total size if the chart

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"

Tuning grid lines, axes and legend visibility. Disabling interactive navigation.

By default Chart.Empty contains numeric X and Y axes, grid lines and navigation enabled. You can alter any of these.

setGridLines: gridLines:GridLines -> chart:Chart can override the grid lines appearance.

With setXaxis: axisMode:Axis -> chart:Chart and setYaxis: axisMode:Axis -> chart:Chart you can hide X and Y axis respectively by passing Axis.Hidden value as axisMode

You can set the legend visibility to either Visible, Hidden or Automatic with setLegendEnabled: LegendVisibility -> Chart. Automatic visibility (which is default) means that the legend is only visible if any of the plots contain the name.

By default the chart is interactive (e.g. it can be zoomed, panned with mouse or touche gestures). The interactivity can be disabled by passing false to setNavigationEnabled: bool -> Chart function.

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

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

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

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

Clone this wiki locally