2D Pareto Charts

Pareto charts combine a single series column chart with a line chart. Columns are sorted in a descending order. The line shows the cumulative value of the columns, as a percent.

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 300px;
    height: 185px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
}
#chart_div svg { height: 185px; }
img { z-index: -1; }
#chart_div table {
    width: auto;
    margin: 0 auto !important;
}

JavaScript

google.charts.load("current", {
   callback: makeChart,
   "packages": ["corechart"]
});
function makeChart() {
   var options = {
      width: 300,
      height: 185,
      hAxis: { },
      vAxis: { },
   };
   var chartDiv = $("#chart_div")[0];
   var seriesNames = ["US", "France", "UK"];
   var dataSource = [{
      year: 2000,
      y1: 40,
      z1: 1,
      y2: 20,
      z2: 1,
      y3: 0,
      z3: 1
   },
   {
      year: 2001,
      y1: 62,
      z1: 1,
      y2: 12,
      z2: 3,
      y3: 6,
      z3: 1
   },
   {
      year: 2002,
      y1: 53,
      z1: 3,
      y2: 19,
      z2: 2,
      y3: 8,
      z3: 1
   },
   {
      year: 2003,
      y1: 49,
      z1: 1,
      y2: 28,
      z2: 1,
      y3: 10,
      z3: 2
   },
   {
      year: 2004,
      y1: 52,
      z1: 2,
      y2: 42,
      z2: 3,
      y3: 12,
      z3: 1
   },
   {
      year: 2005,
      y1: 32,
      z1: 1,
      y2: 75,
      z2: 1,
      y3: 15,
      z3: 3
   },
   {
      year: 2006,
      y1: 28,
      z1: 3,
      y2: 80,
      z2: 3,
      y3: 17,
      z3: 1
   },
   {
      year: 2007,
      y1: 46,
      z1: 1,
      y2: 55,
      z2: 1,
      y3: 18,
      z3: 2
   },
   {
      year: 2008,
      y1: 55,
      z1: 2,
      y2: 45,
      z2: 2,
      y3: 25,
      z3: 1
   },
   {
      year: 2009,
      y1: 88,
      z1: 1,
      y2: 38,
      z2: 1,
      y3: 18,
      z3: 2
   },
   {
      year: 2010,
      y1: 68,
      z1: 1,
      y2: 29,
      z2: 1,
      y3: 24,
      z3: 2
   },
   {
      year: 2011,
      y1: 63,
      z1: 1,
      y2: 19,
      z2: 1,
      y3: 29,
      z3: 1
   },
   {
      year: 2012,
      y1: 65,
      z1: 1,
      y2: 14,
      z2: 3,
      y3: 31,
      z3: 3
   },
   {
      year: 2013,
      y1: 68,
      z1: 2,
      y2: 18,
      z2: 1,
      y3: 52,
      z3: 2
   },
   {
      year: 2014,
      y1: 48,
      z1: 1,
      y2: 16,
      z2: 1,
      y3: 72,
      z3: 3
   },
   {
      year: 2015,
      y1: 39,
      z1: 3,
    ...