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)

Data table

Data table for "Page views chart"
	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
      ]
    }
  ]
} %>