seaside-plotlyjs

This library provides a wrapper, including a builder class and specific abstractions, to create Plotly.js plots from your Seaside canvas classes.

Sample code

renderContentOn: html
| plotly |
html div id:'plotContainer'.
plotly := html plotly:'plotContainer'.
plotly
data:
{(PlotlyTrace scatter
name:'Scatter series';
showlegend:true;
mode:'markers';
x: (1to:10);
y: ((1to:10) collect: [ :each | 10 atRandom /2 ]);
yourself).
(PlotlyTrace scatter
name:'Line series';
showlegend:true;
x: (1to:10);
y: ((1to:10) collect: [ :each | 10 atRandom /2 ]);
yourself)};
layout:
(PlotlyLayoutnewtitle: (PlotlyTexttext:'Simple plot');
width:500height:300;
yourself).
plotly config beResponsive.
html document addLoadScript: plotly

renderContentOn: html
| plotly |
html div id:'plotContainer'.
plotly := html plotly:'plotContainer'.
plotly
data:
{(PlotlyTrace pie
hole:0.4;
values:#(19 , 26 , 55);
labels:#('Residential' , 'Non-Residential' , 'Utility'))};
layout:
(PlotlyLayoutnewtitle: (PlotlyTexttext:'Donut Chart');
width:500height:300;
yourself).
plotly config beResponsive.
html document addLoadScript: plotly

Installation

Pharo 8.0 or newer

Metacellonewrepository:'github://emaringolo/seaside-plotlyjs/src';
baseline:'Plotly';
load.

VAST Platform (VA Smalltalk) 10.0.02 or newer

• Load ENVY/Image Tonel support feature
• Load ST: Server Smalltalk (SST) - Seaside feature
• Clone this repository to a local drive

| loaderpath |
path := (CfsPathnamed:'path\to\repository'). "Path to the cloned repository"
loader :=TonelLoaderreadFromPath: path.
loader
createsHookMethods:true;
beUnattended;
useGitVersion;
loadApplicationsForPackagesNamed:#('Seaside-Plotly-Core' 'Seaside-Plotly-Examples').

Plotly.js library

Given that the full Plotly.js library is heavy (~3.5MB mimized) and it is common to build a custom bundle with only the plots used, this wrapper doesn't provide a FileLibrary, and instead you have to link to the library, either by using a CDN or downloading it and linking to the file location.

updateRoot: anHtmlRoot
superupdateRoot: anHtmlRoot.
anHtmlRoot script url:'https://cdn.plot.ly/plotly-2.4.2.min.js'.
"..."

Examples

After installing the default group, you can access http://localhost:8080/plotly to access an example component showing the different kind of plots, and the smalltalk code to produce them.

Future steps

Add more examples about how to create other kind of plots (Surface, Mesh), and multiple plots, axis sharing, etc.