Problems Embedding DHIS Tables and Charts

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.

2 Likes

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.

1 Like

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

5 Likes

Thank you for the clarification @jan :slightly_smiling_face:

Best,
James.

1 Like

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

2 Likes

Which url does your app run from?

Please post the full content of the html file.

2 Likes

@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.

2 Likes

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.

3 Likes

Thanks @jan How about the other plugins for Maps (GIS), and Charts. Is it possible to update even the dynamically generated embed codes to point to the right URL instead of the cdn?

Regards

2 Likes

Hi All, I have managed to embed charts on other versions of 2.32.3 and below BUT on 2.33+, the chart.js seems to be not accessible. Has the implementation changed to give possibilities to integrate into a web portal or or dhis2 app if so, how is it now done as there no documentation for 2.33+ on integrating charts. for now the report Table and map seems to work.

1 Like

Hi @stephocay, you should still be able to run your portal by using a local copy of the plugin, you can get it from here: https://play.dhis2.org/2.32.3/dhis-web-visualizer/chart.js

The Classic Data Visualizer app, which generates that plugin, is no longer supported in 2.33+. In the new DV app we are using a more modern tech stack based on React, so the “chart plugin” is now a React component (published here: https://www.npmjs.com/package/@dhis2/data-visualizer-plugin).

Hope this helps.

Jan

1 Like