Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="console"></div>
<div id="main">

  <div id="container1" style="min-width: 300px; height: 300px; margin: 1em"></div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id.</p>

  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis dui non commodo varius. Phasellus eu purus tincidunt, bibendum neque interdum, egestas leo. Quisque porttitor eros ac enim hendrerit, ut laoreet nulla fermentum. Suspendisse lobortis mi est. Vestibulum volutpat risus eu eleifend aliquet. Proin commodo, sem quis feugiat feugiat, magna odio lacinia metus, in auctor purus nisi sed enim. Fusce aliquam magna in odio viverra accumsan. Praesent gravida porttitor velit vitae aliquam. Suspendisse porta arcu nec velit tincidunt, ac ullamcorper lacus laoreet. Pellentesque vehicula diam ut lorem varius, at vehicula nunc volutpat. Sed sit amet ultrices mauris.</p>

  <p>Aliquam vestibulum tortor quis nunc mattis varius. Proin a condimentum velit, id rutrum est. Morbi venenatis ornare leo eget interdum. Ut facilisis diam felis. Praesent luctus porta augue, in scelerisque lorem convallis blandit. Integer non laoreet ligula. Cras ultrices, dui a...

CSS

#main {
  width: 300px;
  margin: 0 auto;
}

p {
  margin: 1em 0;
}


#console {
  background-color: yellow;
}

JavaScript

var visibleY = function(el) {
  var rect = el.getBoundingClientRect(),
    top = rect.top,
    height = rect.height,
    el = el.parentNode;
  do {
    rect = el.getBoundingClientRect();
    if (top <= rect.bottom === false) return false;
    // Check if the element is out of view due to a container scrolling
    if ((top + height) <= rect.top) return false
    el = el.parentNode;
  } while (el != document.body);
  // Check its within the document viewport
  return top <= document.documentElement.clientHeight;
};


var containers = ['container1', 'container2', 'container3', 'container4'];

// Stuff only for the demo
function attachEvent(element, event, callbackFunction) {
  if (element.addEventListener) {
    element.addEventListener(event, callbackFunction, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, callbackFunction);
  }
};

//function to check if chart exist
function checkIfChartExist(container) {
  if (container.childNodes.length) {
    return true;
  } else {
    return false;
  }
}

var charts = {
  container1: function(container) {
    Highcharts.chart(container, {

      chart: {
        type: 'area'
      },

      title: {
        text: 'Area chart'
      },

      xAxis: {
        type: 'category'
      },

      series: [{
        data: [
          ['Jan', 29.9],
          ['Feb', 71.5],
          ['Mar', 106.4],
          ['Apr', 129.2],
          ['May', 144.0],
          ['Jun', 176.0],
          ['Jul', 135.6],
          ['Aug', 148.5],
          ['Sep', 216.4],
          ['Oct', 194.1],
          ['Nov', 95.6],
          ['Dec', 54.4]
        ]
      }]

    })
  },
  container2: function(container) {
    Highcharts.chart(container, {

      chart: {
        type: 'pie'
      },

      title: {
        text: 'Pie chart'
      },

      series: [{
        data: [
          ['Jan', 29.9],
          ['Feb', 71.5],
          ['Mar', 106.4],
          ['Apr', 129.2],
          ['May', 144.0],
          ['Jun',...