Alley’s product development team builds smart tools to fix common problems. So we created Simplechart, an open-source project that helps anyone edit and embed interactive charts within any CMS. Simplechart addresses some of the issues we’ve noticed in other charting applications: Data and underlying Javascript libraries no longer rely on external vendors, site owners have more flexibility to create custom default configurations, and there is seamless integration between the chart editor and the CMS.
With Simplechart, an author can quickly create a dynamic chart without needing to engage a developer, designer, or data scientist. The end result is fully responsive, custom, and completely interactive to the end user.
The basics
To use Simplechart, all you need is a dataset in comma-separated value (CSV) form. You can access Simplechart from the CMS admin screen and an iframed application will appear where you can paste or manually enter your data. You can then preview the results in different chart types, such as bar, pie, or linear, and choose the type of chart based on how you want to display your data. Customizable options include responsive breakpoints, data display formatting, and more. Product owners can also apply custom default options to create, for example, a consistent color palette across all charts on a particular site.
Pie Chart
In this example, we’re using a pie chart to show the geographic distribution of Alley team members. As you can see here, most of our team members reside in New York, near our NYC headquarters, but we also have a strong contingents in Vermont and Pennsylvania.
[simplechart id=”1123″]
Bar Chart
After taking an informal survey of 25 Alley team members, we discovered that 3 team members own both dogs and cats, 7 team members own only dogs, 6 team members have cats-only homes, 8 team members have no pets, and 1 team member is a proud lizard parent.
[simplechart id=”1127″]
Line Chart
This line chart example looks at the populations of New England states using census data from 1960-2010.
[simplechart id=”1144″]
You can see Simplechart in action on a few sites already. For example, the Brookings Institution has been using Simplechart since their August launch to showcase data like the breakdown of party parliamentary seats in the 2011 Moroccan election.
Under the hood
Our initial prototyping for Simplechart was written in Angular.js. It was a promising start but became weighed down by the complexity that framework imposes. Ultimately, we chose to rewrite from the ground up in React/Redux. This framework’s “single source of truth” model has been a much better fit with the application, and React makes it possible to use the same component to display the chart while you’re editing it as when it’s embedded in a frontend template.
There is a Simplechart plugin available for WordPress and WordPress.com VIP sites right now, but it is designed to be compatible with any CMS. It is a free and open-source project and welcomes pull requests here.