Chart
The Chart.js library is used for Data Visualization.
The Chart tag provides Chart rendering.
Example chart with all currently available options:
<!-- "labels" attribute -->
<List name=labels>
<Item>Red</Item>
<Item>Blue</Item>
<Item>Yellow</Item>
<Item>Green</Item>
<Item>Purple</Item>
<Item>Orange</Item>
</List>
<!-- "datasets" attribute -->
<List name=datasets>
<Map>
<Key name=label># of Votes</Key>
<List name=data>
<Item>12</Item>
<Item>19</Item>
<Item>3</Item>
<Item>5</Item>
<Item>2</Item>
<Item>3</Item>
</List>
<List name=backgroundColor>
<Item>rgba(255, 99, 132, 0.2)</Item>
<Item>rgba(54, 162, 235, 0.2)</Item>
<Item>rgba(255, 206, 86, 0.2)</Item>
<Item>rgba(75, 192, 192, 0.2)</Item>
<Item>rgba(153, 102, 255, 0.2)</Item>
<Item>rgba(255, 159, 64, 0.2)</Item>
</List>
<List name=borderColor>
<Item>rgba(255, 99, 132, 1)</Item>
<Item>rgba(54, 162, 235, 1)</Item>
<Item>rgba(255, 206, 86, 1)</Item>
<Item>rgba(75, 192, 192, 1)</Item>
<Item>rgba(153, 102, 255, 1)</Item>
<Item>rgba(255, 159, 64, 1)</Item>
</List>
<Key name=borderWidth>1</Key>
</Map>
</List>
<!-- "chart_legend" options attribute -->
<Map name=chart_legend>
<Key name=display>true</Key>
<Key map=labels>
<Key name=color>#911</Key>
<Key map=font>
<Key name=family>Comic Sans MS</Key>
<Key name=size>14</Key>
<Key name=weight>bold</Key>
<Key name=lineHeight>1.2</Key>
</Key>
</Key>
<Key map=title>
<Key name=display>true</Key>
<Key name=text>Legend Title</Key>
<Key name=color>blue</Key>
<Key map=font>
<Key name=family>Times</Key>
<Key name=size>26</Key>
<Key name=weight>bold</Key>
<Key name=lineHeight>1.2</Key>
</Key>
<Key map=padding>
<Key name=top>20</Key>
<Key name=left>0</Key>
<Key name=right>0</Key>
<Key name=bottom>0</Key>
</Key>
</Key>
</Map>
<!-- "chart_title" options attribute -->
<Map name=chart_title>
<Key name=display>true</Key>
<Key name=text>Chart Title</Key>
<Key name=color>#911</Key>
<Key map=font>
<Key name=family>Broadway</Key>
<Key name=size>26</Key>
<Key name=weight>bold</Key>
<Key name=lineHeight>1.2</Key>
</Key>
<Key map=padding>
<Key name=top>20</Key>
<Key name=left>0</Key>
<Key name=right>0</Key>
<Key name=bottom>0</Key>
</Key>
</Map>
<!-- "axis_x" options attribute -->
<Map name=axis_x>
<Key name=display>true</Key>
<Key map=title>
<Key name=display>true</Key>
<Key name=text>Colors</Key>
<Key name=color>orange</Key>
<Key map=font>
<Key name=family>Times</Key>
<Key name=size>20</Key>
<Key name=weight>bold</Key>
<Key name=lineHeight>1.2</Key>
</Key>
<Key map=padding>
<Key name=top>20</Key>
<Key name=left>0</Key>
<Key name=right>0</Key>
<Key name=bottom>0</Key>
</Key>
</Key>
<Key map=ticks>
<Key name=display>true</Key>
<Key name=color>green</Key>
<Key map=font>
<Key name=family>Comic Sans MS</Key>
<Key name=size>16</Key>
<Key name=weight>bold</Key>
<Key name=lineHeight>1.2</Key>
</Key>
</Key>
</Map>
<!-- "axis_y" options attribute -->
<Map name=axis_y>
<Key name=display>true</Key>
<Key map=title>
<Key name=display>true</Key>
<Key name=text>Frequencies</Key>
<Key name=color>purple</Key>
<Key map=font>
<Key name=family>Broadway</Key>
<Key name=size>20</Key>
<Key name=weight>bold</Key>
<Key name=lineHeight>1.2</Key>
</Key>
<Key map=padding>
<Key name=top>20</Key>
<Key name=left>0</Key>
<Key name=right>0</Key>
<Key name=bottom>0</Key>
</Key>
</Key>
<Key map=ticks>
<Key name=display>true</Key>
<Key name=color>blue</Key>
<Key map=font>
<Key name=family>Times</Key>
<Key name=size>16</Key>
<Key name=weight>normal</Key>
<Key name=lineHeight>1.2</Key>
</Key>
</Key>
</Map>
<!-- "<Chart />" tag with attributes -->
<Chart
type="bar"
labels = "{Get list=labels}"
datasets = "{Get list=datasets}"
axis_x = "{Get map=axis_x}"
axis_y = "{Get map=axis_y}"
chart_legend = "{Get map=chart_legend}"
chart_title = "{Get map=chart_title}"
/>
Result:
Alternatively, the options can be passed directly in the attribute, in Human JSON syntax.
<!-- labels, datasets -->
<Chart
...
labels="['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']"
datasets="[{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]"
...
/>
<!-- axis_x, axis_y -->
<Chart
...
axis_y = "{
display: true,
title: {
display: true,
text: 'Frequencies',
color: '#8c06b3',
font: {
family: 'Broadway',
size: '20',
weight: 'bold',
lineHeight: '1.2',
},
padding: {top: '20', left: 0, right: 0, bottom: 0}
},
ticks: {
display: true,
color: 'blue',
font: {
family: 'Times',
size: '20',
weight: 'normal',
lineHeight: '1.2',
}
},
}"
...
/>
<!-- chart_legend, chart_title -->
<Chart
...
chart_legend ="{
display: true,
labels:{
color: '#911',
font: {
family: 'Comic Sans MS',
size: 20,
weight: 'bold',
lineHeight: 1.2,
},
},
title:{
display: true,
color: 'blue',
text: 'Legend Title',
font: {
family: 'Times',
size: 26,
weight: 'bold',
lineHeight: 1.2,
},
padding: { top: 20, left: 0, right: 0, bottomt: 0 },
},
}"
chart_title = "{
display: true,
text: 'Chart Title',
color: '#911',
font: {
family: 'Comic Sans MS',
size: 20,
weight: 'bold',
lineHeight: 1.2,
},
padding: {top: 20, left: 0, right: 0, bottom: 0}
}"
...
/>Chart Attributes
type- Chart type - 'line', 'bar', 'radar', 'doughnut', 'pie', 'polarArea'fill- Fill Chart areas - applies to 'line' and 'radar' types. true/false (Default: true)labels- Chart labelsdatasets- Chart datasets - also can be passed by an extended 'ChartData' tag ( see example GFChartData )backgroundColor- Background color of Chart areas - alternatively can be passed within datasetsborderColor- Border color of Chart areas - alternatively can be passed within datasetsaxis_x- Chart Scales options - axis xaxis_y- Chart Scales options - axis ychart_legend- Chart Legend optionschart_title- Chart Title options