Charts - Static working examples
Line chart
This example demonstrates the use of the following configuration options: data-chart-options, data-chart-set-options, data-chart-set-ignore and data-chart-value.
| Years | Amounts contributed or transferred | Investment income | Total account holdings |
|---|---|---|---|
| 1 | $4,000 | $240 | $4,240 |
| 2 | $8,000 | $734 | $8,734 |
| 3 | $12,000 | $1,498 | $13,498 |
| 4 | $16,000 | $2,548 | $18,548 |
| 5 | $20,000 | $3,901 | $23,901 |
Bar chart
This example demonstrates the use of the following configuration options: data-chart-options, data-chart-set-options, data-chart-set-ignore and data-chart-value.
| Years | Amounts contributed or transferred | Investment income | Total account holdings |
|---|---|---|---|
| 1 | $4,000 | $240 | $4,240 |
| 2 | $8,000 | $734 | $8,734 |
| 3 | $12,000 | $1,498 | $13,498 |
| 4 | $16,000 | $2,548 | $18,548 |
| 5 | $20,000 | $3,901 | $23,901 |
Doughnut chart
This example demonstrates the use of the following configuration options: data-chart-options and data-chart-set-options.
| Population | |
|---|---|
| Newfoundland and Labrador | 540 418 |
| Prince Edward Island | 175 853 |
| Nova Scotia | 1 066 416 |
| New Brunswick | 842 725 |
| Quebec | 8 948 540 |
| Ontario | 15 801 768 |
| Manitoba | 1 465 440 |
| Saskatchewan | 1 218 976 |
| Alberta | 4 756 408 |
| British Columbia | 5 581 127 |
| Yukon | 45 148 |
| Northwest Territories | 44 760 |
| Nunavut | 40 817 |
Pie chart
This example demonstrates the use of the following configuration options: data-chart-options and data-chart-set-options.
| Population | |
|---|---|
| Newfoundland and Labrador | 540 418 |
| Prince Edward Island | 175 853 |
| Nova Scotia | 1 066 416 |
| New Brunswick | 842 725 |
| Quebec | 8 948 540 |
| Ontario | 15 801 768 |
| Manitoba | 1 465 440 |
| Saskatchewan | 1 218 976 |
| Alberta | 4 756 408 |
| British Columbia | 5 581 127 |
| Yukon | 45 148 |
| Northwest Territories | 44 760 |
| Nunavut | 40 817 |
Polar area chart
This example demonstrates the use of the following configuration options: data-chart-options and data-chart-set-options.
| Population | |
|---|---|
| Newfoundland and Labrador | 540 418 |
| Prince Edward Island | 175 853 |
| Nova Scotia | 1 066 416 |
| New Brunswick | 842 725 |
| Quebec | 8 948 540 |
| Ontario | 15 801 768 |
| Manitoba | 1 465 440 |
| Saskatchewan | 1 218 976 |
| Alberta | 4 756 408 |
| British Columbia | 5 581 127 |
| Yukon | 45 148 |
| Northwest Territories | 44 760 |
| Nunavut | 40 817 |
Radar chart
This example demonstrates the use of the following configuration options: data-chart-options, data-chart-data and data-chart-set-options.
| Employee group 1 | Employee group 2 | |||
|---|---|---|---|---|
| Employee 1 | Employee 2 | Employee 3 | Employee 4 | |
| Front-end development | 10 | 9 | 4 | 7 |
| Back-end development | 9 | 8 | 2 | 4 |
| Design | 3 | 7 | 5 | 7 |
| Databases | 8 | 8 | 6 | 2 |
| HR Management | 4 | 9 | 4 | 6 |
| Infrastructure | 8 | 6 | 1 | 9 |
Line chart with table visible
This example demonstrates the use of the following configuration options: data-chart-details-open.
| Years | Amounts contributed or transferred | Investment income | Total account holdings |
|---|---|---|---|
| 1 | $4,000 | $240 | $4,240 |
| 2 | $8,000 | $734 | $8,734 |
| 3 | $12,000 | $1,498 | $13,498 |
| 4 | $16,000 | $2,548 | $18,548 |
| 5 | $20,000 | $3,901 | $23,901 |
Page details
- Date modified: