Ενσωμάτωση στο Drupal περιεχομένου που χρησιμοποιεί Javascript

Καλησπέρα

Σε ένα πρότζεκτ που έχουμε θέλω να προσπαθήσω να κρεμάσω κάτω από ένα site που δουλεύει με Drupal μια στατική σελίδα που είναι οπτικοποίηση κάποιων δεδομένων με χρήση μιας βιβλιοθήκης Javascript που λέγεται sigma.js.

Έχω λοιπόν παράγει κάποια visualizations όπως για παράδειγμα εδώ. Αυτά τα παραδείγματα έχουν παραχθεί μέσω ενός plugin που διαβάζει το γράφημα και παράγει ένα template σελίδας που περιέχει το visualization.

Εν συντομία ήθελα ιδανικά να προσπαθήσω να το κάνω ενσωμάτωση σε κάποιο page ή σε κάποιο block. Έχω λοιπόν φτιάξει ένα page template

page--js-test.tpl.php

και με παρόμοια βήματα με αυτά που περιγάφονται εδώκατάφερα να προβάλλω τουλάχιστον ένα d3.js script στη σελίδα μου.

Αυτό που έχω κάνει είναι να γράψω όλον τον κώδικα που κάνει render τη γραφική σε ένα αρχείο test.js και να βάλω στην page--js-test.tpl.php

              	
drupal_add_js(drupal_get_path('theme', 'pixture_reloaded') . '/d3.min.js');
drupal_add_js(drupal_get_path('theme', 'pixture_reloaded') . '/test.js');

Κάτι σημαντικό για να το κάνουμε να δουλέψει στο Drupal είναι να βάλουμε όλο(;) τον Javascript κώδικα από το test.js σε

jQuery(document).ready(function($) {
//d3 κώδικας
});

Το πρόβλημά μου είναι ότι δεν ξέρω Javascript παρατηρώ όμως ότι στο visualization που θέλω να κάνω render ξεκινάει ο κώδικας ως εξής:

var sigInst, canvas, $GP

//Load configuration file
var config={};

//For debug allow a config=file.json parameter to specify the config
function GetQueryStringParams(sParam,defaultVal) {
    var sPageURL = ""+window.location;//.search.substring(1);//This might be causing error in Safari?
    if (sPageURL.indexOf("?")==-1) return defaultVal;
    sPageURL=sPageURL.substr(sPageURL.indexOf("?")+1);    
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
    return defaultVal;
}

jQuery.getJSON(GetQueryStringParams("config","config.json"), function(data, textStatus, jqXHR) {
	config=data;
	
	if (config.type!="network") {
		//bad config
		alert("Invalid configuration settings.")
		return;
	}
	//As soon as page is ready (and data ready) set up it
	$(document).ready(setupGUI(config));
});//End JSON Config load

Αν δείτε λοιπόν στο τέλος λέει $(document).ready(setupGUI(config));οπότε αυτό που κάνει, μέχρι όσο καταλαβαίνω, είναι να καλεί την $(document).ready();αφού έχει κάνει κάποιες αρχικοποιήσεις στα δεδομένα του και μετά στην ουσία σετάρει το GUI του.

Ξέρει κανείς αν αρκεί στο Drupal σε αυτό το σημείο να κληθεί η $(document).readyή θα πρέπει να την καλέσουμε κάπως αλλιώς; Οποιαδήποτε άλλη λύση π.χ. με behaviours νομίζετε ότι μπορεί να υλοποιηθεί, εγώ μέσα!

Επίσης εναλλακτικά μπορώ να βάλω κάτι πιο απλό πχ mysite.com/visualizations το οποίο θα βγαίνει εντελώς από το Drupal αλλά είπα να δοκιμάσω με Drupal πρώτα.

Συγγνώμη που σας κούρασα με το μακροσκελές ποστ. Καλή δύναμη σε όλους/όλες