Ichimoku Cloud

v3.1

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=aapl-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 = IchimokuCloud(priceData,9,26,52,26);
	

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

            title : {
                text : 'Ichimoku Cloud'
            },
                                      
            series: [{
            	  type: 'areasplinerange',
                visible: true,
        				tooltip: {
           								 pointFormat: ''
        								 },
                lineWidth:0,
                fillOpacity: 0.3,
                color: 'green',
                data:  ichimokuData.greenArea,
               	hover: {
                 					   enabled: false
                			 }
            						
            },
            {
            	  type: 'areasplinerange',
                visible: true,
                tooltip: {
           								 pointFormat: ''
        								 },
                lineWidth:0,
                fillOpacity: 0.3,
                color: 'red',
                data:  ichimokuData.redArea
            },
                      
              {
                name: 'Data Stock',
                color:'#0E020F',
                data: data,
                lineWidth:2,
                tooltip: {
                          valueDecimals: 2
                         }
              },
                             
               {
                name : 'Leading Span A',
                lineWidth:2,
                data : ichimokuData.leadingSpanA,
                color:'#C0EE85',
               ...