Graphs and charts

Available Sass Variables and default values

$chart-pie-font-size: $font-size-small
$chart-pie-color: $text-color-dark

$chart-donut-font-size: $font-size-small
$chart-donut-color: $text-color-dark
$chart-donut-width: 40px

$chart-line-font-size: $font-size-small
$chart-line-color: $text-color-dark
$chart-line-thickness: 3px
$chart-line-point-radius: 5

$chart-empty-background-color: $silver

$chart-tooltip-padding: 5px 10px
$chart-tooltip-color: $wt
$chart-tooltip-border-radius: $base-border-radius
$chart-tooltip-background-color: rgba(0,0,0,.5)
$chart-tooltip-border: 1px solid $wt
$chart-tooltip-font-size: $font-size-small

Examples

Chart and Graph setup

To create a chart/graph, add data-chart-type="TYPE" to any block element. Replace TYPE with pie, donut, line, bar-horiz, or bar-vert

You then will need to supply the data for the chart. Data is supplied via another data attribute: data-chart-data

Be sure to check out the global javascript variables for additional customization options.

To control the size of the graphs, you'll generally want to adjust the height of the chart element. You can use the .h## classes provided by Gaudi to easily set the graphable area: div.h200

Pie Chart

Pie chart data can simply be an array of numbers:

div data-chart-type='pie' data-chart-data="[2,3,4,5,6]"

To change the labels, add: data-chart-labels

data-chart-labels='["A", "B", "C", "D", "E"]'

You can disable labels with data-chart-labels='false'

Donut Chart

Donut charts act exactly as a pie chart, accepting the same data-attributes. To create a Donut chart, use: data-chart-type="donut"

If you want to change the width of the donut, adjust the default variable in gaudi/init.coffee. Since the chart is an SVG, Javascript needs to know the width.

NOTE: Pie charts and donut charts break if all values are 0. A class of empty-chart can be added to a wrapper to make a chart display as empty (usually a grey color).

- if data.sum == 0
  .empty-chart data-chart-type='donut' data-chart-data='[1]'
- else
  div data-chart-data="[2,3,4,5,6]" data-chart-type='donut'

Line and bar charts simply draw an empty grid with no errors.

Line Chart

Basic line charts consist of a 2D array of data:

[[1,2,4,3]]

To add more lines, add datasets to the 2D array of data:

[[1,2,4,3],[2,3,5,1],[0,4,2,3]]

Adding labels is the same process as for other charts, by adding a data-chart-labels array.

Note: If you need extra padding on any side of a line chart, you can set it globally by setting gaudi.chartPadding to an object with the padding specified.

gaudi.chartPadding = {right: 20}

If you need the labels to be integers only, add:

data-chart-integer-only="xy"
data-chart-integer-only="x"
data-chart-integer-only="y"

Bar Chart

Bar chart options are almost identical to Line charts. Provide a 2D array of data:

[[1,2,4,3]]

Multi bar data work the same way as Line Charts.

[[1,2,4,3],[2,3,5,1],[0,4,2,3]]

Labels and integer-only options work the same way as Line Charts.

Horizontal Bar Charts

Simply set the data-chart-type to bar-horiz. Otherwise, exactly as a vertical bar chart.

Tooltips

Any chart can have tooltips applied. If data-chart-tooltips='true' is present on a chart element, tooltips will be displayed on hover, and labels will be disabled. By default, the value will be displayed in the tooltip.

To add a label before the value, pass in an array of objects as the chart data, each object including 'name'

[{
  "value": 2,
  "name": "Turtle Doves"
}, {
  "value": 3,
  "name": "French Hens"
}, {
  "value": 4,
  "name": "Calling Birds"
}, {
  "value": 5,
  "name": "Gold Rings"
}, {
  "value": 6,
  "name": "Geese a-Laying"
}]

For tooltips with content, pass in an array of objects as the chart data, each object including 'meta'

[{
  "value": 2,
  "meta": "<span>Type: Turtle Doves</span><hr/><span>Count: 2</span>"
}, {
  "value": 3,
  "meta": "<span>Type: French Hens</span><hr/><span>Count: 3</span>"
}, {
  "value": 4,
  "meta": "<span>Type: Calling Birds</span><hr/><span>Count: 4</span>"
}, {
  "value": 5,
  "meta": "<span>Type: Gold Rings</span><hr/><span>Count: 5</span>"
}, {
  "value": 6,
  "meta": "<span>Type: Geese a-Laying</span><hr/><span>Count: 6</span>"
}]