29 Feb 2016

RGraph chart library and Viewer

Default blog image

Follow me @augustomaia

It's quite straightforward to write an extension to View & Data, just write a custom code for load and for unload. You'll find several extensions on this blog, including this: Integrating a chart library, by Philippe Leefsma.

This post uses Philippe's sample and replaces the loadChartFromProperty to create charts using RGraph library. The code assumes the model is already loaded on the viewer and search for all properties on the geometries, so make sure you call loadExtension after calling load. For instance:

// Load the document (urn) on the view object
function loadDocument(documentId) {
    // Find the first 3d geometry and load that.
        function (doc) { // onLoadCallback
            var geometryItems = [];
            geometryItems = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {
                'type': 'geometry',
                'role': '3d'
            }, true);
            if (geometryItems.length > 0) {
                _viewer.load(doc.getViewablePath(geometryItems[0]), null, function () {
                    _viewer.loadExtension('Autodesk.ADN.Viewing.Extension.Chart.RGraph', '');
        function (errorMsg) { // onErrorCallback
            alert("Load Error: " + errorMsg);

Here is what the result should look like. See code below (hosted on Github)


See code below (hosted on Github)

Related Article

Posted By

Augusto Goncalves

Developer Advocate at Autodesk since 2008, working with both desktop and web/cloud apps using top technologies, like C#, JavaScript, NodeJS and any other that can solve problems and improve workflows. See my samples on Github and follow me on Twitter for updates.