I have a .js file and a .html file, I want the html document to get data from the .js file and manipulate it to produce a pie chart. How should I proceed with it?
Currently, I have a function in the .js file . I would like to call it from within html command.
EDIT: I have the charts ready in html and have queried the database in js. I am left with linking them. I want to display a pie charts based on data values in mssql database
This is my html file index12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script> </script>
<style>
rect{
stroke-width: 2;
}
.legend{
stroke:black;
opacity:1;
font-size: 12px;
}
text{
font-family: sans-serif;
font-size: 10px;
fill:black;
}
</style>
</head>
<body>
<p>hi how ru</p>
<div id="chart"></div>
<button type="button">Change Content</button>
<script src="ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js></script>
<script src="d3/d3.js"></script>
<select id ="slctmodel"></select>
<script>
var dataset;
$(document).ready(function () {
$.getJSON("app.js", success = function (data) {
dataset = data;
});
setTimeout(function () {
/* dataset = [
{ "module": "A", "errors": 50 },
{ "module": "B", "errors": 120 },
{ "module": "C", "errors": 10 },
{ "module": "D", "errors": 200 },
{ "module": "E", "errors": 27 },
{ "module": "F", "errors": 25 },
{ "module": "G", "errors": 40 }
];*/
console.log(dataset);
var width = 1500;
var height = 1500;
var radius = 150;
var legendRectSize = 16;
var legendSpacing = 4;
console.log("hi1");
var color = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F", "G", ])
.range(["#FFEBAA", "#EEAB79", "#955C52", "#BE4C60",
"#B42E61", "#851362", "#5E0063"]);
var svg = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + 850 + ',' + 250+')');
d3.select('#chart svg')
.append("text")
.attr("x", 850)
.attr("y", 30)
.attr("text-anchor", "middle")
.text("PROBABILITY OF FAILURE IN MODULES");
var arc = d3.svg.arc()
.innerRadius(30)
.outerRadius(radius);
var arcOver = d3.svg.arc()
.innerRadius(20)
.outerRadius(radius + 30);
console.log("hi2");
var pie = d3.layout.pie()
.value(function (d) { return d.errors; })
.sort(null);
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function (d, i) {
return color(d.data.module);
})
.attr("opacity", 1)
.attr("stroke", "black")
.attr("stroke-width", 2)
.on("mouseenter", function (d) {
d3.select(this)
.attr("stroke", "black")
.transition()
.duration(1000)
.attr("d", arcOver)
.attr("stroke-width", 4)
.attr("opacity", 1)
})
.on("mouseleave", function (d) {
d3.select(this).transition()
.attr("d", arc)
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("opacity", 1);
})
console.log("hi3");
svg.selectAll('text')
.data(pie(dataset))
.enter()
.append('text')
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function (d) {
return d.value;
})
.style("pointer-events", "none");
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function (d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var vert = i * height - offset;
return 'translate(' + 250 + ',' + vert + ')';
});
console.log("hi4");
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function (d) { return d; });
console.log("hi5");
}
, 500);
});
</script>
</body>
</html>
AND MY APP.JS FILE IS
var http = require('http'); //connect with http
var sql = require('mssql'); //connect with sql
var express = require('express'); //connect with express
var path = require('path');
var app = express();
var jQ = require('jquery');
env: {
browser: true
}
var Connection = sql.Connection;
var Request = sql.Request;
var a; var recordSet;
var config = {
server: '10.2.13.211', //my IP address - obtained
//server: '.',
database: 'trialdb', //my table is within this
user: 'sa', //windows authentication
password: 'admin123#',
port: 1433 //deafault port number
};
function send404Response(response) {
response.writeHead(404, { "Context-Type": "text/plain" });
response.write("Error 404:Page not found");
response.end();
}
function loadEmployees() {
var dbConn = new sql.Connection(config);
dbConn.connect().then(function () {
var request = new sql.Request(dbConn);
request.query("select * from list").then(function (recordSet) {
// console.log(recordSet);
a = recordSet[1].errors;
return recordSet;
dbConn.close(); //close connection
}).catch(function (err) {
console.log(err);
dbConn.close();
});
}).catch(function (err) {
console.log(err);
});
}
app.use(express.static('D:/d3 project/project_part1/project_part1/'));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, '../../index12.html'));
//res.send(recordSet);
});
app.get('/abt', function (req, res) {
res.sendFile(path.join(__dirname, '../../startpage.html'));
});
function onRequest(request, response) {
if (request.method == 'GET' && request.url == '/') {
console.log("user made a request" + request.url);
response.writeHead(200, { "Context-Type": "text/plain" });
loadEmployees();
setTimeout(function () {
// response.write("here is some data");
response.write("hiya" + a);
response.end();
}
, 200);
}
else {
send404Response(response); console.log('error 404');
}
}
http.createServer(onRequest).listen(8888);
console.log('server will run on requset to port 8888');
var server = app.listen(8081);
My 'data' variable in the jquery part of index12.html file has an undefined value.It should have the value of 'recordSet' variable in the app.js file
How do I proceed with it?
How do I call the function loadEmployees() of app.js in index12.html so that I can store the value returned by the function loadEmployees() i.e, the 'recordSet' in the 'data' variable of index12.html
<script>tag and access it what is the issue there.. If the issue is in drawing the chart then you can refer @afuc's answer