Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var json = (function() {
        var json = null;
		 var d1 = new Date();
 		d1.setDate(d1.getDate()-365);
		var d2 = new Date();
        $.ajax({
            'async': false,
            'global': false,
            'url': "https://www.quandl.com/api/v3/datasets/COM/COPPER.json?api_key=pQoYrkMaF9LhoZ358joV&order=asc&start_date="+d1+"&end_date="+d2,
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })();
    
    var dataPoints = [];
	for(key in json.dataset.data){
		dataPoints.push({label: new Date(json.dataset.data[key][0]), y: json.dataset.data[key][1]});
	} 

    var options = {
       zoomEnabled: true,
       animationEnabled: true, 
	   axisX:{
			title: json.dataset.start_date + ' - ' + json.dataset.end_date,
			gridColor: "Silver",
			tickColor: "silver",
			labelFormatter: function (e) {
				return CanvasJS.formatDate( e.value, "MMM YYYY");
			}, 

		},
	   axisY2:{
		  valueFormatString:"0.000",
		  minimum: 1.5,
	   },  
	   data: [
		  {
			 axisYType: "secondary",
			color:"#B5682A",
			type: "line",
			dataPoints: dataPoints
		  }
      ]
    }
	
	$("#chartContainer").CanvasJSChart(options);