Charts and Equivalencies

There are 2 places that we generate charts, bill generation and on the frontend dashboards. Both make use of the same underlying library: HighCharts. Additionally on the frontend, we show equivalency data to connect how much energy has been generated by a project group to associated metrics for environmental benefit. Below are details of

1. how we describe charts using HighCharts
2. how those charts get displayed
3. how equivalencies are calculated

Highcharts Overview

Highcharts is a very expressive charting library. It is an open source package free to personal developers and not-for-profit cases. Every chart is described by an options object. An example is shown below. These objects are then fed into some sort of renderer, whether it be something that saves it to an image or whether it render it in React. These options objects can be found in src/lib/highcharts in peoplepower-web and utils/charts in peoplepower-node.

Sample Options Object:

const getBarChartForData = (dates, data) => {
  return {
    chart: {
      type: 'column'
    },
    credits: {
      enabled: false
    },
    title: {
      text: 'Energy Production During Bill Period'
    },
    xAxis: {
      categories: dates
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Production (kWh)'
      }
    },

    plotOptions: {
      column: {
        color: PP_PINK,
        pointPadding: 0.2,
        borderWidth: 0
      }
    },
    series: [
      {
        showInLegend: false,
        data
      }
    ]
  };
};

This is the function used to create the chart that is shown on page one of the bill. It takes in an array of data-points and an array of dates. If the design of the chart needs to be changed, one can refer to the Highcharts docs.

Frontend Rendering

On peoplepower-web, we use the highcharts-react-official package to render the charts. There are two components that act as containers for the chart: ProductionEquivalenciesChart and EffectiveCostChart.

The production chart shows the sum of all data for every solar project on a month by month basis.

The effective cost chart tracks the relationship between would-be costs and true costs for subscriber bills.

Backend Rendering

On peoplepower-node we use the node highcharts-export-server package. This is a lightweight server that exports highcharts chart objects as images. We save those images to be used in the PDF.

Equivalency Metrics

On the frontend, we use the total power generated by solar projects over the course of their existence to find production equivalencies. The function to turn Kilowatt hours into the desired value are located in Constants.js, the functions are derived from here: https://www.epa.gov/energy/greenhouse-gases-equivalencies-calculator-calculations-and-references

Free License

Highcharts is a paid package but currently has a free license for nonprofits. We might need to look into how we acquire an official license for People Power to use