Creating 100% stacked area graph for a website

Question

I am trying to add a chart to my website showing how income earned is divided between two parties. It is essentially the 100% stacked graph in excel that would look something like:

Is there a good (ideally inexpensive, since the only one I've found that might do it is Highcharts, which looks great but it's not cheap for what we are doing) tool that we could embed into our website? Ideally it would be great if the user could select a certain price and it would show the percentage below for the two, but that is just a nice to have. Any suggestions? I looked at Google Charts but did not find one that could show the data in this format.

Answer 1

You can do this with Google Charts.

Assuming you have a bunch of numbers that don't necessarily match the same scale, you can just create a simple function to compare each row of numbers and adjust according to the ratio between them:

function drawVisualization() {
  // add data in number form
  var data = google.visualization.arrayToDataTable([
    ['X', 'Andrew', 'Peter'],
    [100, 100, 100],
    [200, 35, 65],
    [400, 64, 144],
    [1000, 30, 70],
    [3000, 400, 1600],
  ]);

  // adjust data

  for(var i = 0; i < data.getNumberOfRows(); i++){
    var valA = data.getValue(i, 1);
    var valB = data.getValue(i, 2);
    var valTotal = valA + valB;
    data.setValue(i, 1, valA/valTotal);
    data.setValue(i, 2, valB/valTotal);
  };

  // Create and draw the visualization.
  var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
  ac.draw(data, {
    isStacked: true,
    vAxis: {format: "0%",},
    width: 600,
    height: 400,
  });
}

This is what it ends up looking like (I really dumbed down your data, so the line isn't smoothed -- unfortunately area charts do not currently allow smoothing of the line along the lines of the curveType option for Line Charts):

Answer 2

You can use stacking: 'percent' option.

http://jsfiddle.net/Tdk62/

http://api.highcharts.com/highcharts#plotOptions.area.stacking