JSFiddle - React, Tailwind, and code Playground

by rajniartoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

var totalRemaining = [],
	totalSold = [],
	totalOffering = [],
	signatureDate = [];

$(function () {
   $.getJSON('https://dl.dropboxusercontent.com/u/56329014/edgarsubmissions-export.json', function(data){
	   var count = 0;	  
		for (i in data.submissions) {			
			count++;
			
			if(data.submissions[i].edgarSubmission && data.submissions[i].edgarSubmission.hasOwnProperty('offeringData') && count <=4){
				
				//total remaining				
				if(data.submissions[i].edgarSubmission.offeringData.offeringSalesAmounts.totalRemaining != 'Indefinite'){
					totalRemaining.push(parseFloat(data.submissions[i].edgarSubmission.offeringData.offeringSalesAmounts.totalRemaining));
				}else{
					totalRemaining.push(0);
				}
				
				//total sold				
				if(data.submissions[i].edgarSubmission.offeringData.offeringSalesAmounts.totalAmountSold != 'Indefinite'){
					totalSold.push(parseFloat(data.submissions[i].edgarSubmission.offeringData.offeringSalesAmounts.totalAmountSold));
				}else{
					totalSold.push(0);
				}
				
				//total offering				
				if(data.submissions[i].edgarSubmission.offeringData.offeringSalesAmounts.totalOfferingAmount != 'Indefinite'){
					totalOffering.push(parseFloat(data.submissions[i].edgarSubmission.offeringData.offeringSalesAmounts.totalOfferingAmount));
				}else{
					totalOffering.push(0);
				}
								
				//singnature date
				signatureDate.push(data.submissions[i].edgarSubmission.offeringData.signatureBlock.signatureDate);								
			}						
		}					
		
		$('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly offering SalesAmounts'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories:signatureDate
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'OfferingData'
                }
            },
 ...