1.6.6. SerialChart

The SerialChart component allows you to create line, area, column, bar, step line, smoothed line, candlestick and OHLC charts. The charts support multiple axes with simple or logarithmic scales, the data points can be displayed at equal/irregular intervals or on timeline basis.

LIVE DEMO
line chart
Figure 7. SerialChart as Line Chart
LIVE DEMO
column chart
Figure 8. SerialChart as Column Chart

XML name of the component: chart:serialChart.

Data binding:

You can assign a datasource of a CollectionDatasource type to the chart and then define the categoryField attribute for the serialChart element and valueField attribute for the nested graph element:

<chart:serialChart categoryField="date"
                   datasource="dateValueDs">
    <chart:graphs>
        <chart:graph valueField="value"
                     balloonText="[[value]]">
        </chart:graph>
    </chart:graphs>
    <chart:categoryAxis dashLength="1"
                        minorGridEnabled="true"/>
</chart:serialChart>
SerialChart event listeners

  • AxisZoomListener - chart axis scaling.

  • CategoryItemClickListener - click on a category in the category axis.

  • ChartClickListener - click on the canvas.

  • ChartRightClickListener - right click on the canvas.

  • CursorPeriodSelectListener - selection of the display period with a cursor.

  • CursorZoomListener - scaling of the chart area with a cursor.

  • GraphClickListener - click on a graph.

  • GraphItemClickListener - click on a graph item.

  • GraphItemRightClickListener - right click on a graph item.

  • ZoomListener - scaling of the canvas.

For more details, see AmCharts documentation.