-
Notifications
You must be signed in to change notification settings - Fork 6
Chart rendering and gotchas
Charts on Energy Sparks are rendered using Highcharts: https://www.highcharts.com/
The longest running method of displaying charts on Energy Sparks is to make a request to the school’s chart endpoint with a chart_type and some basic configuration options and render resulting chart JSON. This method allows us to display multiple unrelated charts on one page whilst not including the chart generation time in the page load time.
In some areas of the site we receive sections of content from the analytics where the chart data is pre-calculated and can be passed to the chart display code directly. This is achieved by adding the JSON the data to an HTML data attribute on the chart wrapper element in the format that would be returned from the URL endpoint. The adult analysis pages use this method.
This way of rendering charts is a recent addition to the codebase and there may be other areas of the site that are suited to this style of rendering that have not been switched over yet.
It is possible to navigate the charts using a series of chart “transformations” which include moving backwards and forwards one time period or drilling down to a lower level of data. The charts javascript holds a stack of operations from that initial chart starting point and sends the full stack to the server to process. Some attempt is made to collapse additive operations down (e.g. clicking twice to move forward two periods would be collapsed down to a single “move forward 2” operation rather than 2 “move forward 1” operations).
The chart data response includes fields that tell the JS which operations are available, the values of which come directly from the analytics.
A standard chart response can provide a URL where annotations for a chart can be accessed. These annotations are then loaded in a separate AJAX request to keep the original request smaller and simpler.
There is some configuration in the charts JS that sets the format of the tooltips that appear when hovering over the data points. It’s not always possible to get the appropriate data from the server response to render the required tooltip.
The way the data on the charts is displayed is controlled by a combination of the analytics code, the Rails app code and the browser JS code. There is a work-in-progress ticket at time of writing to move as much re-formatting of data to the analytics library to ensure consistency across all outputs.
Charts that have 2 y-axis are often expect to have their y-axis align at zero. There is no way in Highcharts for this to happen automatically and it re-scales each axis to provide the appropriate min and max for the data displayed in that axis, often meaning that the axis cross at unusual points. Some work has been done to increase the scales of the y2-axis to match the y-axis so they cross at 0. While this works in some circumstances, Highcharts in some instances re-scales the y2-axis again to keep the data between each axis tick consistent which then throws off the scales again. Axis crossing at 0 is the most requested feature on Highcharts and has been for some time!
Colours for data series in the charts is either done explicitly based on known series names, which then falls back to a best-guess process based on the series name which then falls back to a selection of random colours. To set a particular colour for a data series the series name must be known in advance.
If the chart fails to load then the chart wrapper content is replaced by an error message. This results in further interaction with the chart being impossible.