Chartist-js: Uncaught TypeError: Cannot read property 'querySelector' of null

Created on 20 Nov 2014 · 6Comments · Source: gionkunz/chartist-js

Hi, Im using the example code of the site "a easy as it gets" and keep running in to this bug. I've tried the cdn files as well as local files.

Im probably missing something obvious, but I cant figure out what and since its not working "out of the box" I thought it might be a good idea to add this as an issue. (If Im an idiot, I apologize in advance)

I have the code running here http://stevenliemberg.nl/chartist-issue/index.html

Source

stevenliemberg

Most helpful comment

Hey there :-)

The problem is that your selector does not return any elements at the stage when your script is executed (as for blocking script elements, they will be fully downloaded AND executed at the exact place where the DOM parser discovers them). You will either need to wrap your script into an event callback for DOM ready:

document.addEventListener('DOMContentLoaded',function(){
  /*Your chartist initialization code here*/
});

Or, like I'd suggest you anyway, move all your script elements down in the DOM just before the body close tag (as at this point the parser already knows about your element with the class ct-chart):

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
  </head>
  <body>
    <div class="ct-chart ct-square"></div>

    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script>


var data = {
  // A labels array that can contain any sort of values
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
};

// As options we currently only set a static size of 300x200 px. We can also omit this and use aspect ratio containers
// as you saw in the previous example
var options = {
  width: 300,
  height: 200
};

// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object. As a third parameter we pass in our custom options.
new Chartist.Bar('.ct-chart', data);
    </script>
  </body>
</html>

Maybe, we could be a bit more verbose with our error messages ;-)

gionkunz on 20 Nov 2014

👍13 🚀1 ❤1 😄1

All 6 comments

Hey there :-)

document.addEventListener('DOMContentLoaded',function(){
  /*Your chartist initialization code here*/
});

Or, like I'd suggest you anyway, move all your script elements down in the DOM just before the body close tag (as at this point the parser already knows about your element with the class ct-chart):

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
  </head>
  <body>
    <div class="ct-chart ct-square"></div>

    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script>


var data = {
  // A labels array that can contain any sort of values
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
};

// As options we currently only set a static size of 300x200 px. We can also omit this and use aspect ratio containers
// as you saw in the previous example
var options = {
  width: 300,
  height: 200
};

// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object. As a third parameter we pass in our custom options.
new Chartist.Bar('.ct-chart', data);
    </script>
  </body>
</html>

Maybe, we could be a bit more verbose with our error messages ;-)

gionkunz on 20 Nov 2014

👍13 🚀1 ❤1 😄1

Thank you very much for your quick reply, your suggestion on moving everything below the closing body tag works. Hope this will help someone with the same issue in the future. :-)

stevenliemberg on 20 Nov 2014

❤6 👍5 👀1 🚀1 😕1 🎉1 😄1 👎1

@gionkunz Hi!

I have the same issue, but i am coding with meteor, hence i am not able to use the solution as above. May i know if there is an alternative for meteor apps?

weijian19391 on 27 Jul 2015

I experienced this issue. Here's how to fix with Meteor and/or jQuery.
Place this code in the OnRendered() event for the template.

if ( typeof Chartist === 'undefined' ) return;

    if (!$('#ct-chartA').length)
        return;

    if (!$('#ct-chartB').length)
        return;

    if (!$('#ct-chartD').length)
        return;

This checks for Chartist, then it checks to see if the DOM objects that Chartist will use are created before allowing to proceed with loading Chartist data and parameters.

wiserweb on 14 Dec 2015

//error = //// in line 43

-----------------Android Studio--------------
Erron:"Uncaught TypeError: Cannot read property 'querySelector' of null"

Somebody get fix issue?

D/CordovaWebViewImpl: onPageFinished(file:///android_asset/www/outra_pagina.html?id_titulo=1)
D/SystemWebChromeClient: file:///android_asset/www/js/index.js: Line 43 : Uncaught TypeError: Cannot read property 'querySelector' of null
I/chromium: [INFO:CONSOLE(43)] "Uncaught TypeError: Cannot read property 'querySelector' of null", source: file:///android_asset/www/js/index.js (43)
D/SystemWebChromeClient: file:///android_asset/www/js/index.js: Line 43 : Uncaught TypeError: Cannot read property 'querySelector' of null
I/chromium: [INFO:CONSOLE(43)] "Uncaught TypeError: Cannot read property 'querySelector' of null", source: file:///android_asset/www/js/index.js (43)

var db = null;
var db2 = null;
var db3 = null;
var dbUser = null;
var dbName = "estudos.db";

var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},

// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
    this.receivedEvent('deviceready');
},

// Update DOM on a Received Event
receivedEvent: function(id) {
    var parentElement = document.getElementById(id);

   #

//// var listeningElement = parentElement.querySelector('.listening');//// error line 43

    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');


    // OPERACOES BD - inicio

    //banco de dados local - aceite de termos e outras coisas
    dbUser = window.sqlitePlugin.openDatabase({name: 'user.db', location: 'default'});
    dbUser.transaction(function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS Users (flg_aceite, flg_valid_bd)');
    }, function(error) {
        alert('Transaction ERROR: ' + error.message);
    }, function() {
        console.log('Database OK');
    });

    //copia do banco de dados de estudos
    window.plugins.sqlDB.copy(dbName, 0, copysuccess, copyerror);
    // OPERACOES BD - fim
}

};

app.initialize();

//---------------------------------------------------------------

function copysuccess()
{
//primeira versão deste banco de dados. o comando anterior.
//provavelmente realizou a cópia, abro o BD.
db = window.sqlitePlugin.openDatabase({name: dbName});
//preciso verificar se existem versões anteriores deste BD. Deleto por precaucao
dropTable();
fts_table();
}

//---------------------------------------------------------------

function fts_table(){
db.transaction(function(tx) {
tx.executeSql('CREATE VIRTUAL TABLE vtestudos USING FTS3(titulo, texto, id_titulo)', [], function(tx,res){
//alert("nao deu erro");
//db = window.sqlitePlugin.openDatabase({name: "vtestudos"});
//alert("uai. deu pra abrir");

      db.transaction(function(tx) {
      tx.executeSql('INSERT INTO vtestudos(titulo, texto, id_titulo) SELECT titulo, texto, id_titulo FROM estudos', [], function(tx,res){
          //db3 = window.sqlitePlugin.openDatabase({name: "vtestudos"});
           console.log('insert ok');
      });
      }, function(err){
          alert(err.message);
      });

});
}, function(err){
    alert(err.message);
});

}

//---------------------------------------------------------------

function dropTable()
{
window.plugins.sqlDB.remove("estudosprev1", 0, rmsuccess,rmerror);
window.plugins.sqlDB.remove("estudosprev2", 0, rmsuccess,rmerror);
}

function rmsuccess()
{
//existe versão anterior
//alert("removesuccess");
console.log('existe versão anterior');
}

function rmerror(e)
{
//não existe versão anterior. ignoro.
//alert("removeerror" + JSON.stringify(e));
console.log('n existe versão anterior. ignoro.');
}

GustavoDesc on 24 Mar 2017

Thanks for the answer, it worked.

But why not put this in the "AS SIMPLE AS IT CAN GET" section to save frustration? Right now the instructions "here is some Javascript code, put it somewhere somehow" leave much to be desired.