HTML reports and charts from CSPro data entry

Discussions about CSEntry
Forum rules
New release: CSPro 8.0
josh
Posts: 2399
Joined: May 5th, 2014, 12:49 pm
Location: Washington DC

HTML reports and charts from CSPro data entry

Post by 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
Posts: 104
Joined: January 11th, 2012, 12:55 am

Re: HTML reports and charts from CSPro data entry

Post by Anne »

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

Anne
htuser
Posts: 631
Joined: December 19th, 2011, 6:26 pm
Location: Silver Spring Area, MD, USA

Re: HTML reports and charts from CSPro data entry

Post by 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,
G.VOLNY, a CSProuser from Haiti, since 2004
lls
Posts: 109
Joined: December 6th, 2011, 3:11 pm
Location: Geneva, Switzerland

Re: HTML reports and charts from CSPro data entry

Post by 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
Posts: 109
Joined: December 6th, 2011, 3:11 pm
Location: Geneva, Switzerland

Re: HTML reports and charts from CSPro data entry

Post by 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
Posts: 2399
Joined: May 5th, 2014, 12:49 pm
Location: Washington DC

Re: HTML reports and charts from CSPro data entry

Post by 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
Posts: 109
Joined: December 6th, 2011, 3:11 pm
Location: Geneva, Switzerland

Re: HTML reports and charts from CSPro data entry

Post by 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
Posts: 2399
Joined: May 5th, 2014, 12:49 pm
Location: Washington DC

Re: HTML reports and charts from CSPro data entry

Post by 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
Posts: 572
Joined: July 9th, 2012, 11:32 am
Location: Islamabad, Pakistan

Re: HTML reports and charts from CSPro data entry

Post by 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
Posts: 25
Joined: April 15th, 2013, 12:43 pm

Re: HTML reports and charts from CSPro data entry

Post by 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
Post Reply