Regression Analysis in AnyChart JavaScript Charts

AnyChart is not only a beautiful charting library but also a multifunctional one. We’ve got lots of questions from our customers on how they can integrate regression analysis into AnyChart JavaScript Charts. There are many approaches that may be adopted in order to interpolate and approximate data. And the one we’re going to share with you today involves the use of the popular regression.js library along with AnyChart.

What Is Regression.js

Regression.js is a JavaScript module containing a collection of linear least-squares fitting methods for simple data analysis. It can be used for data approximation, finding data regularities and so on. It is available as the ‘regression’ package on npm and on the cdnjs CDN.

To work with library, either plug it into your page from its CDN link, download the file and place it on your server, or, follow the instructions given in regression.js repository on GitHub to use it with Node.js.

Visualizing Regression Analysis

Now let’s find out how to create an interactive JavaScript chart along with the regression.js library.

If the regression.js is properly added to a page, we can use some data to get the regression object of a, say, linear type, and get the coefficients:

var rawData = [
  [0.1, 2.1],
  [1, 2.4],
  [2, 2.6],
  [4, 2.8],
  [5, 3]
];

var result = regression('linear', rawData);
var coeff = result.equation;

To set theoretical data, we use the function that will generate another data array:

function setTheoryData(rawData) {
  var theoryData = [];
  for (var i = 0; i < rawData.length; i++) {
    theoryData[i] = [rawData[i][0], formula(coeff, rawData[i][0])];
  }
  return theoryData;
}

Having done that, we input X values and calculate Y values using the formula found:

function formula(coeff, x) {
  var result = null;
  for (var i = 0, j = coeff.length - 1; i < coeff.length; i++, j--) {
    result += coeff[i] * Math.pow(x, j);
  }
  return result;
}

When the data is ready all we have to do is to display it as a series on a chart.

And that’s how AnyChart-Regression.js sample looks like, you can fork and edit it, or download it from AnyChart Playground:

Here is the full source code of the sample we’ve created:

//experimental data
var rawData = [
  [0.1, 2.1],
  [1, 2.4],
  [2, 2.6],
  [4, 2.8],
  [5, 3]
];

//getting the regression object
//the type of regression depends on the experimental data
var result = regression('linear', rawData);

//get coefficients from the calculated formula
var coeff = result.equation;

anychart.onDocumentReady(function () {

  var data_1 = rawData;
  var data_2 = setTheoryData(rawData);

  chart = anychart.scatter();

  chart.title("The calculated formula: " + result.string + "\nThe coefficient of determination (R2): " + result.r2.toPrecision(2));

  chart.legend(true);

  // creating the first series (marker) and setting the experimental data
  var series1 = chart.marker(data_1);
  series1.name("Experimental data");

  // creating the second series (line) and setting the theoretical data
  var series2 = chart.line(data_2);
  series2.name("Theoretically calculated data");
  series2.markers(true);

  chart.container("container");
  chart.draw();
});

//input X and calculate Y using the formula found
//this works with all types of regression
function formula(coeff, x) {
  var result = null;
  for (var i = 0, j = coeff.length - 1; i < coeff.length; i++, j--) {
    result += coeff[i] * Math.pow(x, j);
  }
  return result;
}

//setting theoretical data array of [X][Y] using experimental X coordinates
//this works with all types of regression
function setTheoryData(rawData) {
  var theoryData = [];
  for (var i = 0; i < rawData.length; i++) {
    theoryData[i] = [rawData[i][0], formula(coeff, rawData[i][0])];
  }
  return theoryData;
}

We hope you found this article about regression analysis helpful. AnyChart team is waiting for your interesting questions and challenging tasks. If you have some, please, contact AnyChart Support Team — we are fast to find relevant solutions and attentive to every problem AnyChart customers might face.

AnyChart is easy to use along with other JavaScript solutions. It can help you make your interactive visualization better and put the data to work. Thanks for staying with us.

• Categories: AnyChart charting component, HTML5, JavaScript, News, Tips and tricks
•    1 Comment »

Comments (1)

CAPTCHA Code *