CODEWITHSUNDEEP
javascriptjqueryhtmlcsscanvas
Raghavi
Raghavi

Reputation: 321

How to get the data from external file for drawing the graph in canvas

<html>
<head>
  <style>html{font-family:Verdana;}</style>
	
<script type="text/javascript">

var canvas ;
var context ;
var Val_max;
var Val_min;
var sections;
var xScale;
var yScale;
		// Values for the Data Plot, they can also be obtained from a external file
var Apple =  [100, 102, 87, , 100, 123, 100, 90, 87, 91, 93, 88];
var Samsung = [30, 50, 70, 80, 90, 100, 95, 91, 85, 92, 99, 130];
var Nokia =   [20, -10, -20, -25, -40, 5, 10, 28, 30, 43, 65, 80];

function init() {
		// set these values for your data 
	sections = 12;
	Val_max = 130;
	Val_min = -40;
	var stepSize = 10;
	var columnSize = 50;
	var rowSize = 50;
	var margin = 10;
	var xAxis = [" ", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] 
		//
		
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	context.fillStyle = "#0099ff"
	context.font = "20 pt Verdana"
	
	yScale = (canvas.height - columnSize - margin) / (Val_max - Val_min);
	xScale = (canvas.width - rowSize) / sections;
	
	context.strokeStyle="#009933"; // color of grid lines
	context.beginPath();
		// print Parameters on X axis, and grid lines on the graph
	for (i=1;i<=sections;i++) {
		var x = i * xScale;
		context.fillText(xAxis[i], x,columnSize - margin);
		context.moveTo(x, columnSize);
		context.lineTo(x, canvas.height - margin);
	}
		// print row header and draw horizontal grid lines
	var count =  0;
	for (scale=Val_max;scale>=Val_min;scale = scale - stepSize) {
		var y = columnSize + (yScale * count * stepSize); 
		context.fillText(scale, margin,y + margin);
		context.moveTo(rowSize,y)
		context.lineTo(canvas.width,y)
		count++;
	}
	context.stroke();
	
	context.translate(rowSize,canvas.height + Val_min * yScale);
	context.scale(1,-1 * yScale);
	
		// Color of each dataplot items
		
	context.strokeStyle="#FF0066";
	plotData(Apple);
	context.strokeStyle="#9933FF";
	plotData(Samsung);
	context.strokeStyle="#000";
	plotData(Nokia);
}

function plotData(dataSet) {
	context.beginPath();
	context.moveTo(0, dataSet[0]);
	for (i=1;i<sections;i++) {
		context.lineTo(i * xScale, dataSet[i]);
	}
	context.stroke();
}

</script>
</head>

<body onLoad="init()">
<div align="center">
<h2>Monthly Profits of Companies(in million $)</h2>

<canvas id="canvas" height="400" width="650">
</canvas>
<br>
	<!--Legends for Dataplot -->
<span style="color:#FF0066"> Apple </span>  
<span style="color:#9933FF"> Samsung</span>  
<span style="color:#000"> Nokia </span>
</div>
</body>
</html>

Hi, I need to plot a simple linear graph. I am not allowed to use any libraries and frameworks and API. I have tried this. But I need to plot a graph with the data from external json file. How can get the data from external file? Can anyone please help me to do that. Thanks in advance.

Upvotes: 0

Views: 107

Answers (1)

Amal
Amal

Reputation: 3426

Hope this helps

function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'https://api.myjson.com/bins/1igag', true);
    xobj.onreadystatechange = function() {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    }
    xobj.send(null);
}


  var Apple = [];
  var Samsung = [];
  var Nokia = [];

function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'https://api.myjson.com/bins/1igag', true);
    xobj.onreadystatechange = function() {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    }
    xobj.send(null);

}
loadJSON(function(response) {
  var response;
  var field=JSON.parse(response);
  for (var i = 0; i < field.length; i++) {
        Apple.push(field[i].xxx);
        Samsung.push((field[i].xxx)+10);
        Nokia.push((field[i].xxx)-30);
      }
      	sections = 12;
	Val_max = 130;
	Val_min = -40;
	var stepSize = 10;
	var columnSize = 50;
	var rowSize = 50;
	var margin = 10;
	var xAxis = [" ", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] 
		//
		
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	context.fillStyle = "#0099ff"
	context.font = "20 pt Verdana"
	
	yScale = (canvas.height - columnSize - margin) / (Val_max - Val_min);
	xScale = (canvas.width - rowSize) / sections;
	
	context.strokeStyle="#009933"; // color of grid lines
	context.beginPath();
		// print Parameters on X axis, and grid lines on the graph
	for (i=1;i<=sections;i++) {
		var x = i * xScale;
		context.fillText(xAxis[i], x,columnSize - margin);
		context.moveTo(x, columnSize);
		context.lineTo(x, canvas.height - margin);
	}
		// print row header and draw horizontal grid lines
	var count =  0;
	for (scale=Val_max;scale>=Val_min;scale = scale - stepSize) {
		var y = columnSize + (yScale * count * stepSize); 
		context.fillText(scale, margin,y + margin);
		context.moveTo(rowSize,y)
		context.lineTo(canvas.width,y)
		count++;
	}
	context.stroke();
	
	context.translate(rowSize,canvas.height + Val_min * yScale);
	context.scale(1,-1 * yScale);
	
		// Color of each dataplot items
		
	context.strokeStyle="#FF0066";
	plotData(Apple);
	context.strokeStyle="#9933FF";
	plotData(Samsung);
  context.strokeStyle="#000";
	plotData(Nokia);

function plotData(dataSet) {
	context.beginPath();
	context.moveTo(0, dataSet[0]);
	for (i=1;i<sections;i++) {
		context.lineTo(i * xScale, dataSet[i]);
	}
	context.stroke();
}
    });
<body>
<div align="center">
<h2>Monthly Profits of Companies(in million $)</h2>

<canvas id="canvas" height="400" width="650">
</canvas>
<br>
	<!--Legends for Dataplot -->
<span style="color:#FF0066"> Apple </span>  
<span style="color:#9933FF"> Samsung</span>  
<span style="color:#000"> Nokia </span>
</div>
</body>

Upvotes: 1

Related Questions