Package Spotlight: wagtailcharts
This package brings together Chart.js and Wagtail
Data geeks will love the package we're spotlighting this month. For most people, reams of raw data are not that appealing to look at. Turning data into charts makes it much easier for people to see data trends. Arnar Tumi Þorsteinsson created wagtailcharts so that people could use the Chart.js library to add beautiful charts to their content.
Tumi took a bit of time before heading out on holiday to answer a few questions about how and why he created the package.
1. Tell us a bit about yourself as a developer. What's your background and when did you start contributing to open source?
I have been programming since around the turn of the millennium. During my studies to become an electrical engineer, I co-founded Guitarparty.com as a way to create songbooks. This sparked my interest in programming, which eventually became my full-time job. I started as a Chief Technical Officer for a small startup, and then in 2013, I co-founded Overcast, an Icelandic company that stands at the intersection of product development and web-based solutions for larger corporations. I now lead much of our contract work and try to balance the time between work and family. I live in Reykjavík with my wife and our two boys.
We first heard of Wagtail when it was in version 0.4, and we were searching for a good CMS running on Django since that was our preferred stack. This was before the time of StreamField, but it still became clear almost right away that this was the CMS that we had been looking for. Since then, Wagtail has only become a more powerful and more essential part of our daily work, where we have built sites for airlines, pension funds, news agencies, car rentals, and other great clients. We have built everything from small one-pagers to multilingual sites that are scaled between multiple regions around the world. And one thing all those sites have in common: The admins all love working with Wagtail!
I hadn’t contributed much to open source until we discovered Wagtail. The fantastic team and community make you want to give back! I started helping answer questions on the support channel when I had time. We hosted a sprint in our office in Iceland a few years back and hope to do so again soon. We have also gone to some of the other sprints around Europe to meet people and try to contribute as much as we can.
2. Where did the idea for your package come from? What problems do you want to help people solve with it?
A part of our contract work includes creating online annual reports for companies. Since these reports are usually an excellent representation of the company's metrics, they tend to include a lot of charts. One customer even had over 30 charts on one page alone!
In the beginning, we relied on text fields with chart.js settings and CharFields filled with comma-separated values to populate the data for the front end, which was both very fragile and took up a lot of space in the Wagtail admin. One chart with a few series could take up about two screen fills of real estate! Multiply that by 30, and you have some serious scrolling to do. This was frustrating. So when Wagtail introduced Telepath, we saw an opportunity to try to create a custom admin block that would take up much less space and could also be used to build different types of charts.
By using the Jspreadsheet library for a compact data editor in a spreadsheet format and collapsible settings panels, we were able to shrink the space it took in the admin while adding a great deal more functionality than we had in the old version. Since this was working quite nicely, we thought that there must be more people struggling with this, and we decided to open-source it.
3. There are different solutions out there for visualizing data. Why did you decide to focus on Chart.js?
There are many great chart libraries available. We had used Chart.js before. Since it’s one of the most popular open-source charting libraries and had all the types of charts we needed, we decided it was the perfect match for this package. You can control almost every aspect of each chart, so adding functionality that suits your purpose becomes relatively easy. That being said, since most of these libraries use similar data structures, one could quite easily use the Wagtail admin part of this package and modify the frontend data to fit any chart library.
4. Who do you think would find your package useful? Why should people give it a try?
If you find yourself in need of a basic chart of any type, this package can provide you with a simple drop-in solution. If you need something more complex, you can use this package as a first step. It's pretty basic but does the job and is easily extendable with new chart types, new options, different data sources, etc.
5. What are some features of your package that you want to encourage people to try?
I always like to show our customers how you can play with different chart types for the same dataset, switching between lines and bars and area charts. Now that we have the live preview in Wagtail, this makes showing them the chart types even better. Try adding your custom color palette to override the default colors, and you have basic charts ready to go in the theme of your website!
6. What are the next steps for your package? Are there ways other people can help you improve it?
At the moment, we are adding charts and options to this package as we need them, but we would love to get more people involved if they see potential in this. One comment we got when we were showcasing this was about connecting charts to external data sources, or for visualizing results from panda frames. So if anyone is interested in working on adding features like that, we would love to hear from you.
Have a package or another community contribution you would like to be spotlighted in this series? Reach out to Meagen Voss through the Slack community or email.
