HiLo for Syncfusion

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://cdn.syncfusion.com/15.3.0.33/js/common/ej.core.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.3.0.33/js/common/ej.data.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.3.0.33/js/common/ej.globalize.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.3.0.33/js/datavisualization/ej.chart.js" type="text/javascript"></script>

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

JavaScript

$(function () {
   var options = {
      size: { width: "485", height: "300" },
      commonSeriesOptions: { type: "hilo" },
      legend: { visible: false },
      chartArea: { border: { color: 'transparent' } },
      primaryXAxis: {
         visible: true,
         title: { },
         axisLine: { visible: false },
         majorGridLines: { width: 0 },
         minorGridLines: { width: 0 },
         font: { color: "transparent" },
         majorTickLines: { visible: false },
         minorTickLines: { visible: false }
      },
      primaryYAxis: {
         visible: true,
         title: { },
         axisLine: { visible: false },
         majorGridLines: { width: 0 },
         minorGridLines: { width: 0 },
         font: { color: "transparent" },
         majorTickLines: { visible: false },
         minorTickLines: { visible: false }
      }
   };

		var dataSource = [{
      year: 1999,
      high: 55,
      low: 25,
      close: 42
   },
   {
      year: 2000,
      high: 65,
      low: 38,
      close: 60
   },
   {
      year: 2001,
      high: 72,
      low: 41,
      close: 53
   },
   {
      year: 2002,
      high: 62,
      low: 25,
      close: 38
   },
   {
      year: 2003,
      high: 65,
      low: 25,
      close: 45
   },
   {
      year: 2004,
      high: 82,
      low: 40,
      close: 78
   },
   {
      year: 2005,
      high: 83,
      low: 50,
      close: 54
   },
   {
      year: 2006,
      high: 54,
      low: 54,
      close: 54
   },
   {
      year: 2007,
      high: 56,
      low: 15,
      close: 25
   },
   {
      year: 2008,
      high: 49,
      low: 10,
      close: 38
   },
   {
      year: 2009,
      high: 76,
      low: 28,
      close: 59
   },
   {
      year: 2010,
      high: 69,
      low: 40,
      close: 59
   },
   {
      year: 2011,
      high: 62,
      low: 30,
      close: 38
   },
   {
      year: 2012,
      high: 40,
      low: 10,
      close: 15
   },
   {
      year: 2013,
      high: 34,
      low:...