Problems Embedding DHIS Tables and Charts

Olaleke_Seweje · 9 February 2019 13:04

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.

jomutsani · 11 February 2019 10:06

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 · 11 February 2019 12:56

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:

If your app runs inside DHIS2: link to the plugin with a relative path
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: Home - DHIS2 Documentation

Jan

jomutsani · 11 February 2019 13:42

Thank you for the clarification @jan

Best,
James.

Olaleke_Seweje · 11 February 2019 14:15

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 · 18 February 2019 10:34

Which url does your app run from?

Please post the full content of the html file.

Olaleke_Seweje · 19 February 2019 10:02

@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 · 21 February 2019 10:18

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.

stephocay · 21 September 2019 15:53

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

stephocay · 29 January 2020 18:36

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.

jan · 30 January 2020 10:42

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