javascript - D3.js table not refreshing when data changes -
i'm displaying table in browser using d3.json function. table in browser not refreshing when data changes in json file. it's showing previous data instead of new data in table. if refresh manually in browser works correctly table changes new data.
here code use:
<!doctype html> <meta charset="utf-8"> <style> td{ padding:7px; border:#4e95f4 1px solid; } /* provide minimal visual accomodation ie8 , below */ th{ background: #dae5f4; border: 1px solid black; padding: 2px 4px; font-weight: bold; } /* define background color odd background rows */ tr:nth-child(odd){ background: #b8d1f3; } /* define background color background rows */ tr:nth-child(even){ background: #dae5f4; } { position: absolute; } </style> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <div id="container"></div> <a href="http://192.168.7.102:3000/data/traffic" download="">download</a> <script> var jsonurl = "http://192.168.7.102:3000/data/traffic"; d3.json(jsonurl, function(data) { // columns you'd display var columns = ["clients", "traffic", "rank"]; var table = d3.select("#container").append("table") .style("margin-top", "50px") .style("margin-left","280px") .style("border-collapse", "collapse") // <= add line in. .style("border", "2px black solid") .style("width", "50%"), thead = table.append("thead"), tbody = table.append("tbody"); // append header row thead.append("tr") .selectall("th") .data(columns) .enter() .append("th") .text(function(column) { return column; }); // create row each object in data var rows = tbody.selectall("tr") .data(data) .enter() .append("tr"); // create cell in each row each column var cells = rows.selectall("td") .data(function(row) { return columns.map(function(column) { return {column: column, value: row[column]}; }); }) .enter() .append("td") .text(function(d) { return d.value; }); }); </script> the graph not refreshing when data changes in json file. have ideas on problem lies?
i created node.js application , restful web service data database based on user requirement , data written "traffic.json" file. when user selected particular chart on application sending html file browser. in html d3.json function firing.
here code use: ======================= var express = require('express'), http = require('http'), querystring = require('querystring'), router = express.router(), fs = require('fs'), mongoclient = require('mongodb').mongoclient, format = require('util').format, mongo = require('mongodb'), monk = require('monk'), json2csv = require('json2csv'), reloader = require('reload-json'), reload = new reloader(); var start_date ; var end_date ; var client_ip; var clientip; var choosedata; var charts; var chart1; var choosedata1; //getting data calsoftlabs page router.post('/myaction', function(req, res, next) { start_date = req.body.startdate +'t'+ req.body.starttime ; end_date = req.body.enddate +'t'+ req.body.endtime; client_ip = req.body.clientip; clientip = req.body.clientips; choosedata = req.body.choosedata; charts = req.body.charts; chart1 = req.body.chart; choosedata = req.body.data; //converting date , time timestamp. function evaldate(input){ var date = new date(input); return date.gettime(); } var start_timestamp = evaldate(start_date), end_timestamp = evaldate(end_date); var dbdata, start_time, end_time, client_ip, choosedata, options, data, req; //sending parameters restfull webapp service if(choosedata == "upload" || choosedata == "download") { data = querystring.stringify({ start_time: start_timestamp, end_time: end_timestamp, client_ip: clientip, }); } else if(choosedata == "upload_traffic" || choosedata == "download_traffic" || choosedata == "both" ) { data = querystring.stringify({ client_ip: client_ip, }); } console.log(data); if(choosedata == "upload_traffic") { options = { host: 'localhost', port:8080, path:'/restful/traffic/upload_traffic', method:'post', headers: { 'content-type': 'application/json', } }; } else if(choosedata == "download_traffic") { options = { host: 'localhost', port:8080, path:'/restful/traffic/download_traffic', method:'post', headers: { 'content-type': 'application/json', } }; } else if(choosedata == "upload") { options = { host: 'localhost', port:8080, path:'/restful/traffic/upload', method:'post', headers: { 'content-type': 'application/json', } }; }else if(choosedata == "download"){ options = { host: 'localhost', port:8080, path:'/restful/traffic/download', method:'post', headers: { 'content-type': 'application/json', } }; } else if(choosedata == "both") { options = { host: 'localhost', port:8080, path:'/restful/traffic/both', method:'post', headers: { 'content-type': 'application/json', } }; } //creating file, writing network data file. var filename = 'views/traffic.json'; req = http.request(options, function(response) { var jsonstring = ''; response.on('data', function(data) { jsonstring += data; }); response.on('end',function(){ console.log(jsonstring); fs.writefile(filename, jsonstring,'utf-8'); }); }); if(chart1 == 'line') { res.sendfile('views/line.html'); } else if(chart1 == 'bar') { res.sendfile('views/newbar.html'); } else if(chart1 == 'area') { res.sendfile('views/area.html'); } else if(chart1 == 'pie') { res.sendfile('views/pie.html'); } else if(chart1 == 'multiline') { res.sendfile('views/multiline.html'); } else if(chart1 == 'all') { res.sendfile('views/newall.html'); } else if(charts == 'table') { res.sendfile('views/table.html'); } else if(charts == 'stackedbar') { res.sendfile('views/stackedbar.html') } req.write(data); req.end(); req.on('error', function(e) { console.error(e); }); }); module.exports = router;
your table not refreshing because d3.json(jsonurl, function(data) {...}) not listening changes data-file. function run once , that's it.
say rerun data function d3.json(jsonurl, function(data) {...}) @ interval next problem never update table attach new one:
var table = d3.select("#container").append("table") you not selecting table (that might exist) appending new table dom. need have @ data binding principle in d3.
Comments
Post a Comment