Chart (experimental) example

Multiple rows of data

Where more than one series is shown on a chart, hide_legend will not work.

How it looks (preview)

Page views chart

This chart shows page views for January in different years.

Skip to "Page views chart" data table

View data as a table

	January 2015	January 2016	January 2017
1st	5	5	31
2nd	119	8	81
3rd	74	37	12
4th	82	50	15
5th	27	43	52
6th	45	29	61
7th	11	67	143
8th	21	61	27
9th	67	14	18
10th	43	91	34

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  heading: "Page views chart",
  h_axis_title: "Day",
  v_axis_title: "Views",
  description: "This chart shows page views for January in different years.",
  keys: [
    "1st",
    "2nd",
    "3rd",
    "4th",
    "5th",
    "6th",
    "7th",
    "8th",
    "9th",
    "10th"
  ],
  rows: [
    {
      label: "January 2015",
      values: [
        5,
        119,
        74,
        82,
        27,
        45,
        11,
        21,
        67,
        43
      ]
    },
    {
      label: "January 2016",
      values: [
        5,
        8,
        37,
        50,
        43,
        29,
        67,
        61,
        14,
        91
      ]
    },
    {
      label: "January 2017",
      values: [
        31,
        81,
        12,
        15,
        52,
        61,
        143,
        27,
        18,
        34
      ]
    }
  ]
} %>