Adding an average line

[PAULUSfranCIRCUS]

I spend hours searching whether it's possible to add a horizontal line that has a y value that is based on the average of another data array. I came to this awesome plugin to the Chart.js but still couldn't find this function.

Is this somehow possible? Much appreciated!

[etimberg]

@PAULUSfranCIRCUS you would need to calculate the average yourself, but once that is done this is doable using this plugin

[Adondriel]

could you show us an example of the Data that you are sending to chartJS? for example with my data object I actually send chartJS an object with an array of annotations, then just use that for my annotations.

[PAULUSfranCIRCUS]

Thanks Adondriel! The data that I want to send is from the example within the Embed Api plugin for Google Analytics, that uses Chart.js

https://ga-dev-tools.appspot.com/embed-api/third-party-visualizations/

within the first graph i would like to include an average line for both data arrays (first week and last week). Which is within this line of code:
`
function renderWeekOverWeekChart(ids) {

// Adjust `now` to experiment with different days, for testing only...
var now = moment(); // .subtract(3, 'day');

var thisWeek = query({
  'ids': ids,
  'dimensions': 'ga:date,ga:nthDay',
  'metrics': 'ga:sessions',
  'start-date': moment(now).subtract(1, 'day').day(0).format('YYYY-MM-DD'),
  'end-date': moment(now).format('YYYY-MM-DD')
});

var lastWeek = query({
  'ids': ids,
  'dimensions': 'ga:date,ga:nthDay',
  'metrics': 'ga:sessions',
  'start-date': moment(now).subtract(1, 'day').day(0).subtract(1, 'week')
      .format('YYYY-MM-DD'),
  'end-date': moment(now).subtract(1, 'day').day(6).subtract(1, 'week')
      .format('YYYY-MM-DD')
});

Promise.all([thisWeek, lastWeek]).then(function(results) {

  var data1 = results[0].rows.map(function(row) { return +row[2]; });
  var data2 = results[1].rows.map(function(row) { return +row[2]; });
  var labels = results[1].rows.map(function(row) { return +row[0]; });

  labels = labels.map(function(label) {
    return moment(label, 'YYYYMMDD').format('ddd');
  });

  var data = {
    labels : labels,
    datasets : [
      {
        label: 'Last Week',
        fillColor : 'rgba(220,220,220,0.5)',
        strokeColor : 'rgba(220,220,220,1)',
        pointColor : 'rgba(220,220,220,1)',
        pointStrokeColor : '#fff',
        data : data2
      },
      {
        label: 'This Week',
        fillColor : 'rgba(151,187,205,0.5)',
        strokeColor : 'rgba(151,187,205,1)',
        pointColor : 'rgba(151,187,205,1)',
        pointStrokeColor : '#fff',
        data : data1
      }
    ]
  };

  new Chart(makeCanvas('chart-1-container')).Line(data);
  generateLegend('legend-1-container', data.datasets);
});

}
`

[Adondriel]

The way you are creating your chart seems very odd to me.
What you are going to need to do is something like:

            myChart = new Chart(ctx, {
                type: "bar",
                data: obj,
                options: {
                    scales: {
                        xAxes: [{
                            stacked: false
                        }],
                        yAxes: [{
                            stacked: false
                        }]
                    },
                    responsive: true,
                    maintainAspectRatio: false,
                    onClick: function (evt){
                        var activeBars = myChart.getElementsAtEvent(evt);
                        if (activeBars[0]){
                            //zoom into detailed view for each month.
                            CreateChartForPosition(activeBars[0]._model.label);
                        };
                    }, //end of onclick event
                    annotation: {
                        annotations: obj.annotations
                    }
                }
            });

Where the annotations are an option on your grid themselves. Make sure you are using chartjs v2. You will also need to calculate your averages from the data before creating your annotations.

[Adondriel]

@PAULUSfranCIRCUS Ah yes, Just checked the page you were talking about and yea, they use chartjs 1.0.2 which is the old version. This plugin is for 2.0 as far as I can tell (since it uses 2.0's plugin system) My above example is a fairly good idea for what a simple(or complex for some I guess) chart creation script would look like with 2.0.

[PAULUSfranCIRCUS]

Great! Well, yes I am bound by the quirks of the Google Analytics embed API. In this particular case it also uses moment.js so maybe that's making it look odd. Thanks for noticing that it is 1.0.2 and not the 2.0 version. Leaves me out of luck i guess

[Adondriel]

You could probably update that version couldn't you? can you not edit the scripts they are referencing? Also if not I found this stackoverflow thread when I was looking into this for 2.0 and the solution I found was for v1. http://stackoverflow.com/questions/31092489/chart-js-draw-horizontal-line The answer from dFelinger is what I would suggest (since it supports multiple lines.)

[compwright]

I realize this is a bit old, but just putting this out there for future reference. If you need an average line, you can do this without the annotation plugin simply by adding another data series computed from your other data series using https://github.com/Tom-Alexander/regression-js.