diff --git a/app/assets/javascripts/dependencies.js b/app/assets/javascripts/dependencies.js
index 6c8378d368..1996052ccc 100644
--- a/app/assets/javascripts/dependencies.js
+++ b/app/assets/javascripts/dependencies.js
@@ -8,3 +8,5 @@
//= require govuk_publishing_components/components/step-by-step-nav
//= require govuk_publishing_components/components/table
//= require govuk_publishing_components/components/tabs
+
+//= require govuk_publishing_components/components/chart
diff --git a/app/models/block/statistics.rb b/app/models/block/statistics.rb
index f015940166..74652fde51 100644
--- a/app/models/block/statistics.rb
+++ b/app/models/block/statistics.rb
@@ -16,6 +16,10 @@ def y_axis_label
data["y_axis_label"]
end
+ def hide_legend
+ data["hide_legend"]
+ end
+
def row_header
CSV.read(csv_file_path, headers: true).headers
end
diff --git a/app/views/landing_page/blocks/_statistics.html.erb b/app/views/landing_page/blocks/_statistics.html.erb
index 43fb7502c5..fa48274fbb 100644
--- a/app/views/landing_page/blocks/_statistics.html.erb
+++ b/app/views/landing_page/blocks/_statistics.html.erb
@@ -1,7 +1,38 @@
-
Placeholder statistics partial
-<%= block.row_header %>
-
-<%= block.rows %>
-
-<%= link_to block.data["data_source_link_text"], block.data_source_link %>
+<%
+ add_gem_component_stylesheet("chart")
+
+ rows = []
+ lines = {}
+ keys = []
+ block.rows.each_with_index do |row, i|
+ keys << row["Date"]
+ if lines.key?(row["variable"].to_sym)
+ lines[row["variable"].to_sym][:values] << row["value"].to_i
+ else
+ lines[row["variable"].to_sym] = {
+ label: row["Date"],
+ values: [
+ row["value"].to_i
+ ]
+ }
+ end
+
+ end
+ lines.each do |key, array|
+ rows << {
+ label: key.to_s,
+ values: lines[key][:values]
+ }
+ end
+%>
+
+<%= render "govuk_publishing_components/components/chart", {
+ chart_heading: block.title,
+ h_axis_title: block.x_axis_label,
+ v_axis_title: block.y_axis_label,
+ hide_legend: block.hide_legend,
+ keys: keys,
+ rows: rows,
+} %>
+<%= link_to block.data["data_source_link_text"], block.data_source_link %>
diff --git a/lib/data/landing_page_content_items/landing_page.yaml b/lib/data/landing_page_content_items/landing_page.yaml
index 2ac3c6742d..6cf444c8bb 100644
--- a/lib/data/landing_page_content_items/landing_page.yaml
+++ b/lib/data/landing_page_content_items/landing_page.yaml
@@ -60,14 +60,15 @@ blocks:
number: £43
label: Cost of a cup of coffee in Covent Garden
- type: statistics
- title: "Chart to visually represent data"
+ title: "Chart to visually represent some data"
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
+ hide_legend: true
csv_file: "data_one.csv"
data_source_link_text: "Data source"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
- type: statistics
- title: "Chart to visually represent data"
+ title: "Chart to visually represent some more data"
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_two.csv"