TOTVS Fluig Developer

Style Guide includes a component for creating charts based on chartjs and gauge.js

Charts should only be used for low online data volume. For large volumes of data and complex graphics, must compulsorily use Analytics.

Although you can use the chartjs and gauge.js components directly, we recommend that you use the component "FLUIGC.chart" which was designed to simplify the use of these components.

Creating charts with Developer Studio using the Style Guide

If you want to create forms using the style guide and add charts, you'll need to import the minified CSS and JavaScript files. To import them, follow the example below, not forgetting to import the fluig-style-guide-chart.min.js file:

	<head>
	<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide.min.css">
	<script src="/portal/resources/js/jquery/jquery.js"></script>
	<script src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
	<script src="/style-guide/js/fluig-style-guide.min.js"></script>
	<script src="/style-guide/js/fluig-style-guide-chart.min.js"></script>
	</head>
	<body>
		<div class="fluig-style-guide">
			<!--Some code here-->
		</div>
	</body>

Using charts in widgets

To use charts in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigchart

Constructor Chart options

The options object has the following attributes:

Name	type	default	description
animation	boolean	''	Whether to animate the chart
animationSteps	number	''	number of animation steps
animationEasing	string	''	Animation easing effect
showScale	boolean	''	If we should show the scale at all
scaleOverride	boolean	''	If we want to override with a hard coded scale
scaleSteps	number	''	The number of steps in a hard coded scale
scaleStepWidth	number	''	The value jump in the hard coded scale
scaleStartValue	number	''	The scale starting value
scaleLineColor	string	''	Colour of the scale line
scaleLineWidth	number	''	Pixel width of the scale line
scaleShowLabels	boolean	''	Whether to show labels on the scale
scaleLabel	Interpolated JS string	''	Can access value
scaleIntegersOnly	boolean	''	Whether the scale should stick to integers, not floats even if drawing space is there
scaleBeginAtZero	boolean	''	Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleFontFamily	string	''	Scale label font declaration for the scale label
scaleFontSize	number	''	Scale label font size in pixels
scaleFontStyle	string	''	Scale label font weight style
scaleFontColor	string	''	Scale label font colour
responsive	boolean	true	whether or not the chart should be responsive and resize when the browser does
maintainAspectRatio	boolean	''	whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
showTooltips	boolean	''	Determines whether to draw tooltips on the canvas or not
customTooltips	function	''	Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
tooltipEvents	Array	''	Array of string names to attach tooltip events
tooltipFillColor	string	''	Tooltip background colour
tooltipFontFamily	string	''	Tooltip label font declaration for the scale label
tooltipFontSize	number	''	Tooltip label font size in pixels
tooltipFontStyle	string	''	Tooltip font weight style
tooltipFontColor	string	''	Tooltip label font colour
tooltipTitleFontFamily	string	''	Tooltip title font declaration for the scale label
tooltipTitleFontSize	number	''	Tooltip title font size in pixels
tooltipTitleFontStyle	string	''	Tooltip title font weight style
tooltipTitleFontColor	string	''	Tooltip title font colour
tooltipYPadding	number	''	pixel width of padding around tooltip text
tooltipXPadding	number	''	pixel width of padding around tooltip text
tooltipCaretSize	number	''	Size of the caret on the tooltip
tooltipCornerRadius	number	''	Pixel radius of the tooltip border
tooltipXOffset	number	''	Pixel offset from point x to tooltip edge
tooltipTemplate	string	''	Template string for single tooltips
multiTooltipTemplate	string	''	Template string for single tooltips
onAnimationProgress	function	''	Will fire on animation progression
onAnimationComplete	function	''	Will fire on animation completion

Examples

A line chart is a way of plotting data points on a line.

Live demo

Below an example of line chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the line chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the line function
var lineChart = chart.line(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the line function
var lineChart = chart.line(data, options);

Data structure

The line chart requires an array of labels for each of the data points. Each dataset has a colour for the fill, a colour for the line and colours for the points and strokes of the points.

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

Line Chart options

The options object has the following attributes:

Name	type	default	description
scaleShowGridLines	boolean	''	Whether grid lines are shown across the chart.
scaleGridLineColor	string	''	Colour of the grid lines.
scaleGridLineWidth	number	''	Width of the grid lines.
bezierCurve	boolean	''	Whether the line is curved between points.
bezierCurveTension	number	''	Tension of the bezier curve between points.
pointDot	boolean	''	Whether to show a dot for each point.
pointDotRadius	number	''	Radius of each point dot in pixels.
pointDotStrokeWidth	number	''	Pixel width of point dot stroke.
pointHitDetectionRadius	number	''	amount extra to add to the radius to cater for hit detection outside the drawn point.
datasetStroke	boolean	''	Whether to show a stroke for datasets.
datasetStrokeWidth	number	''	Pixel width of dataset stroke.
datasetFill	boolean	''	Whether to fill the dataset with a colour.
legendTemplate	string	''	A legend template.

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	lineChart.addData([40, 60], "August");

.update()

Update the dataset's value.

	// Would update the first dataset's value of 'March' to be 50
	lineChart.datasets[0].points[2].value = 50;
	// Calling update now animates the position of March from 90 to 50.
	lineChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	lineChart.removeData();

Examples

A bar chart is a way of showing data as bars

Live demo

Below an example of bar chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the bar chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the bar function
var barChart = chart.bar(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the bar function
var barChart = chart.bar(data, options);

Data structure

The bar chart has the a very similar data structure to the line chart, and has an array of datasets, each with colours and an array of data.

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

Bar Chart options

The options object has the following attributes:

Name	type	default	description
scaleBeginAtZero	boolean	''	Whether the scale should start at zero, or an order of magnitude down from the lowest value.
scaleShowGridLines	string	''	Whether grid lines are shown across the chart.
scaleGridLineColor	string	''	Colour of the grid lines.
scaleGridLineWidth	number	''	Width of the grid lines.
barShowStroke	boolean	''	If there is a stroke on each bar.
barStrokeWidth	number	''	Pixel width of the bar stroke.
barValueSpacing	number	''	Spacing between each of the X value sets.
barDatasetSpacing	number	''	Spacing between data sets within X values.
legendTemplate	number	''	A legend template.

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	barChart.addData([40, 60], "August");

.update()

Update the dataset's value.

	// Would update the first dataset's value of 'March' to be 50
	barChart.datasets[0].bars[2].value = 50;
	// Calling update now animates the position of March from 90 to 50.
	barChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	barChart.removeData();

Examples

A radar chart is a way of showing multiple data points and the variation between them.

Live demo

Below an example of radar chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the radar chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the radar function
var radarChart = chart.radar(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the radar function
var radarChart = chart.radar(data, options);

Data structure

For a radar chart, to provide context of what each point means, we include an array of strings that show around each point in the chart. For the radar chart data, we have an array of datasets. Each of these is an object, with a fill colour, a stroke colour, a colour for the fill of each point, and a colour for the stroke of each point. We also have an array of data values.

var data = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]
};

Radar Chart options

The options object has the following attributes:

Name	type	default	description
scaleShowLine	boolean	''	Whether to show lines for each scale point
angleShowLineOut	boolean	''	Whether we show the angle lines out of the radar
scaleShowLabels	boolean	''	Whether to show labels on the scale
scaleBeginAtZero	boolean	''	Whether the scale should begin at zero
angleLineColor	string	''	Colour of the angle line
angleLineWidth	number	''	Pixel width of the angle line
pointLabelFontFamily	string	''	Point label font declaration
pointLabelFontStyle	string	''	Point label font weight
pointLabelFontSize	number	''	Point label font size in pixels
pointLabelFontColor	string	''	Point label font colour
pointDot	boolean	''	Whether to show a dot for each point
pointDotRadius	number	''	Radius of each point dot in pixels
pointDotStrokeWidth	number	''	Pixel width of point dot stroke
pointHitDetectionRadius	number	''	Amount extra to add to the radius to cater for hit detection outside the drawn point
datasetStroke	boolean	''	Whether to show a stroke for datasets
datasetStrokeWidth	number	''	Pixel width of dataset stroke
datasetFill	boolean	''	Whether to fill the dataset with a colour
legendTemplate	string	''	A legend template

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	radarChart.addData([40, 60], "August");

.update()

Update the dataset's value.

	// Would update the first dataset's value of 'March' to be 50
	radarChart.datasets[0].points[2].value = 50;
	// Calling update now animates the position of March from 90 to 50.
	radarChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	radarChart.removeData();

Examples

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.

Live demo

Below an example of polar chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the polar chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the polar function
var polarChart = chart.polar(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the polar function
var polarChart = chart.polar(data, options);

Data structure

The chart data you pass in an array of objects, with a value and a colour.

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    },
    {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
    },
    {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
    }
];

Polar Chart options

The options object has the following attributes:

Name	type	default	description
scaleShowLabelBackdrop	boolean	''	Show a backdrop to the scale label
scaleBackdropColor	string	''	The colour of the label backdrop
scaleBeginAtZero	boolean	''	Whether the scale should begin at zero
scaleBackdropPaddingY	number	''	The backdrop padding above and below the label in pixels
scaleBackdropPaddingX	number	''	The backdrop padding to the side of the label in pixels
scaleShowLine	boolean	''	Show line for each value in the scale
segmentShowStroke	boolean	''	Stroke a line around each segment in the chart
segmentStrokeColor	string	''	The colour of the stroke on each segement
segmentStrokeWidth	number	''	The width of the stroke value in pixels
animationSteps	number	''	Amount of animation steps
animationEasing	string	''	Animation easing effect
animateRotate	boolean	''	Whether to animate the rotation of the chart
animateScale	boolean	''	Whether to animate scaling the chart from the centre
legendTemplate	string	''	A legend template

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	polarChart.addData({
	    value: 130,
	    color: "#B48EAD",
	    highlight: "#C69CBE",
	    label: "Purple"
	});

.update()

Update the dataset's value.

	polarChart.segments[1].value = 10;
	polarChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	polarChart.removeData();

Examples

Pie chart is divided into segments, the arc of each segment shows the proportional value of each piece of data.

Live demo

Below an example of pie chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the pie chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the pie function
var pieChart = chart.pie(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the pie function
var pieChart = chart.pie(data, options);

Data structure

For a pie chart, you must pass in an array of objects with a value and a color property.

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
]

Pie Chart options

The options object has the following attributes:

Name	type	default	description
segmentShowStroke	Boolean	''	Whether we should show a stroke on each segment
segmentStrokeColor	String	''	The colour of each segment stroke
segmentStrokeWidth	Number	''	The width of each segment stroke
percentageInnerCutout	Number	''	The percentage of the chart that we cut out of the middle
animationSteps	Number	''	Amount of animation steps
animationEasing	String	''	Animation easing effect
animateRotate	Boolean	''	Whether we animate the rotation of the Doughnut
animateScale	Boolean	''	Whether we animate scaling the Doughnut from the centre
legendTemplate	String	''	A legend template

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	pieChart.addData({
	    value: 130,
	    color: "#B48EAD",
	    highlight: "#C69CBE",
	    label: "Purple"
	});

.update()

Update the dataset's value.

	pieChart.segments[1].value = 10;
	pieChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	pieChart.removeData();

Events

Name	Description
fluig.chart.pie.click	Triggered when the click ocurrs on a pie chart area.

Events triggered by element selector

fluig.chart.pie.click

This event is fired when the click ocurrs on a pie chart area. The returned object has the label attributes and the value of the chart area.

	$('YOUR_SELECTOR').on('fluig.chart.pie.click', function(data) {
		// Do something
	});

Examples

Doughnut chart is divided into segments, the arc of each segment shows the proportional value of each piece of data.

Live demo

Below an example of doughnut chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the doughnut chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the doughnut function
var doughnutChart = chart.doughnut(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the doughnut function
var doughnutChart = chart.doughnut(data, options);

Data structure

For a doughnut chart, you must pass in an array of objects with a value and a color property.

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
]

Doughnut Chart options

The options object has the following attributes:

Name	type	default	description
segmentShowStroke	Boolean	''	Whether we should show a stroke on each segment
segmentStrokeColor	String	''	The colour of each segment stroke
segmentStrokeWidth	Number	''	The width of each segment stroke
percentageInnerCutout	Number	''	The percentage of the chart that we cut out of the middle
animationSteps	Number	''	Amount of animation steps
animationEasing	String	''	Animation easing effect
animateRotate	Boolean	''	Whether we animate the rotation of the Doughnut
animateScale	Boolean	''	Whether we animate scaling the Doughnut from the centre
legendTemplate	String	''	A legend template

Methods

.addData(valuesArray, label)

Adds a new data to chart.

	doughnutChart.addData({
	    value: 130,
	    color: "#B48EAD",
	    highlight: "#C69CBE",
	    label: "Purple"
	});

.update()

Update the dataset's value.

	doughnutChart.segments[1].value = 10;
	doughnutChart.update();

.removeData()

Remove the first value for all datasets on the chart.

	doughnutChart.removeData();

Examples

Allows the creation of a chart style of a manometer

Live demo

Below an example of gauge chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the gauge chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the gauge function
var chartGauge = chart.gauge();

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200'
});
// call the gauge function
var chartGauge = chart.gauge({
		lines: 12,
		angle: 0.15,
		lineWidth: 0.44,
		pointer: {
			length: 0.9,
			strokeWidth: 0.035,
			color: '#000000'
		},
		limitMax: 'false',
		colorStart: '#6FADCF',
		colorStop: '#8FC0DA',
		strokeColor: '#E0E0E0',
		generateGradient: true
	});

Gauge Chart options

The options object has the following attributes:

Name	type	default	description
lines	number	12	The number of lines to draw
angle	number	0.15	The length of each line
lineWidth	number	0.44	The line thickness
pointer	object	''	Settings pointer
limitMax	string	'false'	If true, the pointer will not go past the end of the gauge
colorStart	string	'#faa61a'	Colors
colorStop	string	'#ed145b'	Colors
strokeColor	string	'#ed145b'	To see which ones work best for you
generateGradient	boolean	true	Generate Gradient

Settings to Object pointer

The options object has the following attributes:

Name	type	default	description
length	number	0.9	The radius of the inner circle
strokeWidth	number	0.035	The rotation offset
color	string	'#000000'	Fill color

You can change the following attributes

maxValue

Set max gauge value.

	gaugeChart.maxValue = 3000;

animationSpeed

Set animation speed (32 is default value).

	gaugeChart.animationSpeed = 74;

Methods

.set(newValue)

Set actual value.

	gaugeChart.set(925);

Examples

Allows the creation of a chart style of a donut

Live demo

Below an example of donut chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the donut chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the donut function
var chartDonut = chart.donut();

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200'
});
// call the donut function
var chartDonut = chart.donut({
		lines: 12,
		angle: 0.15,
		lineWidth: 0.44,
		pointer: {
			length: 0.9,
			strokeWidth: 0.035,
			color: '#000000'
		},
		limitMax: 'false',
		colorStart: '#6FADCF',
		colorStop: '#8FC0DA',
		strokeColor: '#E0E0E0',
		generateGradient: true
	});

Donut Chart options

The options object has the following attributes:

Name	type	default	description
lines	number	12	The number of lines to draw
angle	number	0.15	The length of each line
lineWidth	number	0.44	The line thickness
pointer	object	''	Settings pointer
limitMax	string	'false'	If true, the pointer will not go past the end of the donut
colorStart	string	'#faa61a'	Colors
colorStop	string	'#ed145b'	Colors
strokeColor	string	'#303030'	To see which ones work best for you
generateGradient	boolean	true	Generate Gradient

Settings to Object pointer

The options object has the following attributes:

Name	type	default	description
length	number	0.9	The radius of the inner circle
strokeWidth	number	0.035	The rotation offset
color	string	'#000000'	Fill color

You can change the following attributes

maxValue

Set max gauge value.

	donutChart.maxValue = 3000;

animationSpeed

Set animation speed (32 is default value).

	donutChart.animationSpeed = 74;

Methods

.set(newValue)

Set actual value.

	donutChart.set(925);

Examples

A lineBar chart is a mix of line chart and bar chart.

Live demo

Below an example of lineBar chart

HTML

<div id="MY_SELECTOR"></div>

Javascript

Below is the basic configuration to use the line chart.

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the lineBar function
var lineBarChart = chart.lineBar(data, options);

Javascript

Below is the configuration, with the id, width and height of the canvas.

var chart = FLUIGC.chart('#MY_SELECTOR', {
	id: 'set_an_id_for_my_chart',
	width: '700',
	height: '200',
	/* See the list of options */
});
// call the lineBar function
var lineBarChart = chart.lineBar(data, options);

Data structure

The lineBar chart requires an array of labels and an array of datasets.

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        type: "line",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 4, 81, 56, 55, 40]
    }, {
        label: "My First dataset",
        type: "bar",
        fillColor: "rgba(220,20,220,0.2)",
        strokeColor: "rgba(220,20,220,1)",
        pointColor: "rgba(220,20,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [32, 25, 33, 88, 12, 92, 33]
    }]
};

LineBar Chart options and methods

You can use the same attributes and methods used to line charts and bar.

About

Charts should only be used for low online data volume. For large volumes of data and complex graphics, must compulsorily use Analytics.

Although you can use the chartjs and gauge.js components directly, we recommend that you use the component "FLUIGC.chart" which was designed to simplify the use of these components.

Creating charts with Developer Studio using the Style Guide

Using charts in widgets

Constructor Chart options

Line

Examples

Live demo

HTML

Javascript

Javascript

Data structure

Line Chart options

Methods

.addData(valuesArray, label)

.update()

.removeData()

Bar

Examples

Live demo

HTML

Javascript

Javascript

Data structure

Bar Chart options

Methods

.addData(valuesArray, label)

.update()

.removeData()

Radar

Examples

Live demo

HTML

Javascript

Javascript

Data structure

Radar Chart options

Methods

.addData(valuesArray, label)

.update()

.removeData()

Polar

Examples

Live demo

HTML

Javascript

Javascript

Data structure

Polar Chart options

Methods

.addData(valuesArray, label)

.update()

.removeData()

Pie

Examples

Live demo

HTML

Javascript

Javascript

Data structure

Pie Chart options

Methods

.addData(valuesArray, label)

.update()

.removeData()

Events

Events triggered by element selector

fluig.chart.pie.click

Doughnut

Examples

Live demo

HTML

Javascript

Javascript

Data structure

Doughnut Chart options

Methods

.addData(valuesArray, label)

.update()