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.
GoJS Diagrams can be used alongside other HTML elements in a webapp. For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the HTMLInfo class.
More information can be found in the GoJS Intro.
GoJS is intended to run in any environment that executes JavaScript. This includes on browsers and within browser frameworks, and also in headless contexts such as Node.js.
We maintain examples for common frameworks:
More information, including usage on frameworks including Electron, Blazor, and node.js, can be found at the GoJS Intro.