Chartbuilder2

Chartbuilder2 is a customized version of a charting tool hosted at https://github.com/Quartz/Chartbuilder. Changes include color palettes and fonts consistent with Minnesota Public Radio online style conventions. It also incorporates a design built on Zurb's Foundation framework. The design changes are cosmetic, with an eye toward providing a better experience especially for the first-time user. Quartz developers still deserve all the credit for the inner workings of the tool. The working version of MPR News Chartbuilder is here.

What Chartbuilder is not

A replacement for Excel
A replacement for Google Spreadsheet
A data analysis tool
A data transformation tool

What Chartbuilder is

Chartbuilder is the final step in charting. Paste data into it and export a png chart in a style that has been predefined.

Who is using Chartbuilder

Other than Quartz, customized Chartbuilder created charts have been seen in many publications:

How to use Chartbuilder

####Charting time Series Data

Find some time series data (may I suggest this)
Make sure the first column is your dates, and the heading on the first column is "date"
Copy and paste into chart builder

####Charting ordinal series data

Find some ordinal series data (may I suggest this)
Make sure the first column are your categories, and the heading on the first column isn't "date"
Copy and paste into chartbuilder

####Finishing up steps 2-4 are optional

Pick your series types
Set a title
Set your units using the axis prefix and suffix field
Adjust your max and min (if you so choose)
Add a credit line and/or a source line
Click create chart
Download png file

FAQ/Troubleshooting

#####Why does the chart in the preview pane exceed the pane's boundaries? You are probably using Firefox or another browser that currently doesn't play nicely with Chartbuilder. Though Firefox will output a usable image, you can't see what you're building. Use Chrome.

#####When I paste my data it shows up in the Input box in a single line with no spaces. A symptom of Internet Explorer. Charts still seem to render properly, but it's practically impossible to edit the data, so the Chrome browser is preferred.

#####Why do I get a "Warning: Data is Invalid" error when I paste my table? Chartbuilder requires clean data to work properly.

Do not include '%' or '$' symbols in your tables
If the data looks clean, it may still contain hidden characters (ex.: a non-breaking space - ).
Sometimes a second set of data pasted over your first will create a single line of information rather than a table. Reset the page and start over.

#####My chart looks fine in the preview pane, but the exported image is missing details like the title, legend, source credit, etc. Hidden characters (ex.: a non-breaking space - ) can prevent Chartbuilder from merging the layers that make up your chart on export.

#####Chartbuilder's cramming all the years on the bottom axis so they're unreadable. Make sure the label on the column with your years is 'Date', not 'Year' or anything else. Chartbuilder will recognize this as a date and space out the years listed on the axis. The latest build has options for overriding the autospacing.

#####The bottom axis shows a series of 'Jan. 1' instead of the years. The date format can be changed via the dropdown box in 'Bottom Axis Options'.

#####I made a change that pushed the title, legend or other info off the chart. What can I do to fix it? This hasn't been happening as often after some code improvements. But if it does, you may be able to backtrack through your changes to get the preview back to something usable. Sometimes it's easier to refresh the page and start from scratch.

#####I made changes to my chart that didn't show up in the downloaded image. That can happen if you make a change after clicking the "Save chart" button but before clicking the "Download Image of Chart" link. You need to click the "Save chart" button again to save your changes. (You may have to do it twice to make the "Download..." button appear again.)