Chart (experimental) example

Horizontal table

Reorient the table to better suit the output of some data sets.

How it looks (preview)

Page views chart

This chart shows page views for January in different years.

This chart is a visual representation of the data available in the table.
Skip to "Page views chart" data table
View data as a table
Data table for "Page views chart"
1st 2nd 3rd 4th 5th 6th 7th
January 2015 5 119 74 117 33 89 79
January 2016 3 8 37 82 118 85 80

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  table_direction: "horizontal",
  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"
  ],
  rows: [
    {
      label: "January 2015",
      values: [
        5,
        119,
        74,
        117,
        33,
        89,
        79
      ]
    },
    {
      label: "January 2016",
      values: [
        3,
        8,
        37,
        82,
        118,
        85,
        80
      ]
    }
  ]
} %>