This app demonstrates using a popular charting library, Chart.js, for rendering charts within nodes.
The data for each chart is stored on the node data in the model. In this case the datasets
property value has the same properties that are expected by the Chart.js configuration, but you could
organize the data however you want.
The makeLineChart
conversion function is used by a Binding on Picture.element
to generate a Canvas element that can be shown in the node. Most of the implementation of that function
is specific to Chart.js. The rendering requires the Canvas to be in the HTML DOM. To avoid accumulating
resources, the configuration of the chart defines an onComplete
event handler to
remove the Canvas element from the DOM. That allows any future removal of the Node from the Diagram not
to leave an unused Canvas element behind.