Kendo UI Chart with Slider Control

by jbristowe

HTML

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2017.2.621/styles/kendo.bootstrap-v4.min.css">
<script src="//kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<h3>Gapminder's Wealth &amp; Health of Nations (Kendo UI Edition)<h3>
<h1 id="yearHeader">1800</h1>
<div id="chart"></div>
<input id="yearSlider" style="width: 100%" value="1800" />

CSS

html {
  background: white;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

JavaScript

var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "https://raw.githubusercontent.com/romsson/dragit/master/data/nations.json",
      dataType: "json"
    }
  },
  schema: {
    parse: function(response) {
      var countries = [];
      for (var i = 0; i < response.length; i++) {
        for (var year = 1800; year < 2009; year++) {
          var income, isIncomeValueFound = false;
          for (var j = 0; j < response[i].income.length; j++) {
          	if (isIncomeValueFound) break;
            var tempIncome = response[i].income[j];
            if (tempIncome && tempIncome[0] == year) {
              income = tempIncome[1];
              break;
            } else {
              for (var tempYear = year-1800; tempYear >= 0; tempYear--) {
                if (response[i].income[tempYear] && response[i].income[tempYear][0] <= year) {
                  income = response[i].income[tempYear][1];
		              isIncomeValueFound = true;             
                  break;
                }
              }
            }
          }

          var population, isPopulationValueFound = false;
          for (var j = 0; j < response[i].population.length; j++) {
          	if (isPopulationValueFound) break;
            var tempPopulation = response[i].population[j];
            if (tempPopulation && tempPopulation[0] == year) {
              population = tempPopulation[1];
              break;
            } else {
              for (var tempYear = year-1800; tempYear >= 0; tempYear--) {
                if (response[i].population[tempYear] && response[i].population[tempYear][0] <= year) {
                  population = response[i].population[tempYear][1];
                  isPopulationValueFound = true;
                  break;
                }
              }
            }
          }

          var lifeExpectancy, isLifeExpectancyValueFound = false;
          for (var j = 0; j < response[i].lifeExpectancy.length; j++) {
          	if...