Ichimoku Cloud

v1

by Oscar Gonzalez

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    // Notice that the dataset has missing data
     $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=goog-c.json&callback=?', function (data) {

 // transform data to how our functions are used to seeing it:
      var priceData = []
      for(var i=0; i < data.length; i++) {
          priceData.push({timeStamp: data[i][0], close: data[i][1],});
      }
      
       var ichimokuData = Ichimoku_Cloud(priceData,9,26,52,26);
	

	
        $('#container').highcharts('StockChart', {
        
        		 rangeSelector : {
                selected : 1
            },

            title : {
                text : 'Ichimoku Cloud'
            },
               
            series: [{
            	  type: 'areasplinerange',
                name: 'Leading Span A - B',
                data:  ichimokuData.leadingSpan
            },
            
              {
                name: 'Data Stock',
                color:'#0E020F',
                data: data,
                lineWidth:3,
                tooltip: {
                          valueDecimals: 2
                         }
              },
              
              {
                name : 'Conversion Line',
                color:'#0933F1',
                lineWidth:3,
                data : ichimokuData.conversionLine, 
                tooltip: {
                          valueDecimals: 2
                         }
              },
              
              {
                name: 'Base Line',
                color: '#8C2805',
                lineWidth:3,
                data: ichimokuData.baseLine,
                tooltip: {
                           valueDecimals: 2
                          }
              },
              
              {
                name: 'Lagging Span',
                color: '#F7DF76',
                lineWidth:3,
                data: ichimokuData.laggingSpan,
                tooltip: {
                          valueDecimals: 2
                    ...