This sample shows how HTML Canvas Elements, such as those created from other libraries, can be used inside of GoJS as Pictures. The ability of Picture to use other Canvas elements allows you to use any Canvas graphing or charting library in conjunction with GoJS.

All of the Nodes in this sample consist of a single Picture, and that Picture's Picture.element property is set to a HTML Canvas Element that has its image generated from a (non-GoJS) Canvas visualization library or WebGL demo.

The WebGL demo is from the WebGL Demo Repository. The WebGL node is animated by calling myDiagram.redraw() every animation frame.

Original demo by Jetro Lauha
WebGL port by Kenneth Waters

Internet Explorer 9 and 10 (and many mobile platforms) do not support WebGL, and in unsupported browsers no WebGL node will be displayed.

The data behind the nodes is randomly generated.

4, 7 5,3,2,-1,-3,-2,2,3,5,2