HTML reports and charts from CSPro data entry

[josh]

Had some fun this weekend learning D3, a really nice Javascript library for making charts. By using filewrite and execsystem it is possible (although not really simple) to generate D3 charts based on CSPro data and then view the resulting HTML. This lets you generate and view charts even on Android devices which can be useful for supervisor reviews.

In case anyone is interested the code is on Github: https://github.com/jhandley/cspro-D3-charts

Hopefully in a future version of CSPro we can add some features to make this easier.

[Anne]

Where's the "like" button in this forum?

Anne

[htuser]

Very well and thanks Josh.
Open Cspro to other language is welcome. And we hope to use such codes to visualize whole enumerators data on a real-time
basis via the case management system in the future.
Regards,

[lls]

This is really interesting.

But when trying to generate graphs with the downloaded application, html pages are empty (except the title). where is 'data/completed-by-day-by-enumerator-cumulative-data.js' and other files?

EDIT

I think the data folder is missing in reports. Created a new data folder and it works.
Creating that kind if code is not easy for people like me. d3 is very powerful, I would love to see some new tool in CSPro to facilitate d3 graphs generation.

Thank you for sharing the code you have created.

lls

[lls]

Playing with d3 is really cool.

I managed to tweek the code to adapt to my application but I have a question (the housing type pie chart).

If I understand, the code will display the n. values that are in the value set. So, in my case, I changed the housing type (9 types in value set) to Region in my application (5 regions, africa, asia, etc.) and it works fine, I get a pie chart with the number of cases related to each region. I tried to do the same with the country field but it does not work. I guess it is because I have no value set in the country field with a list of all countries. Rather I am using an external file to generated a dynamic valueset of countries.

Have you any example of a d3 graph based on values from an external file?

ty

[josh]

The logic to generate the categories for the pie chart comes from the loop on line 263. You can see that it calls getlabel(H01_TYPE, i) to get the label from the value set and write it to the reportDataFile. You can change this loop to instead use loadcase to get the labels from the external file. If the country depends on the region then you will need two loops - one for region and another inside the region loop for the country and then use loadcase on region and country inside the innner loop.

[lls]

Thank you so much for your reply.
I get the idea but I don't see how to make a loop inside the first loop.
Would you be able to make an example?

[josh]

It would look something like this:

// Loop through regions
numeric regionCtr;
do regionCtr = 1 while regionCtr <= maxRegion
  // Load all countries for the region
  REGION_LU10 = regionCtr;
  if loadcase(REGION_TO_OPERATION_DICT, REGION_LU10) = 1 then
    // Loop through the countries that were loaded for the region
    numeric countryCtr;
    do countryCtr = 1 while countryCtr <= totocc(REGION_TO_OPERATION_DICT.REGION_TO_OPERATION_REC)
      // extract the country code and label from the lookup file
      string label = OPERATIONS_NAME_LU10(countryCtr );
      numeric code = OPERATIONS_LU10(countryCtr);
      // write count and label to the report data file
      filewrite(tempFile, "  {type: '%s', count: %d},",
      label, countries(code));
    enddo;
  endif;
enddo;

This is off the top of my head (not tested).

I just took a look at your lookup file though and I realized that your country codes are independent of the region, i.e. you don't have two countries in different regions that have the same code. This means that you could create a value set for the countries that includes all the country codes/labels from 1 to 91 and just use that for the report instead of the lookup file. That would be simpler since it would be pretty much the same as the household type example.

[khurshid.arshad]

Dear Josh
I hope you are doing fine. I have gone through the program "cspro-D3-charts-master". It is working on desktop but when it is run on Andriod, It shows blank page with Heading.

Please advice.
thanks.
arshad

[bidhu]

Hi Arshad,

I had faced the same problem. I deleted all the HTML file and created again and then only it worked.

Regards
Bidhu