Sparkline multiple chart - render on scroll

author(s): rajeshdanabal

by Rajesh Danabal

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>


<div id="result"></div>
<table id="table-sparkline" onscroll="doChunk()">
  <thead>
    <tr>
      <th>State</th>
      <th>Income</th>
      <th>Income per quarter</th>
      <th>Costs</th>
      <th>Costs per quarter</th>
      <th>Result</th>
      <th>Result per quarter</th>
    </tr>
  </thead>
  <tbody id="tbody-sparkline">
    <tr>
      <th>Alabama</th>
      <td>254</td>
      <td data-sparkline="71, 78, 39, 66 " />
      <td>296</td>
      <td data-sparkline="68, 52, 80, 96 " />
      <td>-42</td>
      <td data-sparkline="3, 26, -41, -30 ; column" />
    </tr>
    <tr>
      <th>Alaska</th>
      <td>246</td>
      <td data-sparkline="87, 44, 74, 41 " />
      <td>181</td>
      <td data-sparkline="29, 54, 73, 25 " />
      <td>65</td>
      <td data-sparkline="58, -10, 1, 16 ; column" />
    </tr>
    <tr>
      <th>Arizona</th>
      <td>101</td>
      <td data-sparkline="56, 12, 8, 25 " />
      <td>191</td>
      <td data-sparkline="69, 14, 53, 55 " />
      <td>-90</td>
      <td data-sparkline="-13, -2, -45, -30 ; column" />
    </tr>
    <tr>
      <th>Arkansas</th>
      <td>303</td>
      <td data-sparkline="81, 50, 78, 94 " />
      <td>76</td>
      <td data-sparkline="36, 15, 14, 11 " />
      <td>227</td>
      <td data-sparkline="45, 35, 64, 83 ; column" />
    </tr>
    <tr>
      <th>California</th>
      <td>200</td>
      <td data-sparkline="61, 80, 10, 49 " />
      <td>217</td>
      <td data-sparkline="100, 8, 52, 57 " />
      <td>-17</td>
      <td data-sparkline="-39, 72, -42, -8 ; column" />
    </tr>
    <tr>
      <th>Colorado</th>
      <td>118</td>
      <td data-sparkline="13, 48, 21, 36 " />
      <td>273</td>
      <td data-sparkline="98, 86, 8, 81 " />
      <td>-155</td>
      <td data-sparkline="-85, -38, 13, -45 ;...

CSS

#result {
  text-align: right;
  color: gray;
  min-height: 2em;
}

#table-sparkline {
  margin: 0 auto;
  border-collapse: collapse;
}

th {
  font-weight: bold;
  text-align: left;
}

td,
th {
  padding: 5px;
  border-bottom: 1px solid silver;
  height: 20px;
}

thead th {
  border-top: 2px solid gray;
  border-bottom: 2px solid gray;
}

.highcharts-tooltip>span {
  background: white;
  border: 1px solid silver;
  border-radius: 3px;
  box-shadow: 1px 1px 2px #888;
  padding: 8px;
}

JavaScript

/**
 * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
 * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
 */

function getData() {
  return Array.apply(null, Array(1500)).map(function() {
    return Math.floor(Math.random() * 100 % 100);
  });
}

function isElementInViewport(el) {

  //special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }

  var rect = el.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
  );
}

Highcharts.SparkLine = function(a, b, c) {
  var hasRenderToArg = typeof a === 'string' || a.nodeName,
    options = arguments[hasRenderToArg ? 1 : 0],
    defaultOptions = {
      boost: {
        useGPUTranslations: true
      },
      chart: {
        renderTo: (options.chart && options.chart.renderTo) || this,
        backgroundColor: null,
        borderWidth: 0,
        type: 'area',
        margin: [2, 0, 2, 0],
        width: 120,
        height: 20,
        style: {
          overflow: 'visible'
        },

        // small optimalization, saves 1-2 ms each sparkline
        skipClone: true
      },
      title: {
        text: ''
      },
      credits: {
        enabled: false
      },
      xAxis: {
        labels: {
          enabled: false
        },
        title: {
          text: null
        },
        startOnTick: false,
        endOnTick: false,
        tickPositions: []
      },
      yAxis: {
        endOnTick: false,
        startOnTick: false,
        labels: {
          enabled: false
        },
        title: {
          text: null
        },
        tickPositions: [0]
      },
      legend: {
        enabled:...