Panel Chart
Chart GUI for the panel extension.
Something looks broken? We accept bounties to fix them faster.
^ | 98 Downloads |
---|---|
v1.1.0 | 210 Downloads |
v1.0.1 | 92 Downloads |

Features
These chart types are available for use.
chart/bar
chart/bubble
chart/doughnut
chart/line
chart/pie
chart/polar-area
chart/radar
chart/scatter
Usage
[
'type' => 'chart',
'state' => [
'type' => 'line',
'data' => [ … ],
'options' => [ … ]
],
'stack' => 10
]
State data is for the configuration data that you will find in the documentation page of Chart.js
You don’t need to declare the chart type back in the state
data when using specific chart type names. Several helper properties are available to make it easier for you to declare the data in the state
property:
grid
→ Determine the scale grid factor.legend
→ Determine the legend visibility and position.lot
→ Determine the chart data-set values.max
→ Determine the maximum scale in the chart.min
→ Determine the minimum scale in the chart.set
→ Determine the data-set labels (in the line chart, this will becomes the column names).step
→ Determine the scale step size.title
→ Determine the chart title.
[
'set' => ['Data 1', 'Data 2', 'Data 3'],
'legend' => ['side' => 'right'],
'title' => 'Bar Chart',
'type' => 'chart/bar',
'min' => 0,
'max' => 50,
'lot' => [
0 => [
'title' => 'Subject 1',
'values' => [16, 4, 7], // Values for “Data 1”, “Data 2”, and “Data 3”
'color' => '#ff0000'
],
1 => [
'title' => 'Subject 2',
'values' => [3, 1, 18],
'color' => '#00ff00'
],
2 => [
'title' => 'Subject 3',
'values' => [6, 11, 8],
'color' => '#0000ff'
]
],
'stack' => 10
]
An example page that displays the available charts is available at the following link.