ACharts is a free chart library written in JavaScript intended for embedded use in websites. It is fully interactive allowing the user to view specific sections of the data by hovering over or clicking the graph.
ACharts currently supports 3 chart types, Line, Column and Pi. ACharts.js and ACharts.css need to be imported into your code to use ACharts.
A line chart object can be created using the following code. It takes one parameter, the container element.
| 1 | var container = document.getElementById("lineChart"); |
| 2 | var lineChart = new LineChart(container); |
The chart can then be drawn in the container element. The draw method takes 2 paramets, an array which contains the chart table and an options object.
| 1 | var table = [["Date: ", "Price: ", "Volume: "], ["Jun 14", 200000, 5], ["Jun 15", 450000, 7], ["Jun 16", 100000, 4], ["Jun 17", 15000, 2], ["Jun 18", 5000, 6]]; |
| 2 | var options = {title: "ACharts", curved: true, color: "#0eb1d2", alpha: 0.5, cursor: "crosshair", infoPointer: true}; |
| 3 | lineChart.draw(table, options); |
There are many options which can be set before drawing the graph. These are;
| Name | Description | Default Value |
| title | Sets the title of the chart, displayed in the top right. | null |
| yAxisWidth | Sets the width of the y-axis. | Digits in last y-axis element * 10 |
| xAxisHeight | Sets the height of the x-axis. | 25 |
| color | Sets the color of the line, under line and pointer of the chart. | #000000 |
| curved | Sets the chart line to be curved if true. | false |
| alpha | Sets how sharp the gradient of the curve is. Only for curved charts. | 0.5 |
| cursor | Sets the mouse cursor to be displayed when pointing over the chart. | default |
| infoPointer | Shows an indicator at the intersect point of the chart if true. | false |
A column chart object can be created using the following code. It takes one parameter, the container element.
| 1 | var container = document.getElementById("columnChart"); |
| 2 | var columnChart = new ColumnChart(container); |
The chart can then be drawn in the container element. The draw method takes 2 paramets, an array which contains the chart table and an options object.
| 1 | var table = [["Date: ", "Price: ", "Volume: "], ["Jun 14", 200000, 5], ["Jun 15", 450000, 7], ["Jun 16", 100000, 4], ["Jun 17", 15000, 2], ["Jun 18", 5000, 6]]; |
| 2 | var options = {title: "ACharts", colors: ["#D62839", "#F18F01", "#04E762", "#0EB1D2", "#C589E8"], cursor: "pointer", infoPointer: true}; |
| 3 | columnChart.draw(table, options); |
There are many options which can be set before drawing the graph. These are;
| Name | Description | Default Value |
| title | Sets the title of the chart, displayed in the top right. | null |
| yAxisWidth | Sets the width of the y-axis. | Digits in last y-axis element * 10 |
| xAxisHeight | Sets the height of the x-axis. | 25 |
| colors | An array of colors each used for a diffrent column on the chart. | [#000000, ...] |
| cursor | Sets the mouse cursor to be displayed when pointing over the chart. | default |
| infoPointer | Shows an indicator at the intersect point of the chart if true. | false |
| rotateX | Rotates the x-axis. | false |
| maxXLength | Trims x-axis tags if too long | null |
| showXAxis | Hides the x-axis | true |
A pi chart object can be created using the following code. It takes one parameter, the container element.
| 1 | var container = document.getElementById("piChart"); |
| 2 | var piChart = new PIChart(container); |
The chart can then be drawn in the container element. The draw method takes 2 paramets, an array which contains the chart table and an options object.
| 1 | var table = [["Date: ", "Price: ", "Volume: "], ["Jun 14", 200000, 5], ["Jun 15", 450000, 7], ["Jun 16", 100000, 4], ["Jun 17", 15000, 2], ["Jun 18", 5000, 6]]; |
| 2 | var options = {title: "ACharts", colors: ["#D62839", "#F18F01", "#04E762", "#0EB1D2", "#C589E8"], cursor: "pointer", infoPointer: true, showXAxis: true}; |
| 3 | piChart.draw(table, options); |
There are many options which can be set before drawing the graph. These are;
| Name | Description | Default Value |
| title | Sets the title of the chart, displayed in the top right. | null |
| colors | An array of colors each used for a diffrent column on the chart. | [#000000, ...] |
| cursor | Sets the mouse cursor to be displayed when pointing over the chart. | default |
| infoPointer | Shows an indicator at the intersect point of the chart if true. | false |
| showXAxis | Hides the x-axis | true |
