Interactive Charts Block

Summary

Interactive charts are a block type that can help you tell a story with small sets of data. The charts are best when there are at most 6 rows and 1 column of data for Pie Charts, and at most 6 columns with 1 to 6 rows of data for Line Charts and Bar Charts. These charts are not suitable for comparing data across all 100 counties. A data table is more appropriate for that. Charts are best in their own band on a landing page, or at most two to a band. We do not recommend placing them in bands of 3 or 4.

Audience

Site Managers and Site Admins. Publishers have the ability to edit existing cards.

Table hints

Interactive charts are created with CSV files (Excel files saved as CSV), or the data can be manually input on the chart form in Drupal. Some tips on the data:

• Always have a header row and a header column.
• All the rest of the columns must be numbers. Decimals are fine. You can’t use $20M, or 10%. Don’t add commas to long numbers. Instead, convey dollars or percent in the Axes Labels.
• When saving the data in Excel, be sure to save simply as CSV, and not CSV UTF-8, or not any other kind of CSV.

Create Pie Chart

A pie chart is best used when the data are pieces of a whole. This could be percentages that add up to 100 percent or the numbers behind those percentages. We do not recommend using the Double Pie Chart. This option is difficult to interpret. Create data and save as CSV. An example below was compiled from https://files.nc.gov/ncosbm/demog/totalbyrace_2016.html .

1. Select Blocks > Add Block > NC Pie Chart
2. This block uses all of the default settings.
3. For Chart Data, select Import from CSV. Once it’s selected, don’t forget to select Upload CSV.
4. Use Change Number of Rows/Columns so there are no blank rows or columns. After you pick the correct number, don’t forget to Rebuild table.

Create a simple Bar Chart

The chart below was created with the table below. The data was compiled from http://accessnc.nccommerce.com/DemographicsReports/

1. Create the data and save the Excel file as a CSV.
2. Select Blocks > Add Block > NC Charts Bar.
3. The Label is the name of the chart in Drupal. The Title will appear on the chart in your website.
4. This chart maintains all the default settings.
5. For Chart Data, select Import from CSV. Once it’s selected, don’t forget to select Upload CSV.

Create a complex Bar Chart 

You can demonstrate more than one concept in a bar chart. The process is the same as the simple bar chart,  but the setup of your spreadsheet is key for how it will display. The two charts below were created with similar (fictitious) data. In the first one, the column headings (across the top of the spreadsheet) are Date and the row headings (on the left side) are Population. In the second they are reversed. The first one is made with the Warm color set, the second with the Cool color set.

Create a Line Chart

1. Create the data and save as a CSV. The chart above was created with the following table. The data was compiled from http://accessnc.nccommerce.com/DemographicsReports/
2. Select Blocks > Add Block > NC Charts Line.
3. The Label is the Drupal name of the chart. The Title appears on the chart on your site.
4. This chart maintains all the default settings until you get to Axes Labels.
   • X-Axis: Age Range,
   • Y-Axis: Population
5. For Chart Data, select Import from CSV. Once it’s selected, don’t forget to select Upload CSV.