Uncaught TypeError: Cannot read property 'textContent' of null error

Asked 6/10, 2015 at 15:17 Answered 27/7 at 4:43

Solved javascript d3.js dc.js crossfilter

I am trying to use dc.js to implement the crossfilter and d3. I am almost successful. When I run my code in JSFiddle, it works perfectly ok! But when i try to implement the exact code on the local system, it gives me Uncaught TypeError: Cannot read property 'textContent' of null error.

My code is

trial1.js

var yearChart = dc.barChart('#year-chart');

//the data
var data = [
{date: "2015-10-01", type: "car", quantity: 3}];

var dispatch = crossfilter(data);

var parseDate = d3.time.format("%Y-%m-%d").parse;
data.forEach(function (d) {
    d.date = parseDate(d.date);
    d.quantity = +d.quantity;
    d.Year = d.date.getFullYear();
});

var dateDim = dispatch.dimension(function (d) {
    return d.date;
});
var productions = dateDim.group().reduceSum(function (d) {
    return d.quantity;
});
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;

yearChart.width(2000).height(200)
    .dimension(dateDim)
    .group(productions)
    .x(d3.time.scale().domain([minDate, maxDate]))
    .brushOn(false)
	.centerBar(true)
    .yAxisLabel("Productions per day")
	.xUnits(function(){return 10;});

yearChart.render();

<html>
	<head>
	<meta charset="utf-8">
		<script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
		<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
		<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
		<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/colorbrewer.js"></script>
		<script type="text/javascript" src = "trial1.js"></script>
	</head>
	<body>
	<div id="year-chart"></div>
	</body>
</html>

the line of code in d3.js that gives the error is this.node().textContent;

Misdoing answered 6/10, 2015 at 15:17 Comment(9)

you understand that you just imported correctly this line <script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" charset="utf-8"></script> the other imports are wrong.... – Godmother 6/10, 2015 at 15:22

please import correctly the other scripts – Godmother 6/10, 2015 at 15:22

the other scripts are downloaded on the local system and saved in the js folder in the same directory. – Misdoing 6/10, 2015 at 15:48

Hey @Databases you need to import correctly so we can lookup whats wrong.... – Godmother 6/10, 2015 at 17:3

Hi @AlvaroJoao, done as you asked – Misdoing 6/10, 2015 at 17:9

got your problem...have need to make use all the dependencies of trial1.js and d3.js are loaded before using it. – Godmother 6/10, 2015 at 17:37

ummm, im sorry. But how exactly do i do that? – Misdoing 6/10, 2015 at 17:39

Please check my answer, I think that what you gonna need to fix this issue for good and learn smth critical in web applications. – Godmother 6/10, 2015 at 18:8

have you read the answer? – Godmother 6/10, 2015 at 22:34

I had the same issue! localy Just found out that the:

 <div id="year-chart"></div>

was misplaced!

just try to setup all your html content before the JS files. And will work fine!

see the example:

obs: It was working on JSFiddle because the html (must) rend before the js scripts!

Hopefully will work for you too.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Bar Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="http://dc-js.github.io/dc.js/css/dc.css"/>
    <script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" charset="utf-8"></script>
    <script src="http://dc-js.github.io/dc.js/js/d3.js" charset="utf-8"></script>
    <script src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>
    <script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
</head>
<body>
    
  
<div id="year-chart"></div> 

<script type="text/javascript">

var yearChart = dc.barChart('#year-chart');

		//the data
		var data = [{
		    date: "2015-10-01",
		    customer: "BOASG",
		    quantity: 3
		}];


		var dispatch = crossfilter(data);

		var parseDate = d3.time.format("%Y-%m-%d").parse;
		data.forEach(function (d) {
		    d.date = parseDate(d.date);
		    d.quantity = +d.quantity;
		    d.Year = d.date.getFullYear();
		});

		var dateDim = dispatch.dimension(function (d) {
		    return d.date;
		});
		var productions = dateDim.group().reduceSum(function (d) {
		    return d.quantity;
		});
		var minDate = dateDim.bottom(1)[0].date;
		window.alert(minDate);
		var maxDate = dateDim.top(1)[0].date;
		window.alert(maxDate);

		yearChart.width(2000).height(200)
		    .dimension(dateDim)
		    .group(productions)
		    .x(d3.time.scale().domain([minDate, maxDate]))
		    .brushOn(false)
		    .centerBar(true)
		    .yAxisLabel("Productions per day")
		    .xUnits(function () {
		    return 10;
		});

		dc.renderAll();

</script>
 <!-- <div id="year-chart"></div>  if you set the code here you will be able to reproduce the issue.-->
</body>
</html>

Godmother answered 6/10, 2015 at 18:7 Comment(8)

@Databases check this answer – Godmother 6/10, 2015 at 18:20

hi @alvaroJoao, I believe all the resources are being loaded before trial1.js because when I try to debug the script file, it runs perfectly until the last line. There appears to be some issue in render() and/or renderAll(). It keeps giving me the error Uncaught TypeError: Cannot read property 'textContent' of null error – Misdoing 7/10, 2015 at 1:58

Moreover, when I use the same code in jsfiddle, it appears to work there perfectly. I dont know what exactly am i missing here! – Misdoing 7/10, 2015 at 1:59

can you post the exact code you are using? or the JSfiddle?@Databases – Godmother 7/10, 2015 at 1:59

here is the link to the jsfiddle : jsfiddle.net/Databases003/6Lp32oah – Misdoing 7/10, 2015 at 2:30

@Databases I have great news! I found what was your problem – Godmother 7/10, 2015 at 6:4

thanks a lot buddy! Works wonders! Just curious though, can i place the script in another file and import it? – Misdoing 7/10, 2015 at 7:26

yep! Np take care. @Databases – Godmother 7/10, 2015 at 12:53

I moved .js file link to the bottom of the html and problem solved.

Goldie answered 3/10, 2020 at 20:24 Comment(0)

link the script at the end of html code that is before the closing body tag.

Forbore answered 27/7 at 4:43 Comment(1)

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Metope 1/8 at 10:28

Recommended topics

Hot tags