Charts

Think in & out the box

Doughnut charts

<canvas height="250" width="1200" data-fc-modules="chart" data-fc-type="doughnut">
	<input name="done" type="hidden" value="10" />
	<input name="backlog" type="hidden" value="30" />
	<input name="Work in progress" type="hidden" value="40" />
</canvas>

Pie charts

<canvas height="250" width="1200" data-fc-modules="chart" data-fc-type="pie">
	<input name="Costs" type="hidden" value="10" />
	<input name="Indirect sales" type="hidden" value="30" />
	<input name="Direct sales" type="hidden" value="40" />
</canvas>

Line charts

<canvas height="250" width="1200" data-fc-modules="chart" data-fc-type="line" data-fc-labels-x="[January,February,March,June,July]">
	<!-- The value could be an array... -->
	<input name="results last year" type="hidden" value="[60,90,30,70,40]" />
	<!-- ... or a string separated by comma -->
	<input name="results this year" type="hidden" value="80,50,60,40,80" />
</canvas>

Bar charts

<canvas height="250" width="1200" data-fc-modules="chart" data-fc-type="bar" data-fc-labels-x="January,February,March,June,July">
	<!-- The value could be an array... -->
	<input name="Sales last year" type="hidden" value="[60,90,30,70,40]" />
	<!-- ... or a string separated by comma -->
	<input name="Sales last year" type="hidden" value="80,50,60,40,80" />
</canvas>

Doughnut charts no data

<canvas height="250" width="1200" data-fc-modules="chart" data-fc-type="doughnut">
	<input name="done" type="hidden" value="0" />
	<input name="backlog" type="hidden" value="0" />
	<input name="Work in progress" type="hidden" value="0" />
</canvas>

Bar charts no data

<canvas height="250" width="1200" data-fc-modules="chart" data-fc-type="bar" data-fc-text-no-data="Ops! No data here..." data-fc-labels-x="January,February,March,June,July">
	<!-- The value could be an array... -->
	<input name="Sales last year" type="hidden" value="[0,0,0,0,0]" />
	<!-- ... or a string separated by comma -->
	<input name="Sales last year" type="hidden" value="0,0,0,0,0" />
</canvas>

Canvas

Attributes

data-fc-type

Type of stats (pie, bar, area or line)

DEFAULT: line

width

Max Width in pixels of the stats and the table

DEFAULT: autowidth based on parent element

height

Max Height in pixels of the stats and the table in px

DEFAULT: 300

data-fc-labels-x

Array or string separated by comma with the name of the labels for the X axis. The Pie chart and the doughnut chart does'nt have X Axis.

DEFAULT: []

data-fc-colors

Array or string separated by comma with the hex colors used for the charts.

DEFAULT: ['96c47f','5b90bf','b55151','b48ead','d6b051','82b2af','d4d659','dcdcdc']

data-fc-text-no-data

Text shown when all values are zero.

DEFAULT: No data

Inputs

You need to create an input hidden for each value (pie, doughnut) or group of values (line, bars)

Attributes

name

The attribute 'name' of each input will be used as label for the legend. If one is missing the legend will not be shown.

DEFAULT: unlabel

value

Array or string separated by comma with the values of the chart.

DEFAULT: autowidth based on parent element