Raghavi
Reputation: 321
How to get the input from the json to draw the graph
<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.
Upvotes: 1
Views: 1329
Answers (3)
Amal
Reputation: 3426
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>Upvotes: 1
Dileep Kumar
Reputation: 75
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']);
}
}}}
Upvotes: 0
Prabhath Withanage
Reputation: 242
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
Upvotes: 0
Related Questions
- How to get data of json file for chart.js diagram
- How to make a three graph dynamic in HTML5, Css3 and Vanilla js?
- Update graph from json data
- Rendering graph in canvas js using external json data
- How to plot graph using canvasJs?
- Receiving json data from a server to display a chart.js graph not working
- how can plot graph using json data
- How to import json file to javascript to make a graph
- Simple d3.js graph with a json feed input
- How to fetch data from json file to draw a dynamic graph by using d3.js