Line Chart

Description: User Story
—-

As a user, I should be able to see a line graph as part of a Result.

**[Zeplin Link](https://zpl.io/2pYGLoV)**

– Chart Title: Summary Historical Results
– Legend with series labels
– labels should matching the color of the line
– clicking on the labels should toggle the series line on and off and lower opacity of the legend label to 25% when in the off position
– Y-axis shows result scores
– min label = min result score
– max label = max result score
– X-axis shows dates
– min label: oldest date
– max label: most recent date
– dates should be equally distributed across x axis (large gaps in time should not display as large gaps in x-axis)
– Plot data points
– Connect the dots with lines the same color as the series label
– The graph should load showing the last 7 data points
– Minimum zoom should be 7 data points
– Maximum zoom should be 2 data points
– User can swipe left and right to scroll through the graph if it doesn’t fit in one view
– User can pinch to zoom horizontally
– Tapping on a data point should show a label with:
– Series title
– Score
– Date

—-

Web Code – For reference
—-
https://github.com/TangoGroup/polymer/blob/mainline/epoxy/app/components/graphs/eg-trend-graph.html
https://github.com/TangoGroup/polymer/blob/mainline/epoxy/app/components/graphs/eg-trend-graph.js

Complex charting in here and also some additional data fetching for historical scores

Owner: