NC Digital Commons 1 Document Owner: Lois Nilsen Date Created: 2/6/18

Interactive Charts Audience: Site Admins and Site Managers

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 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.

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.

NC Digital Commons 2 Document Owner: Lois Nilsen Date Created: 2/6/18

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.

Below are the steps to create this chart.

1. Create the data. The chart above was created with the following table. The data was

compiled from https://files.nc.gov/ncosbm/demog/totalbyrace_2016.html .

2. Save the Excel file as a CSV.

3. Go to Blocks > Add Block.

4. Select NC Charts Pie.

5. This block uses all of the default settings.

6. For Chart Data, select Import from CSV. Once it’s selected,

don’t forget to select Upload CSV.

7. 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.”

NC Digital Commons 3 Document Owner: Lois Nilsen Date Created: 2/6/18

Three Tries to a Perfect Simple Bar Chart You have many options to choose from when creating a bar or line chart. Each data set will

require different choices. This exercise demonstrates how you can tweak and perfect a chart,

but your data might require different configurations.

Simple Bar Chart, Take One Below are the steps to create this chart. The legend tells which color denotes each date. The

site visitor can also get this information by hovering over each bar:

1. Create the data. The chart above was created with the

following table. The data was compiled from http://accessnc.nccommerce.com/DemographicsReports/

2. Save the Excel file as a CSV.

3. Go to Blocks > Add Block.

4. Select NC Charts Bar.

5. The Label is the name of the chart in Drupal. The Title will

appear on the chart in your website.

6. This chart maintains all the default settings.

7. For Chart Data, select Import from CSV. Once it’s selected,

don’t forget to select Upload CSV.

NC Digital Commons 4 Document Owner: Lois Nilsen Date Created: 2/6/18

Problems with the above chart:

1. It takes hovering or examining the colors closely to find the dates.

2. The color legend is not the best way to show dates, because there are 5 colors for 7

columns.

3. Excel put the dates in an odd format.

4. The first column is blank.

The next chart shows how to improve on this chart.

Simple Bar Chart, Take Two Below is a chart using the same data, but arranged differently.

• Notice that the date now appears under each column. This is much clearer for the site

visitor.

• The legend is hidden because, with the above change, it no longer serves a purpose.

• Dates were formatted in Excel.

• First column is no longer blank. The bar chart seems to prefer data presented in columns

over rows.

• An unintended consequence: the columns are all the same color.

To create this version of the chart:

NC Digital Commons 5 Document Owner: Lois Nilsen Date Created: 2/6/18

1. Create the data. The chart above was created with the following table. Note that this is

the same data as the Take One version of the Simple Bar Chart, but data that was in a

row is now in a column.

2. Save the Excel file as a CSV.

3. Go to Blocks > Add Block.

4. Select NC Charts Bar.

5. The Label is the name of the chart in Drupal. The Title will appear on the chart in your

website.

6. With the dates under each column, the legend (the labelled blocks of color above the

chart) is not needed. Change the Legend Settings to Display > No.

7. The remaining settings are default.

8. For Chart Data, select Import from CSV. Once it’s selected, don’t forget to select Upload

CSV.

Problems with the above chart:

• A single color is fine, but it would be more appealing with several colors.

• Perhaps the Axes Labels can make the chart easier to understand.

The next chart shows how to improve on this chart further.

Simple Bar Chart, Final Version The chart below is modified so the bars are multi-color. For this version, the Warm color

setting was chosen. The dates display underneath each column. A “Population” label was

added to the left Y-axis.

NC Digital Commons 6 Document Owner: Lois Nilsen Date Created: 2/6/18

To create this chart:

1. Create the data. The chart above was created with the following table. Note that this is

the same data as the Take Two version of the Simple Bar Chart.

2. Save the Excel file as a CSV.

3. Go to Blocks > Add Block.

4. Select NC Charts Bar.

5. The Label is the name of the chart in Drupal. The Title will appear on the chart in your

website.

6. Select Color Distribution > Column, to make the columns multi-color.

7. Change the Color Set to Warm.

8. Change the Legend Settings to Display > No. With the dates under each column, the

legend is not needed.

9. Add an Axes Label for the Y axis of Population. The X axis does not need a label

because, with the dates showing, it is self-explanatory.

10. For Chart Data, select Import from CSV. Once it’s selected, don’t forget to select Upload

CSV.

NC Digital Commons 7 Document Owner: Lois Nilsen Date Created: 2/6/18

Creating a Complex Bar Chart You can demonstrate more than one concept in a bar chart. 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.

Table for above chart:

NC Digital Commons 8 Document Owner: Lois Nilsen Date Created: 2/6/18

Table for the above chart:

NC Digital Commons 9 Document Owner: Lois Nilsen Date Created: 2/6/18

NC Digital Commons 10 Document Owner: Lois Nilsen Date Created: 2/6/18

Creating a Line Chart Below are the steps to create this chart:

1. Create the data. The chart above was created with the following table. The data was

compiled from http://accessnc.nccommerce.com/DemographicsReports/

2. Save the Excel file as a CSV.

3. Go to Blocks > Add Block.

4. Select NC Charts Line.

5. The Label is the Drupal name of the chart. The Title appears on the chart in your site.

6. This chart maintains all the default settings until you get to Axes Labels.

• X-Axis: Age Range, Y-Axis: Population

7. For Chart Data, select Import from CSV. Once it’s selected, don’t forget to select Upload

CSV.

NC Digital Commons 11 Document Owner: Lois Nilsen Date Created: 2/6/18

Troubleshooting

Q: The chart starts at zero. The data would tell a better story (provide more contrast) if it

did not.

A: When the data start at zero, it can look like the first chart below. The second is more

dramatic and better illustrates your story.

Check whether there are blank rows

or columns in the table. (This might

happen if the original spreadsheet

once had data that was deleted.)

To rid your table of these blank rows,

go to “Change number of

rows/columns.” After you pick the

correct number, don’t forget to

“Rebuild table.”

NC Digital Commons 12 Document Owner: Lois Nilsen Date Created: 2/6/18

Q: My pie chart has a hole in it.

A: The “doughnut” pie chart is an option. Your pie chart could look like this:

The default configuration is no hole. If you have a doughnut chart and would prefer it to look

more like a pie. First ensure Doughnut is set to No. If Doughnut is set to No and the chart still

has a hole in it, check whether there are blank rows or columns in the table. (This might

happen if the original spreadsheet once had data that was deleted.)

To rid your table of these blank rows, go to “Change number of rows/columns.” After you pick

the correct number, don’t forget to “Rebuild table.”

Q: My pie chart is concentric circles instead of pieces of a pie.

A: If your pie chart looks like this, place your data in a single column, rather than in rows.

NC Digital Commons 13 Document Owner: Lois Nilsen Date Created: 2/6/18