FB - Scroll Depth Chart

by Paulo Ávila

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 350px; height: 500px;"></div>

JavaScript

// https://developers.google.com/chart/interactive/docs/gallery/steppedareachart

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          //['0','10','20','30','40','50','60','70','80','90','100'],
          ['0','0.1','0.2','0.3','0.4','0.5','0.6','0.7','0.8','0.9','1.0'],
          [0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1]
        ]);

        var options = {
          title: 'Scroll Depth (%)',
          legend: 'none',
          tooltip: 'none',
          isStacked: true,
          //lineDashStyle: [0,1], // Hack to hide the step lines (dash of length 0 followed by a gap of length 1)
          chartArea: {
          	backgroundColor: {
              //stroke: 'black',
              strokeWidth: 1,
              fill: '#5178e1' // Hack: set a background color so that the colors of the stacked bars can be white (with an opacity) so that the separating line can be full white
            }
          },
          vAxis: {
            //minValue: 0,
            direction: -1, // Top of the graph should be 0%
            ticks: [0.0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0],
            format: 'percent',
            textStyle: {
              color: 'gray'
            }
          },
          hAxis: {
            ticks: 'none',
            //gridlines: {color: 'red'}
          },
          series: [
            {color: 'white', areaOpacity: 0.8}, // 10%
            {color: 'white', areaOpacity: 0.9}, // 20%
            {color: 'white', areaOpacity: 0.9}, // 30%
            {color: 'white', areaOpacity: 0.8}, // 40%
            {color: 'white', areaOpacity: 0.6}, // 50%
            {color: 'white', areaOpacity: 0.1}, // 60%
            {color: 'white', areaOpacity: 0.5}, // 70%
            {color: 'white', areaOpacity: 0.3}, // 80%
            {color: 'white', areaOpacity: 0.6}, // 90%
            {color:...