For reviews of other types of chart makers, check the following articles:
- Review of Chart Editors in 6 Free Infographic Makers
Their online chart maker looks like a IDE (Integrated Development Environment), or like a document editor. The left toolbar from ChartBlocks allows you to slide tabs for data management, chart configuration and export. Top-right buttons allows you to share your chart or download it in an image format.
You don’t know where some configuration options are? No problem: click on the related area on the chart, and the correct sidebar tab will open. The chart configuration options – which are messed up and so badly structured in many similar chart makers – look actually well organized here, with many specific controls like slide-bars, color pickers and up/down buttons. You have Undo/Redo commands, you may choose from several templates, you can zoom in or out your D3 SVG-based interactive and animated charts.
The overall impression is good, of a well-balanced and properly structured chart editor. I can easily see how such a graph maker can help you become more productive and build a nice-looking animated chart in no time.
In Visual.is, you design and look at “visualization”. They use Highcharts internally, to render live animated and interactive charts, and their data is stored in AWS.
This is another free graph maker looking like a more advanced IDE or document editor, with a small unusual twist: you switch between three main views, or steps, with the Editor, Data and Design top menu commands. The Editor shows up a left sidebar, where you may select not just the chart types, but other objects as well: widgets, text, images etc. The Data command replaces your chart with the data grid, and let you import or edit chart’s data. Finally, switch to the Design mode, with a right sidebar for chart configuration options. Not too many controls here, beside the theme and color choices.
A good impression overall, even if the choice to show three different views may surprise users accustomed with more standard environments. The Design tab could certainly add and use more choices. What we have is not enough. Not sure if all choices in Editor’s left sidebar make a lot of sense in the context. It’s good we may choose and change the chart type, but should image and text elements be placed on the same level?
I totally love the way Livegap organized the main three areas required for a proper chart editor: (a) the HTML5 canvas-based chart on top, in the main area; (b) the chart configuration accordion sidebar on the right, (c) and the data grid below. The space is used in an optimal manner, everything is responsive and all panes may be manually resized, or toggled on and off.
Livegap is made by the Omar Sedki, from Alexandria/Egypt, using the ChartNew open-source project for HTML5 canvas-based charts. Some commands, like the selection of a chart type, open large popups with lists of thumbnails. Inside every chart configuration zone you may find other expandable areas. This may look too much, but I understand the lack of space and the need to eventually made such design decisions.
Promoting some other product inside the chart area may not be the best choice for a chart visualization, but hey, they are free. And they don’t even require you to register. Unless you want to save them, in which case you move your mouse over the Save icon and you discover other hidden commands for the chart publishing and sharing this time. Again, maybe not the best choice to hide this way some commands, but this avoid clutter nonetheless.
The most well-balanced and responsive environment so far for me. I loved the way you may easily adapt this editor to different screen sizes. I also enjoyed the fact you may start creating and editing charts right away, without passing first through the annoying steps of registration. I would however show all hidden save-related commands, and avoid advertising for something else in the chart area.
Your Datamatic data file must be loaded from your Google Drive, which for me is already a restriction. In edit mode, you are presented with three areas: Data, the chart itself, and Properties. You may hide the first and last sidebars, but main problem is the environment is not responsive and you have to have a large wide screen. No matter what you do, your large data grid or the chart itself get partially hidden on normal screens.
An interesting experience when you start selecting from so many great-looking templates. Not great because they force you to save the chart data into your Google Drive (some people are reluctant to give access to an online application to such a private store). The three design areas should be responsive and they are not: not a great experience on smaller screens. Many configuration options. And another plus for their charting library, with great looking charts.
This rather obscure but popular German chart maker is organized as a wizard, with three different areas. In Datawrapper, you Upload Data, or select a sample data set. Then you move to the next step. Or you click directly on Check & Describe. You’re still in data mode here – no chart yet – but this data is now presented in a data grid, and you may do some tweaks before rendering it.
The third step is dedicate to the chart type selection and chart’s visual configuration. You may switch between different tabs on the left, such as Refine, Annotate and Design, to do so. The choices may be sometimes surprising and a bit confusing. You click now Publish, or on the Publish & Embed top button, to finally see the chart as it’s displayed. This is however a small chart, that you may later embed in your publication. They seem to use Piwik internally as a chart library, which is a powerful analytics product.
This editor is rather for small charts, that publishers may later embed in their blog articles. You may walk through different screens either the wizard-style, moving from one step to another, or selecting directly another tab or screen from a top button. This may be both good and bad: good because you may opt between the two different approaches, bad because you may get confused why there are similar buttons in each screen. Not sure we need indeed two different screens for data: the traditional approach is to rather use one single screen for both loading and configuring data.
In Hohli, you start with filling data on a grid. Then open up a popup with the actual chart builder and editor, rendering this data on Google Charts. The Generate button will publish the chart and return you the link and code for embedding.
The graph editor is very simple and trivial. You basically pick up a chart type, then style the chart with some basic configuration options. First Start tab is nothing more than some simple recommendation of a few popular charts, and looks redundant.
You get a limited selection of bar, line and area charts. The chart configuration is limited to the few options from the top main menu. And there are many combos from which you can play with their sample data.
A simple experiment using C3.js internally.Worth mentioning just to show up how a very simple chart maker can be built.
Vizzlo is a Leipzig company using SGV-based charts with watermarks, in the free version. The Data and Appearance tabs, on the right sidebar, are self-explanatory. The Annotations tab is more unusual, and you just wonder why this wasn’t part of the appearance as well.
Let’s start with the Data tab: no grid, just individual records, with large complex controls for each cell. This doesn’t seem to be for large data volumes. Who enters data like this, one by one for each record? That’s a laborious process!
There are Undo/Redo commands, which is great. Not too many chart configuration options however. And a huge element of surprise, when you click on the TT top-right icon, and you discover a whole new zone with other styles covering the whole sidebar. Save As and Delete commands are also hidden here.
Not a great data entry option, with no data grid, or at least one large text area for a comma-separated list. The hidden pane described lately has a clear usability problem. For the rest, I’d better organize all configuration data and find another more contextual place for the annotations. I understand also that, as a free product, you have to put some restrictions and promote your paid version. Compared to other similar editors however, it looks to me a bit aggressive the option to remove the watermark popping up everywhere. The choice of using a chart covering image watermark is also a bit too agressive. Most vendors today opt for a more discrete trademark hyperlink instead.
9. JS Charts
This free chart generator displays a very different way to handle data. JS Charts looks like yet another small app from someone’s portfolio, or home project. But it’s another interesting case of not-so-good design choices and usability headaches.
You enter data through a popup window, but there is no grid. Each row has up/down arrows, and a Delete button. The Option area has a long list of rows, with configuration options, with internal source code names. And each row has the same up/down arrows, a Delete and an Edit button, to edit each option in a popup. Another area, for colors, presents the same anomalies and excessive clutter.
With all due respect to the developer, this is the way you may NOT design ANY online tool, forget about the complexity of a chart editor. The single more acceptable part of the page is the chart itself, which has also its own limits. It is a HTML5 canvas-based chart, with no animation or interactivity.
Vida.io uses D3 SVG-based charts, with great animation and interactivity. They keep a tab-based right sidebar for both data and configuration, using modern styles and a nice theme. But most configuration options look like their are made just for the technical user.
The Data tab has also different view, and the data grid is not the default view. Move now to the Properties: they are all read-only. And you switch to edit mode in a very unusual way, you show internal property names, …why this?
This looks to me more like an experiment, or a homework project assigned to a student. There are huge usability issues. If this is indeed a product for software developers, who goes through such a complicated user interface to build and configure a chart?