Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
151 lines (118 sloc) 3.76 KB
{-# LANGUAGE OverloadedStrings,TemplateHaskell, ExtendedDefaultRules #-}
{-# OPTIONS_GHC -F -pgmF inlitpp #-}
# Plotly.js Haskell bindings examples
```haskell hide top
import Inliterate.Import
import Graphics.Plotly hiding (text)
import Graphics.Plotly.Lucid
import Data.Text (Text)
import Lens.Micro
import Numeric.Datasets.Iris
import Data.Aeson
```
```html_header
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
```
This web pages shows plots generated with the plotlyhs packages, along with the
Haskell code that generated the plots. To use the plots on the generate page,
the Plotly.js source code should first be including by adding this tag to your HTML
header:
```html
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
```
Alternatively, this tag can be included in an HTML page using the `plotlyCDN`
function in `Graphics.Plotly.Lucid` (when using Lucid) or
`Graphics.Plotly.Blaze`(when using blaze-html).
### A complete & minimal example
```haskell
{-# LANGUAGE OverloadedStrings #-}
import Lucid
import Lucid.Html5
import Graphics.Plotly
import Graphics.Plotly.Lucid
import Lens.Micro
import qualified Data.Text.Lazy as T
import qualified Data.Text.Lazy.IO as T
main =
T.writeFile "test.html" $ renderText $ doctypehtml_ $ do
head_ $ do meta_ [charset_ "utf-8"]
plotlyCDN
body_ $ toHtml $ plotly "myDiv" [myTrace]
pointsData :: [(Double, Double)]
pointsData = zip [1,2,3,4] [500,3000,700,200]
myTrace
= line (aes & x .~ fst
& y .~ snd) pointsData
```
```haskell eval
plotly "p0" [line (aes & x .~ fst & y .~ snd) pointsData]
```
In the examples below, we omit all of the imports,
main function, html header and focus only
on the `Plotly` value (the argument to `toHtml`). The
`Plotly` value can be constructed with the function `plotly`
which takes two arguments: the element id of the `<div>`
for the plot (this element will be created if you call toHtml on the `Plotly`
value) and a list of traces.
### A simple plot
We use these this basic dataset:
```haskell top
pointsData :: [(Double, Double)]
pointsData = zip [1,2,3,4] [500,3000,700,200]
```
Code to generate build the `Plotly` value
(which has a `toHtml` instance), result on the right
```haskell eval twocol
plotly "div1" [line (aes & x .~ fst
& y .~ snd)
pointsData]
```
The above is quite unbearably sized & padded for this tutorial, so let's fix the
margins and the plot height
```haskell eval twocol
plotly "div2" [line (aes & x .~ fst
& y .~ snd)
pointsData]
& layout . margin ?~ thinMargins
& layout . height ?~ 300
```
### Lines and Markers
```haskell eval twocol
plotly "div3" [points (aes & x .~ fst
& y .~ snd)
pointsData]
& layout . margin ?~ thinMargins
& layout . height ?~ 300
```
```haskell eval twocol
plotly "div4" [points (aes & x .~ fst
& y .~ snd)
pointsData
& mode ?~ [Lines, Markers]]
& layout . margin ?~ thinMargins
& layout . height ?~ 300
```
### Iris plots
This plot uses the `iris` value from the datasets package
```haskell eval twocol
plotly "div6"
[points (aes & x .~ sepalLength
& y .~ sepalWidth
& color ?~ (fromEnum . irisClass)) iris]
& layout . margin ?~ thinMargins
& layout . height ?~ 300
```
### Horizontal bar plots
Using this simple dataset:
```haskell top
hbarData :: [(Text, Double)]
hbarData = [("Simon", 14.5), ("Joe", 18.9), ("Dorothy", 16.2)]
```
```haskell eval twocol
plotly "div7"
[hbars (aes & y .~ fst
& x .~ snd)
hbarData]
& layout . margin ?~ thinMargins
& layout . height ?~ 300
```
You can’t perform that action at this time.