JS Charts

Doughnut charts

	                <div class="box-none pa-n">
	<canvas height="200" data-fc-modules="charts" 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>
</div>

                

Pie charts

	                <div class="box-none pa-n">
	<canvas height="200" data-fc-modules="charts" 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>
</div>

                

Line charts

	                <div class="box-none pa-n">
	<canvas height="200" data-fc-modules="charts" 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>
</div>

                

Bar charts

	                <div class="box-none pa-n">
	<canvas height="200" data-fc-modules="charts" 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>
</div>

                

Doughnut charts no data

	                <div class="box-none pa-n">
	<canvas height="200" data-fc-modules="charts" 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>
</div>
                

Bar charts no data

	                <div class="box-none pa-n">
	<canvas height="200" data-fc-modules="charts" 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>
</div>

                

Canvas


Attributes

data-fc-type

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

DEFAULT: line

width

Width in pixels of the stats and the table

DEFAULT: autowidth based on parent element

height

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