Problems Embedding DHIS Tables and Charts


(Olaleke Seweje) #1

Hello all,

I need your help.

I am trying to embed DHIS charts and tables in a website. I tried both the embed snippet available in visualizer as well as that in Web API doc - 1.40.1 Embedding pivot tables with the Pivot Table plug-in.

I am developing on localhost. First off, the CDN URLs (shown below) provided in both snippets does not resolve.

<script src="https://dhis2-cdn.org/v227/plugin/jquery-2.2.4.min.js"></script>

<script src="https://dhis2-cdn.org/v227/plugin/reporttable.js"></script>

I later found the reporttable.js file inside dhis file hierarchy itself. For JQuery, I used the public JQuery url. See below.

<script src="//[code.jquery.com/jquery-2.2.4.min.js](http://code.jquery.com/jquery-2.2.4.min.js)">
</script>
<script src="https://play.dhis2.org/2.31.1/dhis-web-pivot/reporttable.js"></script>

However, when I run the code snippet (provided in developer doc) expecting it to load a table, I get an exception on the console like so:

Failed to load https://play.dhis2.org/demo/api/29/me.json: Response for preflight is invalid (redirect)

Can someone please give ideas/solution on getting the me.json file to load and display the chart from where I am?

Thanks.


(James Omutsani) #2

Hi @Olaleke_Seweje,

Kindly be patient as the community members look into helping you out with this issue. Our team from @dhis2-analytics will also have a look at this and advise.

Best,
James.


(Jan Henrik Øverland) #3

Hi @Olaleke_Seweje,

The cdn is no longer supported. Sorry for the inconvenience and lack of updated documentation.

The plugins do exist in the DHIS2 instance, e.g. https://play.dhis2.org/2.28/dhis-web-pivot/reporttable.js, so to make it work you either:

  1. If your app runs inside DHIS2: link to the plugin with a relative path

  2. If not: put a copy of the file in your app

Same thing for the jquery file: https://play.dhis2.org/2.28/dhis-web-pivot/jquery.min.js

The rest of the documentation should be fine: https://docs.dhis2.org/2.26/en/developer/html/webapi_plugins.html#d0e7301

Jan


(James Omutsani) #4

Thank you for the clarification @jan :slightly_smiling_face:

Best,
James.


(Olaleke Seweje) #5

Thanks @jan, I had used the reportable.js from the dhis demo site before and now on your advice I have also downloaded the jquery file but I still get the old error and one additional. See my full code below:

<!DOCTYPE html>
<script>
    reportTablePlugin.url = "https://play.dhis2.org/demo";
    reportTablePlugin.username = "admin";
    reportTablePlugin.password = "district";
    reportTablePlugin.loadingIndicator = true;

    // Referring to an existing table through the id parameter, render to "report1" div

    var r1 = { el: "report1", id: "R0DVGvXDUNP" };

    // Table configuration, render to "report2" div

    var r2 = {
        el: "report2",
        columns: [
            {dimension: "dx", items: [{id: "YtbsuPPo010"}, {id: "l6byfWFUGaP"}]}
        ],
        rows: [
            {dimension: "pe", items: [{id: "LAST_12_MONTHS"}]}
        ],
        filters: [
            {dimension: "ou", items: [{id: "USER_ORGUNIT"}]}
        ],

        // All following properties are optional
        title: "My custom title",
        showColTotals: false,
        showRowTotals: false,
        showColSubTotals: false,
        showRowSubTotals: false,
        showDimensionLabels: false,
        hideEmptyRows: true,
        skipRounding: true,
        aggregationType: "AVERAGE",
        showHierarchy: true,
        completedOnly: true,
        displayDensity: "COMFORTABLE",
        fontSize: "SMALL",
        digitGroupSeparator: "COMMA",
        legendSet: {id: "fqs276KXCXi"}
    };

    reportTablePlugin.load([r1, r2]);
</script>

And this is the error console from my browser now:

If I use the jquery-2.2.4.min.js directly from the JQuery CDN, I still get my initial ‘preflight’ error.

Please I still need further advice/clarifications.

Thanks


(Jan Henrik Øverland) #6

Which url does your app run from?

Please post the full content of the html file.


(Olaleke Seweje) #7

@jan

My code runs from localhost but I have tried to put it on a web server (with https) as well and I got the same results as on localhost.

My full html below:

<!DOCTYPE html>
    <script>
        $(document).ready(function(){
            reportTablePlugin.url = "https://play.dhis2.org/2.31.1/";
            reportTablePlugin.username = "admin";
            reportTablePlugin.password = "district";
            reportTablePlugin.loadingIndicator = true;

            // Referring to an existing table through the id parameter, render to "report1" div

            var r1 = { el: "report1", id: "R0DVGvXDUNP" };

            // Table configuration, render to "report2" div

            var r2 = {
                el: "report2",
                columns: [
                    {dimension: "dx", items: [{id: "YtbsuPPo010"}, {id: "l6byfWFUGaP"}]}
                ],
                rows: [
                    {dimension: "pe", items: [{id: "LAST_12_MONTHS"}]}
                ],
                filters: [
                    {dimension: "ou", items: [{id: "USER_ORGUNIT"}]}
                ],

                // All following properties are optional
                title: "My custom title",
                showColTotals: false,
                showRowTotals: false,
                showColSubTotals: false,
                showRowSubTotals: false,
                showDimensionLabels: false,
                hideEmptyRows: true,
                skipRounding: true,
                aggregationType: "AVERAGE",
                showHierarchy: true,
                completedOnly: true,
                displayDensity: "COMFORTABLE",
                fontSize: "SMALL",
                digitGroupSeparator: "COMMA",
                legendSet: {id: "fqs276KXCXi"}
            };

            reportTablePlugin.load([r1, r2]);
        });
    </script>

</head>

<body>
    <div id="report1"></div>
    <div id="report2"></div>
</body>

The error I am getting on the Chrome console is:

Failed to load https://play.dhis2.org/2.31.1//api/29/me.json: Response for preflight is invalid (redirect)

The me.json file reference is accessible via the browser.I also used an API testing software (Insomnia) and it was reachable.


(Jan Henrik Øverland) #8

Looks fine, so it just sounds like a CORS issue. Remember to add your domain to the CORS whitelist in the DHIS2 instance you are running against:

https://play.dhis2.org/2.31.1/dhis-web-settings/index.html#/search?cors

Remember that the databases on play.dhis2.org are reset every night, so you should only use those servers as a proof of concept.