Publishing interactive charts using ECharts and Datamatic
“Hello World! I am ECharts”
In November 2014, Chinese Baidu released a new generation of their charting library to the world. It’s called ECharts (Enterprise Charts) and it looks like it’s going to be a big player in data visualization.
If you ever thought that D3.js is a bit steep to start with, ECharts declarative way of defining charts might be a better option for you.
Datamatic EChart edition
Datamatic is a visualization generator where you can create and publish interactive D3.js based charts. Datamatic ECharts is a special edition built on top of ECharts, rather than D3.js. It has a number of integrated samples out of the box:
How to create a simple chart
- Go to echarts.datamatic.io and sign in using your Google account. Note that you can experiment without signing in, however, you won’t be able to save or publish your chart as Datamatic uses Google API which requires users to be signed in.
- Choose a sample and click OK (I am going to pick a simple Doughnut chart for this demo).
- Customise your data in the data editor:
- Choose a theme. ECharts have 9 already predefined themes, you can easily change them in the Properties panel:
- You can also change chart properties such as custom background, title, legend, tooltip etc.
- For more advanced users, there is a Code view with full power of the ECharts API, have a look on the API & Doc page to learn what’s available.
Note that the Code view overrides settings from the Properties panel. For instance, title: {text: “title”} in the Code view overrides title-text in the Properties panel:
How to publish your chart
- Simply click on the Publish button and share the generated link. Datamatic uses Google Shortener API which gives you basic page view analytics. Published charts are stored on your Google Drive (in a hosted folder). Any published chart can be forked and published as another URL.
- You can also publish your chart as embedded HTML code, just copy and paste code from the Embed tab into your page:
More ECharts examples?
You can paste any EChart example inside the code view. However, you’ll need to connect data using .getData() method. This method returns either an array of strings (when either “name” or “value” parameter is provided) or an array of name/value objects:
Multiple series of data
ECharts are very powerful when visualizing multiple series of data. Datamatic’s tree editor handles series of data as tree nodes so you’ll need to use editor’s navigation bar to edit individual series:
You can also use CTRL+LEFT/RIGHT to quickly navigate inside or outside tree nodes.
Using interactive timelines
ECharts support timelines out of the box, here is an example of a gauge chart with a timeline:
There are few already integrated samples with timelines. However, you can turn most of the samples into timeline driven charts, here is an example:
All you need to do is to provide timeline configuration and an array of options for each step in the timeline.
