Style Guide includes a component for creating charts based on chartjs and gauge.js
The Chart components of the Fluig Style Guide are based on the Chart.js and gauge.js plugins.
Plugin | Version | Description | Documentation |
---|---|---|---|
Chart.js | 2.9.4 | Chart.js is a free JavaScript library for making HTML-based charts. It is one of the simplest visualization libraries for JavaScript, and comes with the following built-in chart types: Scatter Plot. Line Chart. | https://www.chartjs.org/docs/2.9.4/getting-started/ |
gauge.js | 1.3.7 | The Gauge.js library is a lightweight JavaScript tool for creating interactive and visually appealing circular gauges, commonly used to represent a single metric on dashboards. It allows easy customization and integration into web pages. | https://github.com/bernii/gauge.js |
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>
To use charts in widgets, you must inform the following line in the application.info
file of your widget:
application.resource.component.1=fluigchart
Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.
Name | Type | Default | Description |
---|---|---|---|
duration
|
number
|
1000
|
The number of milliseconds an animation takes. |
easing
|
string
|
'easeOutQuart'
|
Easing function to use. more... |
onProgress
|
function
|
null
|
Callback called on each step of an animation. more... |
onComplete
|
function
|
null
|
Callback called at the end of an animation. more... |
Available options are:
'linear'
'easeInQuad'
'easeOutQuad'
'easeInOutQuad'
'easeInCubic'
'easeOutCubic'
'easeInOutCubic'
'easeInQuart'
'easeOutQuart'
'easeInOutQuart'
'easeInQuint'
'easeOutQuint'
'easeInOutQuint'
'easeInSine'
'easeOutSine'
'easeInOutSine'
'easeInExpo'
'easeOutExpo'
'easeInOutExpo'
'easeInCirc'
'easeOutCirc'
'easeInOutCirc'
'easeInElastic'
'easeOutElastic'
'easeInOutElastic'
'easeInBack'
'easeOutBack'
'easeInOutBack'
'easeInBounce'
'easeOutBounce'
'easeInOutBounce'
See Robert Penner's easing equations.
The onProgress
and onComplete
callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed a Chart.Animation
instance:
{ // Chart object chart: Chart, // Current Animation frame number currentStep: number, // Number of animation frames numSteps: number, // Animation easing to use easing: string, // Function that renders the chart render: function, // User callback onAnimationProgress: function, // User callback onAnimationComplete: function }
The following example fills a progress bar during the chart animation.
var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200', }); // call the bar function var barChart = chart.bar(data, { animation: { onProgress: function(animation) { progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps; } } });
Another example usage of these callbacks can be found on Github: this sample displays a progress bar showing how far along the animation is.
Name | Type | Default | Description |
---|---|---|---|
padding
|
number|object
|
0
|
The padding to add inside the chart. more... |
If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the left
property defines the left padding. Similarly the right
, top
and bottom
properties can also be specified.
Lets say you wanted to add 50px of padding to the left side of the chart canvas, you would do:
var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200', }); // call the line function var lineChart = chart.line(data, { layout: { padding: { left: 50, right: 0, top: 0, bottom: 0 } } });
The chart legend displays data about the datasets that are appearing on the chart.
Name | Type | Default | Description | |
---|---|---|---|---|
display
|
boolean
|
true
|
Is the legend shown? | |
position
|
string
|
'top'
|
Position of the legend. more... | |
align
|
string
|
'center'
|
Alignment of the legend. more... | |
fullWidth
|
boolean
|
true
|
Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use. | |
onClick
|
function
|
A callback that is called when a click event is registered on a label item. | ||
onHover
|
function
|
A callback that is called when a 'mousemove' event is registered on top of a label item. | ||
onLeave
|
function
|
A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item. | ||
reverse
|
boolean
|
false
|
Legend will show datasets in reverse order. | |
labels
|
object
|
See the Legend Label Configuration section below. | ||
rtl
|
boolean
|
true for rendering the legends from right to left.
|
||
textDirection
|
string
|
canvas' default | This will force the text direction `'rtl' | 'ltr` on the canvas for rendering the legend, regardless of the css specified on the canvas |
Position of the legend. Options are:
'top'
'left'
'bottom'
'right'
Alignment of the legend. Options are:
'start'
'center'
'end'
Defaults to 'center'
for unrecognized values.
The legend label configuration is nested below the legend configuration using the labels
key.
Name | Type | Default | Description |
---|---|---|---|
boxWidth
|
number
|
40
|
Width of coloured box. |
fontSize
|
number
|
12
|
Font size of text. |
fontStyle
|
string
|
'normal'
|
Font style of text. |
fontColor
|
Color
|
'#666'
|
Color of text. |
fontFamily
|
string
|
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
|
Font family of legend text. |
padding
|
number
|
10
|
Padding between rows of colored boxes. |
generateLabels
|
function
|
Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See Legend Item for details. | |
filter
|
function
|
null
|
Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data. |
usePointStyle
|
boolean
|
false
|
Label style will match corresponding point style (size is based on the mimimum value between boxWidth and fontSize). |
Items passed to the legend onClick
function are the ones returned from labels.generateLabels
. These items must implement the following interface.
{ // Label that will be displayed text: string, // Fill style of the legend box fillStyle: Color, // If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect hidden: boolean, // For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap lineCap: string, // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash lineDash: number[], // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset lineDashOffset: number, // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin lineJoin: string, // Width of box border lineWidth: number, // Stroke style of the legend box strokeStyle: Color, // Point style of the legend box (only used if usePointStyle is true) pointStyle: string | Image, // Rotation of the point in degrees (only used if usePointStyle is true) rotation: number }
The following example will create a chart with the legend enabled and turn all of the text red in color.
var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200', }); // call the bar function var barChart = chart.bar(data, { legend: { display: true, labels: { fontColor: 'rgb(255, 99, 132)' } } });
It can be common to want to trigger different behaviour when clicking an item in the legend. This can be easily achieved using a callback in the config object.
The default legend click handler is:
function(e, legendItem) { var index = legendItem.datasetIndex; var ci = this.chart; var meta = ci.getDatasetMeta(index); // See controller.isDatasetVisible comment meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null; // We hid a dataset ... rerender the chart ci.update(); }
Lets say we wanted instead to link the display of the first two datasets. We could change the click handler accordingly.
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick; var newLegendClickHandler = function (e, legendItem) { var index = legendItem.datasetIndex; if (index > 1) { // Do the original logic defaultLegendClickHandler(e, legendItem); } else { let ci = this.chart; [ ci.getDatasetMeta(0), ci.getDatasetMeta(1) ].forEach(function(meta) { meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null; }); ci.update(); } }; var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200', }); // call the line function var lineChart = chart.line(data, { legend: { onClick: newLegendClickHandler } });
Now when you click the legend in this chart, the visibility of the first two datasets will be linked together.
Sometimes you need a very complex legend. In these cases, it makes sense to generate an HTML legend. Charts provide a generateLegend()
method on their prototype that returns an HTML string for the legend.
To configure how this legend is generated, you can change the legendCallback
config property.
var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200', }); // call the line function var lineChart = chart.line(data, { legendCallback: function(chart) { // Return the HTML string here. } });
Note that legendCallback is not called automatically and you must call generateLegend()
yourself in code when creating a legend using this method.
The chart title defines text to draw at the top of the chart.
Name | Type | Default | Description |
---|---|---|---|
display
|
boolean
|
false
|
Is the title shown? |
position
|
string
|
'top'
|
Position of title. more... |
fontSize
|
number
|
12
|
Font size. |
fontFamily
|
string
|
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
|
Font family for the title text. |
fontColor
|
Color
|
'#666'
|
Font color. |
fontStyle
|
string
|
'bold'
|
Font style. |
padding
|
number
|
10
|
Number of pixels to add above and below the title text. |
lineHeight
|
number|string
|
1.2
|
Height of an individual line of text. See MDN. |
text
|
string|string[]
|
''
|
Title text to display. If specified as an array, text is rendered on multiple lines. |
Possible title position values are:
'top'
'left'
'bottom'
'right'
The example below would enable a title of 'Custom Chart Title' on the chart that is created.
var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200', }); // call the line function var lineChart = chart.line(data, { title: { display: true, text: 'Custom Chart Title' } });
Name | Type | Default | Description | |
---|---|---|---|---|
enabled
|
boolean
|
true
|
Are on-canvas tooltips enabled? | |
custom
|
function
|
null
|
See custom tooltip section. | |
mode
|
string
|
'nearest'
|
Sets which elements appear in the tooltip. more.... | |
intersect
|
boolean
|
true
|
If true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times. | |
position
|
string
|
'average'
|
The mode for positioning the tooltip. more... | |
callbacks
|
object
|
See the callbacks section. | ||
itemSort
|
function
|
Sort tooltip items. more... | ||
filter
|
function
|
Filter tooltip items. more... | ||
backgroundColor
|
Color
|
'rgba(0, 0, 0, 0.8)'
|
Background color of the tooltip. | |
titleFontFamily
|
string
|
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
|
Title font. | |
titleFontSize
|
number
|
12
|
Title font size. | |
titleFontStyle
|
string
|
'bold'
|
Title font style. | |
titleFontColor
|
Color
|
'#fff'
|
Title font color. | |
titleAlign
|
string
|
'left'
|
Horizontal alignment of the title text lines. more... | |
titleSpacing
|
number
|
2
|
Spacing to add to top and bottom of each title line. | |
titleMarginBottom
|
number
|
6
|
Margin to add on bottom of title section. | |
bodyFontFamily
|
string
|
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
|
Body line font. | |
bodyFontSize
|
number
|
12
|
Body font size. | |
bodyFontStyle
|
string
|
'normal'
|
Body font style. | |
bodyFontColor
|
Color
|
'#fff'
|
Body font color. | |
bodyAlign
|
string
|
'left'
|
Horizontal alignment of the body text lines. more... | |
bodySpacing
|
number
|
2
|
Spacing to add to top and bottom of each tooltip item. | |
footerFontFamily
|
string
|
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
|
Footer font. | |
footerFontSize
|
number
|
12
|
Footer font size. | |
footerFontStyle
|
string
|
'bold'
|
Footer font style. | |
footerFontColor
|
Color
|
'#fff'
|
Footer font color. | |
footerAlign
|
string
|
'left'
|
Horizontal alignment of the footer text lines. more... | |
footerSpacing
|
number
|
2
|
Spacing to add to top and bottom of each footer line. | |
footerMarginTop
|
number
|
6
|
Margin to add before drawing the footer. | |
xPadding
|
number
|
6
|
Padding to add on left and right of tooltip. | |
yPadding
|
number
|
6
|
Padding to add on top and bottom of tooltip. | |
caretPadding
|
number
|
2
|
Extra distance to move the end of the tooltip arrow away from the tooltip point. | |
caretSize
|
number
|
5
|
Size, in px, of the tooltip arrow. | |
cornerRadius
|
number
|
6
|
Radius of tooltip corner curves. | |
multiKeyBackground
|
Color
|
'#fff'
|
Color to draw behind the colored boxes when multiple items are in the tooltip. | |
displayColors
|
boolean
|
true
|
If true, color boxes are shown in the tooltip. | |
borderColor
|
Color
|
'rgba(0, 0, 0, 0)'
|
Color of the border. | |
borderWidth
|
number
|
0
|
Size of the border. | |
rtl
|
boolean
|
true for rendering the legends from right to left.
|
||
textDirection
|
string
|
canvas' default | This will force the text direction `'rtl' | 'ltr` on the canvas for rendering the tooltips, regardless of the css specified on the canvas |
The titleAlign
, bodyAlign
and footerAlign
options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported.
'left'
(default)
'right'
'center'
These options are only applied to text lines. Color boxes are always aligned to the left edge.
Allows sorting of tooltip items. Must implement at minimum a function that can be passed to Array.prototype.sort. This function can also accept a third parameter that is the data object passed to the chart.
Allows filtering of tooltip items. Must implement at minimum a function that can be passed to Array.prototype.filter. This function can also accept a second parameter that is the data object passed to the chart.
The tooltip label configuration is nested below the tooltip configuration using the callbacks
key. The tooltip has the following callbacks for providing text. For all functions, this
will be the tooltip object created from the Chart.Tooltip
constructor.
All functions are called with the same arguments: a tooltip item and the data
object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.
Name | Arguments | Description |
---|---|---|
beforeTitle
|
TooltipItem[], object
|
Returns the text to render before the title. |
title
|
TooltipItem[], object
|
Returns text to render as the title of the tooltip. |
afterTitle
|
TooltipItem[], object
|
Returns text to render after the title. |
beforeBody
|
TooltipItem[], object
|
Returns text to render before the body section. |
beforeLabel
|
TooltipItem, object
|
Returns text to render before an individual label. This will be called for each item in the tooltip. |
label
|
TooltipItem, object
|
Returns text to render for an individual item in the tooltip. more... |
labelColor
|
TooltipItem, Chart
|
Returns the colors to render for the tooltip item. more... |
labelTextColor
|
TooltipItem, Chart
|
Returns the colors for the text of the label for the tooltip item. |
afterLabel
|
TooltipItem, object
|
Returns text to render after an individual label. |
afterBody
|
TooltipItem[], object
|
Returns text to render after the body section. |
beforeFooter
|
TooltipItem[], object
|
Returns text to render before the footer section. |
footer
|
TooltipItem[], object
|
Returns text to render as the footer of the tooltip. |
afterFooter
|
TooltipItem[], object
|
Text to render after the footer section. |
The label
callback can change the text that displays for a given data point. A common example to round data values; the following example rounds the data to two decimal places.
var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200', }); // call the line function var lineChart = chart.line(data, { tooltips: { callbacks: { label: function(tooltipItem, data) { var label = data.datasets[tooltipItem.datasetIndex].label || ''; if (label) { label += ': '; } label += Math.round(tooltipItem.yLabel * 100) / 100; return label; } } } });
For example, to return a red box for each item in the tooltip you could do:
var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200', }); // call the line function var lineChart = chart.line(data, { tooltips: { callbacks: { labelColor: function(tooltipItem, chart) { return { borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgb(255, 0, 0)' }; }, labelTextColor: function(tooltipItem, chart) { return '#543453'; } } } });
The tooltip items passed to the tooltip callbacks implement the following interface.
{ // Label for the tooltip label: string, // Value for the tooltip value: string, // X Value of the tooltip // (deprecated) use `value` or `label` instead xLabel: number | string, // Y value of the tooltip // (deprecated) use `value` or `label` instead yLabel: number | string, // Index of the dataset the item comes from datasetIndex: number, // Index of this data item in the dataset index: number, // X position of matching point x: number, // Y position of matching point y: number }
Custom tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an oncanvas one. You can enable custom tooltips in the global or chart configuration like so:
var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200', }); // call the line function var lineChart = chart.line(data, { tooltips: { // Disable the on-canvas tooltip enabled: false, custom: function(tooltipModel) { // Tooltip Element var tooltipEl = document.getElementById('chartjs-tooltip'); // Create element on first render if (!tooltipEl) { tooltipEl = document.createElement('div'); tooltipEl.id = 'chartjs-tooltip'; tooltipEl.innerHTML = '
See samples for examples on how to get started with custom tooltips.
The tooltip model contains parameters that can be used to render the tooltip.
{ // The items that we are rendering in the tooltip. See Tooltip Item Interface section dataPoints: TooltipItem[], // Positioning xPadding: number, yPadding: number, xAlign: string, yAlign: string, // X and Y properties are the top left of the tooltip x: number, y: number, width: number, height: number, // Where the tooltip points to caretX: number, caretY: number, // Body // The body lines that need to be rendered // Each object contains 3 parameters // before: string[] // lines of text before the line with the color square // lines: string[], // lines of text to render as the main item with color square // after: string[], // lines of text to render after the main lines body: object[], // lines of text that appear after the title but before the body beforeBody: string[], // line of text that appear after the body and before the footer afterBody: string[], bodyFontColor: Color, _bodyFontFamily: string, _bodyFontStyle: string, _bodyAlign: string, bodyFontSize: number, bodySpacing: number, // Title // lines of text that form the title title: string[], titleFontColor: Color, _titleFontFamily: string, _titleFontStyle: string, titleFontSize: number, _titleAlign: string, titleSpacing: number, titleMarginBottom: number, // Footer // lines of text that form the footer footer: string[], footerFontColor: Color, _footerFontFamily: string, _footerFontStyle: string, footerFontSize: number, _footerAlign: string, footerSpacing: number, footerMarginTop: number, // Appearance caretSize: number, caretPadding: number, cornerRadius: number, backgroundColor: Color, // colors to render for each item in body[]. This is the color of the squares in the tooltip labelColors: Color[], labelTextColors: Color[], // 0 opacity is a hidden tooltip opacity: number, legendColorBackground: Color, displayColors: boolean, borderColor: Color, borderWidth: number }
While chart types provide settings to configure the styling of each dataset, you sometimes want to style all datasets the same way. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: arc, lines, points, and rectangles. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.
Point elements are used to represent the points in a line, radar or bubble chart.
Global point options: Chart.defaults.global.elements.point
.
Name | Type | Default | Description |
---|---|---|---|
radius
|
number
|
3
|
Point radius. |
pointStyle
|
string|Image
|
'circle'
|
Point style. |
rotation
|
number
|
0
|
Point rotation (in degrees). |
backgroundColor
|
Color
|
'rgba(0, 0, 0, 0.1)'
|
Point fill color. |
borderWidth
|
number
|
1
|
Point stroke width. |
borderColor
|
Color
|
'rgba(0, 0, 0, 0.1)'
|
Point stroke color. |
hitRadius
|
number
|
1
|
Extra radius added to point radius for hit detection. |
hoverRadius
|
number
|
4
|
Point radius when hovered. |
hoverBorderWidth
|
number
|
1
|
Stroke width when hovered. |
The following values are supported:
'circle'
'cross'
'crossRot'
'dash'
'line'
'rect'
'rectRounded'
'rectRot'
'star'
'triangle'
If the value is an image, that image is drawn on the canvas using drawImage.
Line elements are used to represent the line in a line chart.
Name | Type | Default | Description |
---|---|---|---|
tension
|
number
|
0.4
|
Bézier curve tension ( 0 for no Bézier curves). |
backgroundColor
|
Color
|
'rgba(0, 0, 0, 0.1)'
|
Line fill color. |
borderWidth
|
number
|
3
|
Line stroke width. |
borderColor
|
Color
|
'rgba(0, 0, 0, 0.1)'
|
Line stroke color. |
borderCapStyle
|
string
|
'butt'
|
Line cap style. See MDN. |
borderDash
|
number[]
|
[]
|
Line dash. See MDN. |
borderDashOffset
|
number
|
0.0
|
Line dash offset. See MDN. |
borderJoinStyle
|
string
|
'miter'
|
Line join style. See MDN. |
capBezierPoints
|
boolean
|
true
|
true to keep Bézier control inside the chart, false for no restriction.
|
cubicInterpolationMode
|
string
|
'default'
|
Interpolation mode to apply. See more... |
fill
|
boolean|string
|
true
|
How to fill the area under the line. See area charts. |
stepped
|
boolean
|
false
|
true to show the line as a stepped line ( tension will be ignored).
|
Rectangle elements are used to represent the bars in a bar chart.
Global rectangle options: Chart.defaults.global.elements.rectangle
.
Name | Type | Default | Description |
---|---|---|---|
backgroundColor
|
Color
|
'rgba(0, 0, 0, 0.1)'
|
Bar fill color. |
borderWidth
|
number
|
0
|
Bar stroke width. |
borderColor
|
Color
|
'rgba(0, 0, 0, 0.1)'
|
Bar stroke color. |
borderSkipped
|
string
|
'bottom'
|
Skipped (excluded) border: 'bottom' , 'left' , 'top' or 'right' . |
Arcs are used in the polar area, doughnut and pie charts.
Global arc options: Chart.defaults.global.elements.arc
.
Name | Type | Default | Description |
---|---|---|---|
angle - for polar only
|
number
|
circumference / (arc count)
|
Arc angle to cover. |
backgroundColor
|
Color
|
'rgba(0, 0, 0, 0.1)'
|
Arc fill color. |
borderAlign
|
string
|
'center'
|
Arc stroke alignment. |
borderColor
|
Color
|
'#fff'
|
Arc stroke color. |
borderWidth
|
number
|
2
|
Arc stroke width. |
A line chart is a way of plotting data points on a line.
Below an example of line chart
<div id="MY_SELECTOR"></div>
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);
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);
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', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: 'rgba(170, 194, 77, 0.5)', hoverBackgroundColor: 'rgba(170, 194, 77, 0.5)', borderColor: '#b0cc49', hoverBorderColor: '#b0cc49' }, { label: 'My Second dataset', data: [28, 48, 40, 19, 86, 27, 90], backgroundColor: 'rgba(190, 49, 88, 0.5)', hoverBackgroundColor: 'rgba(190, 49, 88, 0.5)', borderColor: '#ed145b', hoverBorderColor: '#ed145b' } ] };
The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
Name | Type | Scriptable | Indexable | Default |
---|---|---|---|---|
backgroundColor
|
Color
|
Yes | - |
'rgba(0, 0, 0, 0.1)'
|
borderCapStyle
|
string
|
Yes | - |
'butt'
|
borderColor
|
Color
|
Yes | - |
'rgba(0, 0, 0, 0.1)'
|
borderDash
|
number[]
|
Yes | - |
[]
|
borderDashOffset
|
number
|
Yes | - |
0.0
|
borderJoinStyle
|
string
|
Yes | - |
'miter'
|
borderWidth
|
number
|
Yes | - |
3
|
cubicInterpolationMode
|
string
|
Yes | - |
'default'
|
clip
|
number|object
|
- | - |
borderWidth / 2
|
fill
|
boolean|string
|
Yes | - |
true
|
hoverBackgroundColor
|
Color
|
Yes | - |
undefined
|
hoverBorderCapStyle
|
string
|
Yes | - |
undefined
|
hoverBorderColor
|
Color
|
Yes | - |
undefined
|
hoverBorderDash
|
number[]
|
Yes | - |
undefined
|
hoverBorderDashOffset
|
number
|
Yes | - |
undefined
|
hoverBorderJoinStyle
|
string
|
Yes | - |
undefined
|
hoverBorderWidth
|
number
|
Yes | - |
undefined
|
label
|
string
|
- | - |
''
|
lineTension
|
number
|
- | - |
0.4
|
order
|
number
|
- | - |
0
|
pointBackgroundColor
|
Color
|
Yes | Yes |
'rgba(0, 0, 0, 0.1)'
|
pointBorderColor
|
Color
|
Yes | Yes |
'rgba(0, 0, 0, 0.1)'
|
pointBorderWidth
|
number
|
Yes | Yes |
1
|
pointHitRadius
|
number
|
Yes | Yes |
1
|
pointHoverBackgroundColor
|
Color
|
Yes | Yes |
undefined
|
pointHoverBorderColor
|
Color
|
Yes | Yes |
undefined
|
pointHoverBorderWidth
|
number
|
Yes | Yes |
1
|
pointHoverRadius
|
number
|
Yes | Yes |
4
|
pointRadius
|
number
|
Yes | Yes |
3
|
pointRotation
|
number
|
Yes | Yes |
0
|
pointStyle
|
string|Image
|
Yes | Yes |
'circle'
|
showLine
|
boolean
|
- | - |
undefined
|
spanGaps
|
boolean
|
- | - |
undefined
|
steppedLine
|
boolean|string
|
- | - |
false
|
xAxisID
|
string
|
- | - | first x axis |
yAxisID
|
string
|
- | - | first y axis |
Name | Description |
---|---|
label
|
The label for the dataset which appears in the legend and tooltips. |
order
|
The drawing order of dataset. Also affects order for stacking, tooltip, and legend. |
xAxisID
|
The ID of the x axis to plot this dataset on. |
yAxisID
|
The ID of the y axis to plot this dataset on. |
The style of each point can be controlled with the following properties:
Name | Description |
---|---|
pointBackgroundColor
|
The fill color for points. |
pointBorderColor
|
The border color for points. |
pointBorderWidth
|
The width of the point border in pixels. |
pointHitRadius
|
The pixel size of the non-displayed point that reacts to mouse events. |
pointRadius
|
The radius of the point shape. If set to 0, the point is not rendered. |
pointRotation
|
The rotation of the point in degrees. |
pointStyle
|
Style of the point. more... |
All these values, if undefined
, fallback first to the dataset options then to the associated elements.point.*
options.
The style of the line can be controlled with the following properties:
Name | Description |
---|---|
backgroundColor
|
The line fill color. |
borderCapStyle
|
Cap style of the line. See MDN. |
borderColor
|
The line color. |
borderDash
|
Length and spacing of dashes. See MDN. |
borderDashOffset
|
Offset for line dashes. See MDN. |
borderJoinStyle
|
Line joint style. See MDN. |
borderWidth
|
The line width (in pixels). |
clip
|
How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
|
fill
|
How to fill the area under the line. See area charts. |
lineTension
|
Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used. |
showLine
|
If false, the line is not drawn for this dataset. |
spanGaps
|
If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. |
If the value is undefined
, showLine
and spanGaps
fallback to the associated chart configuration options. The rest of the values fallback to the associated elements.line.*
options.
The interaction with each point can be controlled with the following properties:
Name | Description |
---|---|
pointHoverBackgroundColor
|
Point background color when hovered. |
pointHoverBorderColor
|
Point border color when hovered. |
pointHoverBorderWidth
|
Border width of point when hovered. |
pointHoverRadius
|
The radius of the point when hovered. |
The following interpolation modes are supported.
'default'
'monotone'
The 'default'
algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets.
The 'monotone'
algorithm is more suited to y = f(x)
datasets : it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points.
If left untouched ( undefined
), the global options.elements.line.cubicInterpolationMode
property is used.
The following values are supported for steppedLine
.
false
: No Step Interpolation (default)
true
: Step-before Interpolation (eq. 'before'
)
'before'
: Step-before Interpolation
'after'
: Step-after Interpolation
'middle'
: Step-middle Interpolation
If the steppedLine
value is set to anything other than false, lineTension
will be ignored.
Name | Type | Default | Description |
---|---|---|---|
showLines
|
boolean
|
true
|
If false, the lines between points are not drawn. |
spanGaps
|
boolean
|
false
|
If false, NaN data causes a break in the line. |
The data
property of a dataset for a line chart can be passed in two formats.
data: [20, 10]
When the data
array is an array of numbers, the x axis is generally a category. The points are placed onto the axis using their position in the array. When a line chart is created with a category axis, the labels
property of the data object must be specified.
data: [{ x: 10, y: 20 }, { x: 15, y: 10 }]
This alternate is used for sparse datasets, such as those in scatter charts. Each data point is specified using an object containing x
and y
properties.
Line charts can be configured into stacked area charts by changing the settings on the y axis to enable stacking. Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces.
var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200' }); var lineChart = chart.line(data, { scales: { yAxes: [{ stacked: true }] } });
Adds a new data to chart.
lineChart.addData([40, 60], 'August');
Update the dataset's value.
// Would update the first dataset's value of 'March' to be 50 lineChart.data.datasets[0].data[2] = 50; // Calling update now animates the position of March from 90 to 50. lineChart.update();
Remove the first value for all datasets on the chart.
lineChart.removeData();
Name | Description |
---|---|
fluig.chart.click | Triggered when the click ocurrs on a line chart area. |
This event is fired when the click ocurrs on a line chart area. The returned object has the label attributes and the value of the chart area.
$('YOUR_SELECTOR').on('fluig.chart.click', function(data) { // Do something });
A bar chart is a way of showing data as bars
Below an example of bar chart
<div id="MY_SELECTOR"></div>
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);
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);
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', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: 'rgba(170, 194, 77, 0.5)', hoverBackgroundColor: 'rgba(170, 194, 77, 0.5)', borderColor: '#b0cc49', hoverBorderColor: '#b0cc49' }, { label: 'My Second dataset', data: [28, 48, 40, 19, 86, 27, 90], backgroundColor: 'rgba(190, 49, 88, 0.5)', hoverBackgroundColor: 'rgba(190, 49, 88, 0.5)', borderColor: '#ed145b', hoverBorderColor: '#ed145b' } ] };
A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
The bar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the color of the bars is generally set this way.
Name | Type | Scriptable | Indexable | Default |
---|---|---|---|---|
backgroundColor
|
Color
|
Yes | Yes |
'rgba(0, 0, 0, 0.1)'
|
borderColor
|
Color
|
Yes | Yes |
'rgba(0, 0, 0, 0.1)'
|
borderSkipped
|
string
|
Yes | Yes |
'bottom'
|
borderWidth
|
number|object
|
Yes | Yes |
0
|
data
|
object[]
|
- | - | required |
hoverBackgroundColor
|
Color
|
- | Yes |
undefined
|
hoverBorderColor
|
Color
|
- | Yes |
undefined
|
hoverBorderWidth
|
number
|
- | Yes |
1
|
label
|
string
|
- | - |
''
|
order
|
number
|
- | - |
0
|
xAxisID
|
string
|
- | - | first x axis |
yAxisID
|
string
|
- | - | first y axis |
Name | Description |
---|---|
label
|
The label for the dataset which appears in the legend and tooltips. |
order
|
The drawing order of dataset. Also affects order for stacking, tooltip, and legend. |
xAxisID
|
The ID of the x axis to plot this dataset on. |
yAxisID
|
The ID of the y axis to plot this dataset on. |
The style of each bar can be controlled with the following properties:
Name | Description |
---|---|
backgroundColor
|
The bar background color. |
borderColor
|
The bar border color. |
borderSkipped
|
The edge to skip when drawing bar. |
borderWidth
|
The bar border width (in pixels). |
All these values, if undefined
, fallback to the associated elements.rectangle.*
options.
This setting is used to avoid drawing the bar stroke at the base of the fill. In general, this does not need to be changed except when creating chart types that derive from a bar chart.
Note: for negative bars in vertical chart, top
and bottom
are flipped. Same goes for left
and right
in horizontal chart.
Options are:
'bottom'
'left'
'top'
'right'
false
If this value is a number, it is applied to all sides of the rectangle (left, top, right, bottom), except borderSkipped
. If this value is an object, the left
property defines the left border width. Similarly the right
, top
and bottom
properties can also be specified. Omitted borders and borderSkipped
are skipped.
The interaction with each bar can be controlled with the following properties:
Name | Description |
---|---|
hoverBackgroundColor
|
The bar background color when hovered. |
hoverBorderColor
|
The bar border color when hovered. |
hoverBorderWidth
|
The bar border width when hovered (in pixels). |
All these values, if undefined
, fallback to the associated elements.rectangle.*
options.
The bar chart accepts the following configuration from the associated dataset options:
Name | Type | Default | Description |
---|---|---|---|
barPercentage
|
number
|
0.9
|
Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. more... |
categoryPercentage
|
number
|
0.8
|
Percent (0-1) of the available width each category should be within the sample width. more... |
barThickness
|
number|string
|
Manually set width of each bar in pixels. If set to 'flex' , it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. more... |
|
maxBarThickness
|
number
|
Set this to ensure that bars are not sized thicker than this. | |
minBarLength
|
number
|
Set this to ensure that bars have a minimum length in pixels. |
data: { datasets: [{ barPercentage: 0.5, barThickness: 6, maxBarThickness: 8, minBarLength: 2, data: [10, 20, 30, 40, 50, 60, 70] }] };
If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, barPercentage
and categoryPercentage
are ignored.
If set to 'flex'
, the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using barPercentage
and categoryPercentage
. There is no gap when the percentage options are 1. This mode generates bars with different widths when data are not evenly spaced.
If not set (default), the base sample widths are calculated using the smallest interval that prevents bar overlapping, and bars are sized using barPercentage
and categoryPercentage
. This mode always generates bars equally sized.
The bar chart sets unique default values for the following configuration from the associated scale
options:
Name | Type | Default | Description |
---|---|---|---|
offset
|
boolean
|
true
|
If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. |
gridLines.offsetGridLines
|
boolean
|
true
|
If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. more... |
options = { scales: { xAxes: [{ gridLines: { offsetGridLines: true } }] } };
If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a category scale in a bar chart while false for other scales or chart types by default.
The following shows the relationship between the bar percentage option and the category percentage option.
// categoryPercentage: 1.0 // barPercentage: 1.0 Bar: | 1.0 | 1.0 | Category: | 1.0 | Sample: |===========| // categoryPercentage: 1.0 // barPercentage: 0.5 Bar: |.5| |.5| Category: | 1.0 | Sample: |==============| // categoryPercentage: 0.5 // barPercentage: 1.0 Bar: |1.||1.| Category: | .5 | Sample: |==============|
The data
property of a dataset for a bar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.
data: [20, 10]
You can also specify the dataset as x/y coordinates when using the time scale.
data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]
You can also specify the dataset for a bar chart as arrays of two numbers. This will force rendering of bars with gaps between them (floating-bars). First and second numbers in array will correspond the start and the end point of a bar respectively.
data: [[5,6], [-3,-6]]
Bar charts can be configured into stacked bar charts by changing the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.
var chart = FLUIGC.chart('#MY_SELECTOR', { id: 'set_an_id_for_my_chart', width: '700', height: '200' }); var lineChart = chart.bar(data, { scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } });
The following dataset properties are specific to stacked bar charts.
Name | Type | Description |
---|---|---|
stack
|
string
|
The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). |
A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
<div id="MY_SELECTOR"></div>
Below is the basic configuration to use the horizontal bar chart.
var chart = FLUIGC.chart('#MY_SELECTOR'); // call the horizontal bar function var barChart = chart.horizontalBar(data, options);
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 horizontal bar function var horizontalBarChart = chart.horizontalBar(data, options);
The configuration options for the horizontal bar chart are the same as for the bar chart. However, any options specified on the x axis in a bar chart, are applied to the y axis in a horizontal bar chart.
Adds a new data to chart.
horizontalBarChart.addData([40, 60], 'August');
Update the dataset's value.
// Would update the first dataset's value of 'March' to be 50 horizontalBarChart.data.datasets[0].data[2] = 50; // Calling update now animates the position of March from 90 to 50. horizontalBarChart.update();
Remove the first value for all datasets on the chart.
horizontalBarChart.removeData();
Name | Description |
---|---|
fluig.chart.click | Triggered when the click ocurrs on a bar chart area. |
This event is fired when the click ocurrs on a bar chart area. The returned object has the label attributes and the value of the chart area.
$('YOUR_SELECTOR').on('fluig.chart.click', function(data) { // Do something });
A radar chart is a way of showing multiple data points and the variation between them.
Below an example of radar chart
<div id="MY_SELECTOR"></div>
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);
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);
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: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: 'rgba(170, 194, 77, 0.5)', hoverBackgroundColor: 'rgba(170, 194, 77, 0.5)', borderColor: '#b0cc49', hoverBorderColor: '#b0cc49' }, { label: 'My Second dataset', data: [28, 48, 40, 19, 86, 27, 90], backgroundColor: 'rgba(190, 49, 88, 0.5)', hoverBackgroundColor: 'rgba(190, 49, 88, 0.5)', borderColor: '#ed145b', hoverBorderColor: '#ed145b' } ] };
The radar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
Name | Type | Scriptable | Indexable | Default |
---|---|---|---|---|
backgroundColor
|
Color
|
Yes | - |
'rgba(0, 0, 0, 0.1)'
|
borderCapStyle
|
string
|
Yes | - |
'butt'
|
borderColor
|
Color
|
Yes | - |
'rgba(0, 0, 0, 0.1)'
|
borderDash
|
number[]
|
Yes | - |
[]
|
borderDashOffset
|
number
|
Yes | - |
0.0
|
borderJoinStyle
|
string
|
Yes | - |
'miter'
|
borderWidth
|
number
|
Yes | - |
3
|
hoverBackgroundColor
|
Color
|
Yes | - |
undefined
|
hoverBorderCapStyle
|
string
|
Yes | - |
undefined
|
hoverBorderColor
|
Color
|
Yes | - |
undefined
|
hoverBorderDash
|
number[]
|
Yes | - |
undefined
|
hoverBorderDashOffset
|
number
|
Yes | - |
undefined
|
hoverBorderJoinStyle
|
string
|
Yes | - |
undefined
|
hoverBorderWidth
|
number
|
Yes | - |
undefined
|
fill
|
boolean|string
|
Yes | - |
true
|
label
|
string
|
- | - |
''
|
order
|
number
|
- | - |
0
|
lineTension
|
number
|
- | - |
0
|
pointBackgroundColor
|
Color
|
Yes | Yes |
'rgba(0, 0, 0, 0.1)'
|
pointBorderColor
|
Color
|
Yes | Yes |
'rgba(0, 0, 0, 0.1)'
|
pointBorderWidth
|
number
|
Yes | Yes |
1
|
pointHitRadius
|
number
|
Yes | Yes |
1
|
pointHoverBackgroundColor
|
Color
|
Yes | Yes |
undefined
|
pointHoverBorderColor
|
Color
|
Yes | Yes |
undefined
|
pointHoverBorderWidth
|
number
|
Yes | Yes |
1
|
pointHoverRadius
|
number
|
Yes | Yes |
4
|
pointRadius
|
number
|
Yes | Yes |
3
|
pointRotation
|
number
|
Yes | Yes |
0
|
pointStyle
|
string|Image
|
Yes | Yes |
'circle'
|
spanGaps
|
boolean
|
- | - |
undefined
|
Name | Description |
---|---|
label
|
The label for the dataset which appears in the legend and tooltips. |
order
|
The drawing order of dataset. |
The style of each point can be controlled with the following properties:
Name | Description |
---|---|
pointBackgroundColor
|
The fill color for points. |
pointBorderColor
|
The border color for points. |
pointBorderWidth
|
The width of the point border in pixels. |
pointHitRadius
|
The pixel size of the non-displayed point that reacts to mouse events. |
pointRadius
|
The radius of the point shape. If set to 0, the point is not rendered. |
pointRotation
|
The rotation of the point in degrees. |
pointStyle
|
Style of the point. more... |
All these values, if undefined
, fallback first to the dataset options then to the associated elements.point.*
options.
The style of the line can be controlled with the following properties:
Name | Description |
---|---|
backgroundColor
|
The line fill color. |
borderCapStyle
|
Cap style of the line. See MDN. |
borderColor
|
The line color. |
borderDash
|
Length and spacing of dashes. See MDN. |
borderDashOffset
|
Offset for line dashes. See MDN. |
borderJoinStyle
|
Line joint style. See MDN. |
borderWidth
|
The line width (in pixels). |
fill
|
How to fill the area under the line. See area charts. |
lineTension
|
Bezier curve tension of the line. Set to 0 to draw straightlines. |
spanGaps
|
If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. |
If the value is undefined
, spanGaps
fallback to the associated chart configuration options. The rest of the values fallback to the associated elements.line.*
options.
The interaction with each point can be controlled with the following properties:
Name | Description |
---|---|
pointHoverBackgroundColor
|
Point background color when hovered. |
pointHoverBorderColor
|
Point border color when hovered. |
pointHoverBorderWidth
|
Border width of point when hovered. |
pointHoverRadius
|
The radius of the point when hovered. |
Name | Type | Default | Description |
---|---|---|---|
spanGaps
|
boolean
|
false
|
If false, NaN data causes a break in the line. |
The radar chart supports only a single scale. The options for this scale are defined in the scale
property. The options for this scale are defined in the scale
property, which can be referenced from the Linear Radial Axis page.
options = { scale: { angleLines: { display: false }, ticks: { suggestedMin: 50, suggestedMax: 100 } } };
The data
property of a dataset for a radar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index.
data: [20, 10]
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.
data: { labels: ['Running', 'Swimming', 'Eating', 'Cycling'], datasets: [{ data: [20, 10, 4, 2] }] }
Adds a new data to chart.
radarChart.addData([40, 60], 'Working');
Update the dataset's value.
// Would update the first dataset's value of 'March' to be 50 radarChart.data.datasets[0].data[2] = 50; // Calling update now animates the position of March from 90 to 50. radarChart.update();
Remove the first value for all datasets on the chart.
radarChart.removeData();
Name | Description |
---|---|
fluig.chart.click | Triggered when the click ocurrs on a radar chart area. |
This event is fired when the click ocurrs on a radar chart area. The returned object has the label attributes and the value of the chart area.
$('YOUR_SELECTOR').on('fluig.chart.click', function(data) { // Do something });
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.
Below an example of polar chart
<div id="MY_SELECTOR"></div>
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);
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);
The chart data you pass in an array of objects, with a value and a colour.
var data = { labels: ['bpm', 'ecm', 'social', 'mall', 'wcm'], datasets: [ { label: 'My First Dataset', data: [300, 50, 100, 40, 120], backgroundColor: ['#b0cc49', '#ed145b', '#c67926', '#d3a82f', '#303030'], hoverBackgroundColor: ['#b0cc49', '#ed145b', '#c67926', '#d3a82f', '#303030'], borderColor: ['rgba(170, 194, 77, 0.5)', 'rgba(190, 49, 88, 0.5)', 'rgba(198, 121, 38, 0.5)', 'rgba(211, 168, 47, 0.5)', 'rgba(43, 43, 42, 0.5)'], hoverBorderColor: ['rgba(170, 194, 77, 0.5)', 'rgba(190, 49, 88, 0.5)', 'rgba(198, 121, 38, 0.5)', 'rgba(211, 168, 47, 0.5)', 'rgba(43, 43, 42, 0.5)'] } ] };
The following options can be included in a polar area chart dataset to configure options for that specific dataset.
Name | Type | Scriptable | Indexable | Default |
---|---|---|---|---|
backgroundColor
|
Color
|
Yes | Yes |
'rgba(0, 0, 0, 0.1)'
|
borderAlign
|
string
|
Yes | Yes |
'center'
|
borderColor
|
Color
|
Yes | Yes |
'#fff'
|
borderWidth
|
number
|
Yes | Yes |
2
|
data
|
number[]
|
- | - | required |
hoverBackgroundColor
|
Color
|
Yes | Yes |
undefined
|
hoverBorderColor
|
Color
|
Yes | Yes |
undefined
|
hoverBorderWidth
|
number
|
Yes | Yes |
undefined
|
The style of each arc can be controlled with the following properties:
Name | Description |
---|---|
backgroundColor
|
arc background color. |
borderColor
|
arc border color. |
borderWidth
|
arc border width (in pixels). |
All these values, if undefined
, fallback to the associated elements.arc.*
options.
The following values are supported for borderAlign
.
'center'
(default)
'inner'
When 'center'
is set, the borders of arcs next to each other will overlap. When 'inner'
is set, it is guaranteed that all the borders are not overlap.
The interaction with each arc can be controlled with the following properties:
Name | Description |
---|---|
hoverBackgroundColor
|
arc background color when hovered. |
hoverBorderColor
|
arc border color when hovered. |
hoverBorderWidth
|
arc border width when hovered (in pixels). |
All these values, if undefined
, fallback to the associated elements.arc.*
options.
These are the customisation options specific to Polar Area charts. These options are merged with the global chart default options, and form the options of the chart.
Name | Type | Default | Description |
---|---|---|---|
startAngle
|
number
|
-0.5 * Math.PI
|
Starting angle to draw arcs for the first item in a dataset. |
animation.animateRotate
|
boolean
|
true
|
If true, the chart will animate in with a rotation animation. This property is in the options.animation object. |
animation.animateScale
|
boolean
|
true
|
If true, will animate scaling the chart from the center outwards. |
For a polar area chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.
You also need to specify an array of labels so that tooltips appear correctly for each slice.
data = { datasets: [{ data: [10, 20, 30] }], // These labels appear in the legend and in the tooltips when hovering different arcs labels: [ 'Red', 'Yellow', 'Blue' ] };
Adds a new data to chart.
polarChart.addData([40], 'Purple');
Update the dataset's value.
polarChart.data.datasets[0].data[3] = 50; polarChart.update();
Remove the first value for all datasets on the chart.
polarChart.removeData();
Name | Description |
---|---|
fluig.chart.click | Triggered when the click ocurrs on a polar chart area. |
This event is fired when the click ocurrs on a polar chart area. The returned object has the label attributes and the value of the chart area.
$('YOUR_SELECTOR').on('fluig.chart.click', function(data) { // Do something });
Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
They are excellent at showing the relational proportions between data.
Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutoutPercentage
. This equates what percentage of the inner should be cut out. This defaults to 0
for pie charts, and 50
for doughnuts.
They are also registered under two aliases in the Chart
core. Other than their different default value, and different alias, they are exactly the same.
Doughnut chart is divided into segments, the arc of each segment shows the proportional value of each piece of data.
Below an example of doughnut chart
<div id="MY_SELECTOR"></div>
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);
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);
For a doughnut chart, you must pass in an array of objects with a value and a color property.
var data = { labels: ['bpm', 'ecm', 'social', 'mall', 'wcm'], datasets: [ { label: 'My First Dataset', data: [300, 50, 100, 40, 120], backgroundColor: ['#b0cc49', '#ed145b', '#c67926', '#d3a82f', '#303030'], hoverBackgroundColor: ['#b0cc49', '#ed145b', '#c67926', '#d3a82f', '#303030'], borderColor: ['rgba(170, 194, 77, 0.5)', 'rgba(190, 49, 88, 0.5)', 'rgba(198, 121, 38, 0.5)', 'rgba(211, 168, 47, 0.5)', 'rgba(43, 43, 42, 0.5)'], hoverBorderColor: ['rgba(170, 194, 77, 0.5)', 'rgba(190, 49, 88, 0.5)', 'rgba(198, 121, 38, 0.5)', 'rgba(211, 168, 47, 0.5)', 'rgba(43, 43, 42, 0.5)'] } ] };
Pie chart is divided into segments, the arc of each segment shows the proportional value of each piece of data.
Below an example of pie chart
<div id="MY_SELECTOR"></div>
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);
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);
For a pie chart, you must pass in an array of objects with a value and a color property.
var data = { labels: ['bpm', 'ecm', 'social', 'mall', 'wcm'], datasets: [ { label: 'My First Dataset', data: [300, 50, 100, 40, 120], backgroundColor: ['#b0cc49', '#ed145b', '#c67926', '#d3a82f', '#303030'], hoverBackgroundColor: ['#b0cc49', '#ed145b', '#c67926', '#d3a82f', '#303030'], borderColor: ['rgba(170, 194, 77, 0.5)', 'rgba(190, 49, 88, 0.5)', 'rgba(198, 121, 38, 0.5)', 'rgba(211, 168, 47, 0.5)', 'rgba(43, 43, 42, 0.5)'], hoverBorderColor: ['rgba(170, 194, 77, 0.5)', 'rgba(190, 49, 88, 0.5)', 'rgba(198, 121, 38, 0.5)', 'rgba(211, 168, 47, 0.5)', 'rgba(43, 43, 42, 0.5)'] } ] };
The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colours of the dataset's arcs are generally set this way.
Name | Type | Scriptable | Indexable | Default |
---|---|---|---|---|
backgroundColor
|
Color
|
Yes | Yes |
'rgba(0, 0, 0, 0.1)'
|
borderAlign
|
string
|
Yes | Yes |
'center'
|
borderColor
|
Color
|
Yes | Yes |
'#fff'
|
borderWidth
|
number
|
Yes | Yes |
2
|
data
|
number[]
|
- | - | required |
hoverBackgroundColor
|
Color
|
Yes | Yes |
undefined
|
hoverBorderColor
|
Color
|
Yes | Yes |
undefined
|
hoverBorderWidth
|
number
|
Yes | Yes |
undefined
|
weight
|
number
|
- | - |
1
|
The style of each arc can be controlled with the following properties:
Name | Description |
---|---|
backgroundColor
|
arc background color. |
borderColor
|
arc border color. |
borderWidth
|
arc border width (in pixels). |
weight
|
The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values. |
All these values, if undefined
, fallback to the associated elements.arc.*
options.
The following values are supported for borderAlign
.
'center'
(default)
'inner'
When 'center'
is set, the borders of arcs next to each other will overlap. When 'inner'
is set, it is guaranteed that all borders will not overlap.
The interaction with each arc can be controlled with the following properties:
Name | Description |
---|---|
hoverBackgroundColor
|
arc background color when hovered. |
hoverBorderColor
|
arc border color when hovered. |
hoverBorderWidth
|
arc border width when hovered (in pixels). |
All these values, if undefined
, fallback to the associated elements.arc.*
options.
These are the customisation options specific to Pie & Doughnut charts. These options are merged with the global chart configuration options, and form the options of the chart.
Name | Type | Default | Description |
---|---|---|---|
cutoutPercentage
|
number
|
50 - for doughnut, 0 - for pie
|
The percentage of the chart that is cut out of the middle. |
rotation
|
number
|
-0.5 * Math.PI
|
Starting angle to draw arcs from. |
circumference
|
number
|
2 * Math.PI
|
Sweep to allow arcs to cover. |
animation.animateRotate
|
boolean
|
true
|
If true, the chart will animate in with a rotation animation. This property is in the options.animation object. |
animation.animateScale
|
boolean
|
false
|
If true, will animate scaling the chart from the center outwards. |
We can also change these default values for each Doughnut type that is created, this object is available at Chart.defaults.doughnut
. Pie charts also have a clone of these defaults available to change at Chart.defaults.pie
, with the only difference being cutoutPercentage
being set to 0.
For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.
You also need to specify an array of labels so that tooltips appear correctly.
data = { datasets: [{ data: [10, 20, 30] }], // These labels appear in the legend and in the tooltips when hovering different arcs labels: [ 'Red', 'Yellow', 'Blue' ] };
Adds a new data to chart.
// doughnut doughnutChart.addData([40], 'Purple'); // pie pieChart.addData([40], 'Purple');
Update the dataset's value.
// doughnut doughnutChart.data.datasets[0].data[3] = 50; doughnutChart.update(); // pie pieChart.data.datasets[0].data[3] = 50; pieChart.update();
Remove the first value for all datasets on the chart.
// doughnut doughnutChart.removeData(); // pie pieChart.removeData();
Name | Description |
---|---|
fluig.chart.click | Triggered when the click ocurrs on a doughnut/pie chart area. |
This event is fired when the click ocurrs on a doughnut/pie chart area. The returned object has the label attributes and the value of the chart area.
$('YOUR_SELECTOR').on('fluig.chart.click', function(data) { // Do something });
Allows the creation of a chart style of a manometer
Below an example of gauge chart
<div id="MY_SELECTOR"></div>
Below is the basic configuration to use the gauge chart.
var chart = FLUIGC.chart('#MY_SELECTOR'); // call the gauge function var chartGauge = chart.gauge();
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', borderColor: '#E0E0E0', generateGradient: true });
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 |
borderColor | string | '#ed145b' | To see which ones work best for you |
generateGradient | boolean | true | Generate Gradient |
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 |
Set max gauge value.
gaugeChart.maxValue = 3000;
Set animation speed (32 is default value).
gaugeChart.animationSpeed = 74;
Set actual value.
gaugeChart.set(925);
Allows the creation of a chart style of a donut
Below an example of donut chart
<div id="MY_SELECTOR"></div>
Below is the basic configuration to use the donut chart.
var chart = FLUIGC.chart('#MY_SELECTOR'); // call the donut function var chartDonut = chart.donut();
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 });
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 |
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 |
Set max gauge value.
donutChart.maxValue = 3000;
Set animation speed (32 is default value).
donutChart.animationSpeed = 74;
Set actual value.
donutChart.set(925);
A mixed chart is a mix of line chart and bar chart.
Below an example of mixed chart
<div id="MY_SELECTOR"></div>
Below is the basic configuration to use the line chart.
var chart = FLUIGC.chart('#MY_SELECTOR'); // call the mixed function var mixedChart = chart.mixed(data, options);
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 mixed function var mixedChart = chart.mixed(data, options);
The mixed 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', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: 'rgba(170, 194, 77, 0.5)', hoverBackgroundColor: 'rgba(170, 194, 77, 0.5)', borderColor: '#b0cc49', hoverBorderColor: '#b0cc49' }, { label: 'My Second dataset', type: 'bar', data: [28, 48, 40, 19, 86, 27, 90], backgroundColor: 'rgba(190, 49, 88, 0.5)', hoverBackgroundColor: 'rgba(190, 49, 88, 0.5)', borderColor: '#ed145b', hoverBorderColor: '#ed145b' } ] };
By default, datasets are drawn so that first one is top-most. This can be altered by specifying order
option to datasets. order
defaults to 0
.
var data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', type: 'line', data: [65, 59, 80, 81, 56, 55, 40] // this dataset is drawn below order: 1 }, { label: 'My Second dataset', type: 'bar', data: [28, 48, 40, 19, 86, 27, 90], // this dataset is drawn on top order: 2 } ] };
You can use the same attributes and methods used to line charts and bar.
Name | Description |
---|---|
fluig.chart.click | Triggered when the click ocurrs on a mixed chart area. |
This event is fired when the click ocurrs on a mixed chart area. The returned object has the label attributes and the value of the chart area.
$('YOUR_SELECTOR').on('fluig.chart.click', function(data) { // Do something });