0

I'm trying to build a dynamic gantt chart in my Cognos 11 report using MermaidJS but it keeps returning the error: "Uncaught ReferenceError: mermaidAPI is not defined" It seems as though the browser can't find my reference to the Mermaid library but I don't know how else to reference it besides adding it to the header via javascript.

What am i doing wrong with referencing the mermaid library that my browser doesn't like? My JS module is as follows:

define( ['jquery'], function($) {

    $('head').append('<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>');
    console.log('appended to head');

    $(document).ready(function() {
        console.log('document load');
        mermaid.initialize({startOnLoad:false});
    });

    function ListToGantt() {
    };

    ListToGantt.prototype.draw = function( oControlHost ) {
        console.log( "PageModule.draw" );

        var oConfig = oControlHost.configuration;
        var table = oControlHost.page.getControlByName(oConfig.name);

        var el = oControlHost.container;
        el.innerHTML +=
            '<div id="mermaidContainer" class="mermaid">' +
            'gantt' +
            '   title EDW Daily Build Gantt Diagram' +
            '   dateFormat  MMM DD YYYY hh:mm:ss A' +
            '   axisFormat  %H:%M %p' +
            '   section 30 Day Avg' +
            '   A task           :a1, Jan 01 2014 01:00:30 am, 30m' +
            '   Another task     :after a1, 20m' +
            '   section Latest Build' +
            '   Task in sec      :Jan 01 2014 01:01:30 am, 12m' +
            '   another task      : 24m' +
            '</div>';

        ///Start of method      
        var tableArr = [];
        // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
        for (var i = 0; i < table.element.rows.length; i++) {

            // GET THE CELLS COLLECTION OF THE CURRENT ROW.
            var tableRows = table.element.rows[i];
            var tempArray = [];
            // LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
            for (var j = 0; j < tableRows.cells.length; j++) {
                tempArray[j] = tableRows.cells[j].lastChild.innerText;
                //info.innerHTML = info.innerHTML + ' ' + tableRows.item(j).innerHTML;
            }
            tableArr[i] = tempArray;
        }
        console.log(tableArr);
        ///End of method;

    };

    return ListToGantt;
});
Grim Coder
  • 394
  • 2
  • 12

1 Answers1

0

Try changing this line 

$('head').append('<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>');
    console.log('appended to head');

    $(document).ready(function() {
        console.log('document load');
        mermaid.initialize({startOnLoad:false});
    });

To this 

$.getScript( "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js", function( data, textStatus, jqxhr ) {
  console.log( "Load was performed." );
   mermaid.initialize({startOnLoad:false});
});
Peter
  • 1,860
  • 2
  • 18
  • 47
  • Unfortunately I still get the same error. Uncaught ReferenceError: mermaid is not defined. – Grim Coder May 12 '20 at 02:34
  • After making this change I took a look at the console and I get this warning though. A cookie associated with a cross-site resource at http://jsdelivr.net/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032. – Grim Coder May 12 '20 at 02:38
  • Please you can make new question on this error. or you can search for solution https://stackoverflow.com/a/58238399/8235983 – Peter May 12 '20 at 02:44
  • I will, but this is just a warning and does not solve my original issue about mermaid not loading. – Grim Coder May 12 '20 at 02:56