How to get the input from the json to draw the graph

Question

<html>
<head>
<title>JS Charts</title>
</head>
<script type="text/javascript">
  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();
}
    });
</script>
<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>
</html>

Hi. I need to plot a linear graph. Here I have taken the sample. Now I need to take the data for both x and y from the json file. How I can do that. I am not allowed to use any library or API only HTML,CSS and Javascript are allowed.Can anyone please tell me. My json data looks like

[{"aa":{  
   "total_visits":"925",
   "2017-07-29":{  
      "visits":38,
      "leads":0
   },

   "total_leads":13
},
"bb":{  
   "total_visits":"144",
   "2017-07-29":{  
      "visits":1,
      "leads":0
   },
          "total_leads":1
},
"cc":{  
   "last_recorded":"2017-07-29",
   "total_visits":"1386",
   "2017-07-29":{  
      "visits":41,
      "leads":0
   },

   "total_leads":12
},
"dd":{  
   "total_visits":"2364",
   "2017-07-29":{  
      "visits":55,
      "leads":2.1
   },

   "total_leads":59
},
"ee":{  

   "2017-07-29":{  
      "visits":44,
      "leads":0
   },

   "total_leads":37
},
"ff":{  

   "total_leads":2
},
"gg":{  

   "total_leads":1
},
"hh":{  

   "total_visits":"115",

   "2017-07-29":{  

      "visits":2,
      "leads":0
   },
   "package_id":"2",
   "total_leads":3
},
"ii":{  

   "total_visits":"2213",

   "2017-07-29":{  

      "visits":94,
      "leads":0
   },

   "total_leads":87
}
}]

I need to take the total_visits(or)visits(x-axis) and total_leads(or)leads(y-axis) and plot the graph. Thanks in advance.

I think you can using underscorejs.org library to achieve that. — Hamed Javaheri
– Hamed Javaheri, Commented Aug 10, 2017 at 5:32

Amal · Accepted Answer · 2017-08-17 08:35:49Z

1

Try this code

Edited plotData function for plotting x,y-axis values

function plotData(xVisits,yLeads) {
    context.beginPath();
    context.moveTo(xVisits, yLeads);
    for (i=1;i<xVisits.length;i++) {
        context.lineTo(xVisits[i], yLeads[i]);
    }
    context.stroke();
}

<script type="text/javascript">
  var visits = [];
  var leads = [];
  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'https://api.myjson.com/bins/17x8l1', 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++) {
  var $this=field[i];
       for (var key in $this) {
          if ($this.hasOwnProperty(key)) {
            var val = $this[key];
            visits.push(val.total_visits);
            leads.push(val.total_leads);
          }
      }
      }
    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(visits,leads);
function plotData(xVisits,yLeads) {
	context.beginPath();
	context.moveTo(xVisits, yLeads);
	for (i=1;i<xVisits.length;i++) {
		context.lineTo(xVisits[i], yLeads[i]);
	}
	context.stroke();
}
    });
</script>
<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"> Visits Vs Leads</span>  
</div>
</body>

updated

you should edit json data to show a linear graph.

var X = [];
var Y = [];
var data = [];
function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'https://api.myjson.com/bins/gzdjd', 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);
	var values=[];
	for (var i = 0; i < field.length; i++) {
		var $this=field[i];
		for (var key in $this) {
		  if ($this.hasOwnProperty(key)) {
			var val = $this[key];
			values.push({"X":val.total_visits,"Y":val.total_leads});
		  }
		}
	}
    data=({"values":values});
    var graph;
	var xPadding = 30;
	var yPadding = 30;
	var sections = 12;
	var Val_max = 130;
	var Val_min = -40;
	var stepSize = 10;
	var columnSize = 50;
	var rowSize = 50;
	var margin = 10;

	function getMaxY() {
		var max = 0;
		for(var i = 0; i < data.values.length; i ++) {
			if(data.values[i].Y > max) {
				max = data.values[i].Y;
			}
		}
		max += 10 - max % 10;
		return max;
	}

	function getMaxX() {
		var max = 0;
		for(var i = 0; i < data.values.length; i ++) {
			if(data.values[i].X > max) {
				max = data.values[i].X;
			}
		}
		max += 10 - max % 10;
		return max;
	}

	function getXPixel(val) {
		return ((graph.width - xPadding) / getMaxX()) * val + (xPadding * 1.5);
	}

	function getYPixel(val) {
		return graph.height - (((graph.height - yPadding) / getMaxY()) * val) - yPadding;
	}

	graph = document.getElementById("canvas");
	var c = graph.getContext('2d');            

	c.lineWidth = 1;
	c.strokeStyle = '#333';
	c.font = 'italic 8pt sans-serif';
	c.textAlign = "center";

	c.beginPath();
	c.moveTo(xPadding, 0);
	c.lineTo(xPadding, graph.height - yPadding + 20);
	c.lineTo(graph.width, graph.height - yPadding + 20);
	c.stroke();

	for(var i = 0; i < data.values.length; i ++) {
		c.fillText(data.values[i].X, getXPixel(data.values[i].X), graph.height - yPadding + 30);
	}

	c.textAlign = "right"
	c.textBaseline = "middle";

	for(var i = 0; i < getMaxY(); i += 10) {
		c.fillText(i, xPadding - 10, getYPixel(i));
	}

	c.strokeStyle = '#f00';

	c.beginPath();
	c.moveTo(getXPixel(data.values[0].X), getYPixel(data.values[0].Y));
	for(var i = 1; i < data.values.length; i ++) {
		c.lineTo(getXPixel(data.values[i].X), getYPixel(data.values[i].Y));
	}
	c.stroke();

	c.fillStyle = '#333';

	for(var i = 0; i < data.values.length; i ++) {  
		c.beginPath();
		c.arc(getXPixel(data.values[i].X), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
		c.fill();
	}
	var yScale = (graph.height - columnSize - margin) / (Val_max - Val_min);
	var xScale = (graph.width - rowSize) / sections;
	c.strokeStyle="#009933"; // color of grid lines
	c.beginPath();

	for (i=1;i<=sections;i++) {
		var x = i * xScale;
		//c.fillText(xAxis[i], x,columnSize - margin);
		c.moveTo(x - 18, columnSize);
		c.lineTo(x - 18, graph.height - margin);
	}

	var count =  0;
	for (scale=Val_max;scale>=Val_min;scale = scale - stepSize) {
		var y = columnSize + (yScale * count * stepSize); 
		//c.fillText(scale, margin,y + margin);
		c.moveTo(rowSize - 18,y)
		c.lineTo(graph.width,y)
		count++;
	}
	c.stroke();
});

<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"> Visits Vs Leads</span>  
</div>

edited Aug 17, 2017 at 8:35

answered Aug 10, 2017 at 9:16

Amal

3,4261 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Raghavi Over a year ago

why we are getting 3 line sin the graph? What is the reason?

Amal Over a year ago

its generated from you json data.as you asked i have set both x and y axis values to graph.Did you need both visits and leads separately?

Raghavi Over a year ago

visits in x axis and leads in y axis as a single line. Like the linear Graph. That Jan..Feb..mar..are not needed. Is that possible?

Amal Over a year ago

sure,and ' jan,feb..r not needed' i think its not mentioned in your question.Any way will look into it:)

Amal Over a year ago

@Raghavi see d difference between your json jsfiddle.net/5skL854q/1 and my jsfiddle.net/5skL854q .You should edit your json to show it in single line.

|

Prabhath Withanage · Accepted Answer · 2017-08-10 06:23:34Z

0

var data = {"arrkay":{"last_recorded":"2017-07-29","total_visits":"925","signup_date":"2017-01-23","signup_time":"03-23-50","2017-07-29":{"start_date":"2017-07-23","end_date":"2017-07-29","visits":38,"leads":0},"package_id":"2","total_leads":13}, "ascentevents":{"last_recorded":"2017-07-27","total_visits":"144","signup_date":"2016-11-14","signup_time":"03-18-47","2017-07-29":{"start_date":"2017-07-23","end_date":"2017-07-29","visits":1,"leads":0},"package_id":"2","total_leads":1}};

data = [data];

x = "arrkay";

alert("total_visits is: "+data[0][x].total_visits);
alert("total_leads is: "+data[0][x].total_leads);

look this sample in fiddle

answered Aug 10, 2017 at 6:23

Prabhath Withanage

2422 silver badges11 bronze badges

Comments

Dileep Kumar · Accepted Answer · 2017-08-10 07:22:06Z

Check the console once you run this code

        x = [{"arrkay": {
        "last_recorded": "2017-07-29",
        "total_visits": "925",
        "signup_date": "2017-01-23",
        "signup_time": "03-23-50",
        "2017-07-29": {
            "start_date": "2017-07-23",
            "end_date": "2017-07-29",
            "visits": 38,
            "leads": 0
        },
        "package_id": "2",
        "total_leads": 13
    },
        "ascentevents": {
            "last_recorded": "2017-07-27",
            "total_visits": "144",
            "signup_date": "2016-11-14",
            "signup_time": "03-18-47",
            "2017-07-29": {
                "start_date": "2017-07-23",
                "end_date": "2017-07-29",
                "visits": 1,
                "leads": 0
            },
            "package_id": "2",
            "total_leads": 1
        },
        "asterisk": {
            "last_recorded": "2017-07-29",
            "total_visits": "1386",
            "signup_date": "2016-08-25",
            "signup_time": "01-53-52",
            "2017-07-29": {
                "start_date": "2017-07-23",
                "end_date": "2017-07-29",
                "visits": 41,
                "leads": 0
            },
            "package_id": "2",
            "total_leads": 12
        },
        "atmabhan": {
            "last_recorded": "2017-07-29",
            "total_visits": "2364",
            "signup_date": "2016-04-06",
            "signup_time": "17-48-53",
            "2017-07-29": {
                "start_date": "2017-07-23",
                "end_date": "2017-07-29",
                "visits": 55,
                "leads": 2.1
            },
            "package_id": "2",
            "total_leads": 59
        },
        "atulsia": {
            "last_recorded": "2017-07-29",
            "total_visits": "2425",
            "signup_date": "2015-12-01",
            "signup_time": "11-30-01",
            "2017-07-29": {
                "start_date": "2017-07-23",
                "end_date": "2017-07-29",
                "visits": 44,
                "leads": 0
            },
            "package_id": "2",
            "total_leads": 37
        },
        "axxistech": {
            "last_recorded": "2016-12-09",
            "total_visits": "16",
            "signup_date": "2016-10-27",
            "signup_time": "16-56-00",
            "package_id": "2",
            "total_leads": 2
        },
        "babasohna": {
            "last_recorded": "2016-12-15",
            "total_visits": "1",
            "signup_date": "2016-12-15",
            "signup_time": "12-39-30",
            "package_id": "2",
            "total_leads": 1
        },
        "beastemergency": {
            "last_recorded": "2017-07-28",
            "total_visits": "115",
            "signup_date": "2017-03-06",
            "signup_time": "04-34-52",
            "2017-07-29": {
                "start_date": "2017-07-23",
                "end_date": "2017-07-29",
                "visits": 2,
                "leads": 0
            },
            "package_id": "2",
            "total_leads": 3
        },
        "bhardwaj": {
            "last_recorded": "2017-07-29",
            "total_visits": "2213",
            "signup_date": "2016-09-28",
            "signup_time": "09-55-24",
            "2017-07-29": {
                "start_date": "2017-07-23",
                "end_date": "2017-07-29",
                "visits": 94,
                "leads": 0
            },
            "package_id": "2",
            "total_leads": 87
        }
    }]

    for (i=0;i < x.length;i++){
    for (var _key in x[i]){
    console.log(x[i][_key]['total_visits'], x[i][_key]['total_leads']);

    for (var p in x[i][_key]){
    if (Object.prototype.toString.call(x[i][_key][p]) == = '[object Object]') {
    console.log(x[i][_key][p]['leads'], x[i][_key][p]['visits']);
    }

    }}}

Collectives™ on Stack Overflow

How to get the input from the json to draw the graph

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related