Area chart with crosshair from external JSON - CanvasJS JavaScript Charts

Area chart with crosshair from external JSON - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/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

$(document).ready(function () {
	var dataPoints = [];
	var chart = new CanvasJS.Chart("chartContainer", {
		animationEnabled: true,
		title: {
			text: "Data From PHP Result "
		},
		axisX: {
			valueFormatString: "DD MMM hh:mm",
			crosshair: {
				enabled: true,
				snapToDataPoint: true
			}
		},
		axisY: {
			title: "Closing Price (in USD)",
			includeZero: false,
			valueFormatString: "$##0.00",
			crosshair: {
				enabled: true,
				snapToDataPoint: true,
				labelFormatter: function (e) {
					return "$" + CanvasJS.formatNumber(e.value, "##0.00");
				}
			}
		},
		data: [{
			type: "area",
			xValueFormatString: "DD MMM",
			yValueFormatString: "$##0.00",
			dataPoints: dataPoints
			}]
		});		
		
	//$.getJSON("http://marviks.com/Charts/myPHPserviceAS.php", function (result) { //This has been commented due to Cross-Origin Request Blocking
	$.getJSON("https://api.myjson.com/bins/utcpp", function (result) {
		for(var i = 0; i < result.length; i++){
			dataPoints.push({x: new Date(result[i].x), y: parseFloat(result[i].y)})
		}		
		chart.render();
	});	
});