There are a small number of interactive charts on the NCI Budget Fact Book sub-site. These charts are implemented via the HighCharts library.

The charts are populated by data contained within JSON formatted files which reside in the Drupal CMS, and the data file(s) in Drupal. The data files are retrieved via JavaScript code on the page containing the corresponding chart(s).

There are 16 charts in total, with 14 of them currently active, and displayed in FactBook. List of pages, and their corresponding charts are:

To add a chart to a new or existing page (existing pages include any of listed ones in the table above), it requires a code update, as well as a Drupal content update.

The code controlling charts resides in the cgov-digital-platform repository in the docroot/profiles/custom/cgov_site/themes/custom/cgov/cgov_common/src/libraries/charts directory.

Key Points:

• Charts are restricted to appear on only certain paths, controlled by the rules.js file.
• Each chart must have a unique identifier (see above).
• Each chart also has an "edition" of the form YYYYMMDD_REVISION (e.g. 20230329_2). See the "Cache Busting" topic below.
• Each chart has a Raw HTML block in the CMS' custom blocks library. This block contains both the unique identifier and the "Edition" and has the form:

  <div style="min-width: 310px; height: 400px; margin: 0 auto;" id="UNIQUE_IDENTIFIER" data-chart-revision="EDITION"></div>

  The block is inserted into the page where the chart is to appear.
• Each style of chart has a separate JavaScript file in the library which is responsible for providing an initChart function which returns an object containing the chart's ID as well as the data to populate the chart.

When a user hits a FactBook url ("https://www.cancer.gov/about-nci/budget/fact-book/"), the url pathname is retrieved and getShouldLoadChartWrapper() validates to see if it matches a set of rules. Once pathname matches rule set (/about-nci/budget/fact-book/), then the DOM is checked for a div container (added to the page by Drupal) with an element id which matches a unique id that's already defined within a javascript chart file in the code. If the requested DOM element is found, the chart data is retrieved, chart is initiated with data, and DOM element is populated with chart.

In order to add a new chart, a javascript chart file will have to be added to the codebase in the library folder that contains the following

1. A defined data file name (File Name) - Name of the file which will hold the json data for the chart that will be uploaded into Drupal.
2. Unique chart id (Chart Id) - Unique name that follows naming convention for Chart Id column listed in the table above.
3. Chart init function - Javascript function that initiates the chart.

A working example can be seen here for the Aids History chart.

Once code is in place, Drupal content update needs to be made.

1. Log in to Drupal CMS for the target environment
2. Hover over the Content > Media > Add media, and click on File
3. Click on the "SITE SECTION" link
4. In the "SITE SECTION" block, click on the "Select Site Section" button
5. In the "Search by Path" field, enter "/about-nci/budget/fact-book", and click on "Apply" to list matching paths
6. Select the checkbox next to the "/about-nci/budget/fact-book" path from the results
7. Click on "Select Site Section" button at the bottom of the page
8. In the "Pretty URL" field, enter the "File Name" that was set in the javascript chart file
9. In the "Name" field, enter "factbook-" followed by the file name provided in the previous step
10. In the "Browser Title" field, enter the same value entered in step 9 above "factbook-{file-name}"
11. In the "Save as" field, click on the dropdown, and select "Publish"
12. Click "Save"

1. In Drupal CMS, hover over the Structure > Block layout, and click on Add custom block
2. From the options provided, click on "Raw HTML Block"
3. In the "Block description" field, enter the file name set in the javascript chart file
4. In the "Body" field, enter the chart container block element with and id attribute matching the id defined in the javascript chart file created similar to what's shown below

   <div id="NCI-Chart__{chart-id}" data-chart-revision="{YYYYMMDD_revisionNumber}"></div>

5. Confirm the "Save as" field has "Published" selected from the dropdown
6. Click on the "Save" button

1. In Drupal CMS, hover over the Content > Add content, and click on Article
2. Fill in all the necessary fields for creating the page
3. In the "BODY" section, for the "Content" WYSIWYG editor, click on the icon to Insert Block Content
4. In the "Name" field, enter the block description name (file name), you entered in step 3 for the Add custom block above
5. Click on the "Apply" button
6. Select the checkbox next to the entry
7. Click on the "Select block" button
8. In the resulting modal, select "Full" from the dropdown for the 'Display as' field and click the "Embed" button
9. In the "Save as" field, from the dropdown, select "Published"
10. Click on the "Save" button at the bottom of the page
11. Visit page to see included chart

1. In Drupal CMS, click on the Content menu
2. Select the "Article" option from the "Content type" dropdown field
3. In the "Title" field, enter the page name you wish to add chart, and click on the "Filter" button
4. Click on the "Edit" button in the "OPERATIONS" column for the filtered result
5. In the "BODY" section, for the "Content" WYSIWYG editor, place your cursor anywhere within the content where you want your chart located and click on the icon to Insert Block Content
6. In the "Name" field, enter the block description name (file name), you entered in step 3 for the Add custom block above
7. Click on the "Apply" button
8. Select the checkbox next to the entry
9. Click on the "Select block" button
10. In the resulting modal, select "Full" from the dropdown for the 'Display as' field and click the "Embed" button
11. In the "Save as" field, from the dropdown, select "Published"
12. Click on the "Save" button at the bottom of the page
13. Visit page to see included chart

The Frontend Globals Config holds the chart data configuration for FactBook. It holds information for the base URL (where all related chart data files are located), and data type (which only currently supports json data types).

A snippet of the config for FactBook's setup is shown below

   "chartData": {
    "factBook": {
      "baseUrl": "/about-nci/budget/fact-book",
      "dataType": "json"
    }

To view the Frontend Globals configuration In Drupal CMS menu, hover over the Configuration > System, and click on Frontend Globals Config Editor

In order to update the associated data on the AIDS Funding History page for example. You will need to follow the steps below.

1. Once logged in to Drupal CMS for the target environment, hover over the Content menu, and click on the Media sub-menu
2. Enter associated File Name "aids-funding" from the table above in the "Media name" field and click on the "Filter" button
3. Click on the Edit button in the OPERATIONS field for the aids-funding filtered result
4. For the required File field, click on the Remove button to remove the currently associated chart data file
5. Click on the "Choose File" button and select your desired data file to replace the previously removed one. Note the spinning icon, and allow to complete before proceeding to next step
6. Once step above is complete, click the Save button at the bottom of the page
7. Filter again for "aids-funding" entry just edited, and click on edit again
8. At the bottom of the page for the "Change to" field, select ‘Published, and then click Save

The response from the call for the data file is cached by the browser. In order for the call to return a response for the updated data file, an attribute was placed in the HTML block container for each chart with a value that is appended to the request for the data file to invalidate the cache. This value has to be changed everytime a chart data file has been updated in order to return an updated response.

HTML container block sample:

<div id="NCI-Chart__aids-funding" data-chart-revision="20230314_1"></div>

Data file request sample: https://www.cancer.gov/about-nci/budget/fact-book/aids-funding.json?t=20230314_1

To retrieve updated data for chart on the AIDS Funding History page

1. In Drupal CMS menu, hover over the Structure > Block Layout, and click on Custom block library
2. Enter associated File Name "aids-funding" from the table above into the "Block description" field and click on the "Apply" button to filter
3. For "aids-funding" under the "Operations" column, click on the "Edit" button
4. In the "Body" field, look for the HTML div block that contains the attribute "data-chart-revision", and update its value to match existing format "YYYYMMDD_revision-number" (e.g 20230314_1, 20230314_2, ...), and click on the "Save" button
5. Visit the AIDS Funding History page containing chart data just updated to see your changes