Chart (experimental) example
Scale y axis based on data
By default the Y-axis will always start at zero, but this may not always be required.
If there are empty items in the data the chart line will either discontinue or leave a gap, as shown.
How it looks (preview)
Page views chart
This chart shows page views for January 2015.
This chart is a visual representation of the data available in the table.
View data as a table
| 2015-01-01 | 2015-01-02 | 2015-01-03 | 2015-01-04 | 2015-01-05 | 2015-01-06 | 2015-01-07 | 2015-01-08 | 2015-01-09 | 2015-01-10 | 2015-01-11 | 2015-01-12 | 2015-01-13 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| January 2015 | 1,500 | 1,190 | 1,740 | 1,820 | 1,270 | 1,450 | 1,110 | 1,210 | 1,670 | 1,430 | 1,352 |
How to call this example
<%= render "govuk_publishing_components/components/chart", {
chart_heading: "Page views chart",
h_axis_title: "Day",
v_axis_title: "Views",
chart_overview: "This chart shows page views for January 2015.",
hide_legend: true,
y_axis_auto_adjust: true,
keys: [
"2015-01-01",
"2015-01-02",
"2015-01-03",
"2015-01-04",
"2015-01-05",
"2015-01-06",
"2015-01-07",
"2015-01-08",
"2015-01-09",
"2015-01-10",
"2015-01-11",
"2015-01-12",
"2015-01-13"
],
rows: [
{
label: "January 2015",
values: [
1500,
1190,
1740,
1820,
1270,
null,
null,
1450,
1110,
1210,
1670,
1430,
1352
]
}
]
} %>