Chart making — this most common but varied demand is often troublesome because of the occlusion of the tool’s field. Although designers can draw any form of chart, they are often tired of endless modifying for changes of data; although analysts can skillfully make charts using office software, they may be frustrated because static images cannot interact; although programmers can code highly interactive charts, it takes their a long time to learn how to use the code libraries. What makes you feel frustrated when making a simple chart is usually a shallow threshold. This threshold may be “how the legend is misaligned”, or “how the data is converted”, or “what chart should I use to analyze this senario”… Which one is bothering you?
For these demand, AntV, the data visualization team of Ant Financial, has published an online chart making tool called ChartCube.
Try it: chartcube.alipay.com
ChartCube: One-Stop Chart Maker
ChartCube is an online tool for quick charting that anyone can use with a modern web browser.
No matter who you are, you can use it. You can totally do not know how to handle the data, you can be a newbie in chart library, you do not need to write a single line of code. With the most intuitive interaction, you can create the charts you need.
No matter what you want to do with your chart, you can use it. Maybe you want to make an illustration of your operational article, maybe you need a data that meets the format requirements, and even you need a code that can be embedded directly into the webpage… ChartCube can support.
Features
- Unambiguous Taxonomy — Choose the most suitable chart type according to analysis purposes and style requirements.
- Powerful Configuration— We offer the most friendly implementation for both quick configuratin and in-depth setting.
- Comprehensive Exports — Various types of exports: images, data, and configuration files. Even, copy the code with just a click.
The process of making a chart with ChartCube is very simple. Usually you need three steps: select the chart, configure the chart, and export the chart.
Step 1: Choose Chart Type
The purpose of visualization is to gain insights from the data and to support decision making. Incorrect chart selection is likely to cause losses. ChartCube provides a variety of filtering methods to help you quickly find the type of chart that best suits your analysis requirement.
Step 2: Configure Chart
Set your chart with “chart”, “data” and “configuration” panels, which are connected by each other. No matter how you what to modify your chart, you can quickly find the way to do it. Hate to get lost in the data cells? Try drag the graphic elements on the chart panel.
For example, you need to modify the height of a column. Engineers may think from the data, open the data panel, find the corresponding cell, and change the value. Designers may start from the graphics, select a column in the chart panel, and drag the height of the column directly through the anchor point that appears at this time.
You can change data and configuration items by interacting directly with the graphics. This is “Shape2Data”, the unique ability of ChartCube to change data through shape. It has greatly improved the possibilities of prototyping, design drafting, and infographic production.
Step 3: Export Images, Data, Code…
Images, data, code, configurations…Well, you may want them all. ChartCube provides a variety of export results, no matter what you are going to do with the chart, just take them away!
Exported Code in G2Plot
AntV G2Plot is a general-purpose JavaScript chart library that works out of the box, easy to configure, and has a good visual and interactive experience. It works with simple JSON configuration just like a lot poplular JavaScript chart libraries. However, it is based on AntV G2 which implements the theory of Grammar of Graphics so that the graphics could be more flexible and extendable.
There are three things that G2Plot wants to do:
- It is easy for users to create elegant and beautiful charts without being a visualization expert.
- Ensure that the chart can withstand the test of the business, and still easy to use in the real scene.
- Explore more possibilities for statistical charts to make them more fun and cool.
Here is a very clean code example for a styled stacked column chart in G2Plot:
import { StackColumn } from "@antv/g2plot";const data = [
{ year: "2006", type: "redDeliciou", value: 10 },
{ year: "2006", type: "mcintosh", value: 15 },
{ year: "2006", type: "oranges", value: 9 },
{ year: "2006", type: "pears", value: 6 },
{ year: "2007", type: "redDeliciou", value: 12 },
{ year: "2007", type: "mcintosh", value: 18 },
{ year: "2007", type: "oranges", value: 9 },
{ year: "2007", type: "pears", value: 4 },
{ year: "2008", type: "redDeliciou", value: 5 },
{ year: "2008", type: "mcintosh", value: 20 },
{ year: "2008", type: "oranges", value: 8 },
{ year: "2008", type: "pears", value: 2 },
{ year: "2009", type: "redDeliciou", value: 1 },
{ year: "2009", type: "mcintosh", value: 15 },
{ year: "2009", type: "oranges", value: 5 },
{ year: "2009", type: "pears", value: 4 },
{ year: "2010", type: "redDeliciou", value: 2 },
{ year: "2010", type: "mcintosh", value: 10 },
{ year: "2010", type: "oranges", value: 4 },
{ year: "2010", type: "pears", value: 2 },
{ year: "2011", type: "redDeliciou", value: 3 },
{ year: "2011", type: "mcintosh", value: 12 },
{ year: "2011", type: "oranges", value: 6 },
{ year: "2011", type: "pears", value: 3 },
{ year: "2012", type: "redDeliciou", value: 4 },
{ year: "2012", type: "mcintosh", value: 15 },
{ year: "2012", type: "oranges", value: 8 },
{ year: "2012", type: "pears", value: 1 },
{ year: "2013", type: "redDeliciou", value: 6 },
{ year: "2013", type: "mcintosh", value: 11 },
{ year: "2013", type: "oranges", value: 9 },
{ year: "2013", type: "pears", value: 4 },
{ year: "2014", type: "redDeliciou", value: 10 },
{ year: "2014", type: "mcintosh", value: 13 },
{ year: "2014", type: "oranges", value: 9 },
{ year: "2014", type: "pears", value: 5 }
];const columnPlot = new StackColumn(document.getElementById("container"), {
forceFit: true,
title: {
visible: true,
text: "stacked column"
},
width: 600,
height: 400,
padding: "auto",
data,
xField: "year",
yField: "value",
yAxis: {
min: 0
},
label: {
visible: false
},
stackField: "type",
connectedArea: {
visible: true,
triggerOn: false
}
});columnPlot.render();
You can see the structure of code is quite neatly divided into three parts: data, configs and a render.
To learn more about G2Plot, just check its offical website and doc.
and So More Things…
If you never heard about AntV, you would be surprised when finding so many useful products on AntV offical website:
- G2 — based on grammar of graphics, a set of data-driven, highly interactive data visualization solutions.
- G — a canvas library which providing 2d draw for G2 & G6.
- L7 — large-scale WebGL-powered Geospatial Data Visualization
- F2 — an elegant, interactive and flexible charting library for mobile.
- G6 — a simple, easy-to-use, comprehensive graph visualization engine.
- Graphin — a react toolkit for graph analysis based on G6.
