We are releasing ECharts v3.5, where calendar coodinate system is supported and axis pointer is enhanced. Meanwhile ECharts statistic extension v1.0 is published.
Calendar coordiante system is a new type of echarts coordiante system, which can used to locate different charts (For example, scatter, heatmap, graph, pie, or even other coordinate systems like cartesian).
The original axis pointer is enhance significantly, which currently supports text label, a new interaction approach for touch device, and other detailed configurations. Besides, that synchronization between axis pointers of different coordinate systems is supported.
Statistic extension is a JavaScript liberary for statistics and data mining, including two-dimensional regression, multi-dimensional clustering and some commonly used statistical functions in v1.0.
Statistical extension is a statistical and data mining tool for echarts. At present, it mainly includes two-dimensional regression, multi-dimensional clustering and some commonly used statistical functions.
The regression algorithm in the extension not only contains the commonly used linear regression, but also contains exponential regression, logarithmic regression, and polynomial regression.
An example of linear regression:
An example of logarithmic regression:
Adhering to the purpose of visual analysis, our multi-dimensional clustering analysis, can not only statically produce the results of clustering of dataset, but also dynamically view the entire clustering analysis process.
An example of the result of dataset clustering:
An example demonstrating the entire process of clustering:
Unlike built-in charts in echarts, Statistical Extension is a extension of echarts, which is not intergrated by echarts by default, and you need to inclued ecStat.js after echarts.js. You can find the file dist/ecStat.js in the latest released version at here (GitHub).
If you would like to know more, please visit the Statistical Extension GitHub Home
Calendar coordiante system is a new type of echarts coordiante system, which can used to locate different charts (For example, scatter, heatmap, graph, pie, or even other coordinate systems like cartesian).
Using heatmap in calendar:
Using scatter in calendar:
Different types of chart can be place on calendar coordinate system together.
Both place heatmap and graph chart in calendar:
Calendar layout:
Calendar coordinate system can be placed horizontally or vertically. By convention, the heatmap calendar is horizontal. But if we need bigger cell size in other cases, the total width may be too wide. So [calendar.orient]({{ site.url_ec_option_en }}#calendar.orient) can help in this case.
Adapt to container size:
Calendar coordinate system can be configured to adapt to container size, which is useful when page size is not sure. First of all, like other components, those location and size configurations can be specified on canlendar: [left]({{ site.url_ec_option_en }}#calendar.left), [right]({{ site.url_ec_option_en }}#calendar.right), [top]({{ site.url_ec_option_en }}#calendar.top), bottom, [width]({{ site.url_ec_option_en }}#calendar.width), [height]({{ site.url_ec_option_en }}#calendar.height), which make calendar possible to modify its size according to container size. Besides, [cellSize]({{ site.url_ec_option_en }}#calendar.cellSize) can be specified to fix the size of each cell of calendar.
More effects:
Feel free to combination charts and calendar coordinate systems. You may achieve awesome effects.
For example, using API chart.convertToPixel to locate pie charts on calendar.
The term “Axis Pointer” refers the appearing line, shadow block and text label when mouse hovering or clicking on a coordinate system, which helps users to have insight into the data.
The original axis pointer is enhance significantly, which currently supports text label, a new approach of interaction on touch device, and other detailed configurations. Besides, that synchronization between axis pointers of different coordinate systems is supported.
An example, where axis pointers can be displayed in candlestick.
In the example above, [axisPointer.link]({{ site.url_ec_option_en }}#axisPointer.link) is used to synchronize axes from the two different cartesian coordiante system.
Besides, a approach of interaction on touch devices is supported, where axis pointer is alwayed displayed, and a handle button can be dragged to move the axis pointer, which makes the finger not block the view to charts any more.
This is another example:
These examples demonstrating the effect of mutiple axes with axis pointers:
At last, let's see a more complicated example, where [axisPointer.link]({{ site.url_ec_option_en }}#axisPointer.link) is also be used to synchronize axis pointers of different axes.