Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

An extrenal file Json #176

Open
mermi opened this issue Feb 25, 2014 · 0 comments
Open

An extrenal file Json #176

mermi opened this issue Feb 25, 2014 · 0 comments

Comments

@mermi
Copy link

mermi commented Feb 25, 2014

i am tring to import the name of my extrenal Json file by the url so i have change the script of the Radial Graph i need your help to say to me where is the error please
var labelType, useGradients, nativeTextSupport, animate;

(function() {
var ua = navigator.userAgent,
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
typeOfCanvas = typeof HTMLCanvasElement,
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
textSupport = nativeCanvasSupport
&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
//I'm setting this based on the fact that ExCanvas provides text support for IE
//and that as of today iPhone/iPad current text support is lame
labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
nativeTextSupport = labelType == 'Native';
useGradients = nativeCanvasSupport;
animate = !(iStuff || !nativeCanvasSupport);
})();

var Log = {
elem: false,
write: function(text){
if (!this.elem)
this.elem = document.getElementById('log');
this.elem.innerHTML = text;
this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
}
};

function init(){
var pathArray = window.location.search.split( '?' );
var ref=pathArray[1];
var key = ref[4]+ref[5];
var json = $.getJSON("Data/"+key+".json", function(json) {
// console.log(json);
// data is a JavaScript object now. Handle it as such

console.log(json);
//init RGraph
var rgraph = new $jit.RGraph({
//Where to append the visualization
injectInto: 'infovis',
//Optional: create a background canvas that plots
//concentric circles.
//parent box title heights

    background: {
      CanvasStyles: {
        strokeStyle: '#000'
      }
    },
    //Add navigation capabilities:
    //zooming by scrolling and panning.
    Navigation: {
     enable: true,  
     panning: true,  
     zooming: 10
    },
    //Set Node and Edge styles.
    Node: {
        color: '#0000cc'
    },

    Edge: {
      color: '#CCC',
      lineWidth:1.5
    },

    onBeforeCompute: function(node){
        Log.write("centering " + node.name + "...");
        //Add the relation list in the right column.
        //This list is taken from the data property of each JSON node.
        $jit.id('inner-details').innerHTML = node.data.relation;
    },

  //Add the name of the node in the correponding label  
//and a click handler to move the graph.  
//This method is called once, on label creation.  
onCreateLabel: function(domElement, node){  
    domElement.innerHTML = node.name;  
    domElement.onclick = function(){  
        rgraph.onClick(node.id, {  
            onComplete: function() {  
                Log.write("done");  
            }  
        });  
    };  
},
 titleHeight: 15,
//Enable tips
Tips: {
  enable: true,
  //add positioning offsets
  offsetX: 20,
  offsetY: 20,
  //implement the onShow method to
  //add content to the tooltip when a node
  //is hovered
  onShow: function(tip, node) {
    var html = "<div class=\"tip-title\"> salutation:" + node.salutation 
      + "</div><div class=\"tip-text\">"+"<br><div class=\"tip-title\"> Name:" +node.name+"</div><div class=\"tip-text\">"

+"
<div class="tip-title"> Aspect:" +node.aspect+"<div class="tip-text">";

    tip.innerHTML =  html; 
  }  
},

    //Change some label dom properties.
    //This method is called each time a label is plotted.
    onPlaceLabel: function(domElement, node){
        var style = domElement.style;
        style.display = '';
        style.cursor = 'pointer';

        if (node._depth <= 1) {
            style.fontSize = "0.8em";
            style.color = "#494949";

        } else if(node._depth === 2){
            style.fontSize = "0.7em";
            style.color = "#ccc";

        } else {
            style.display = 'none';
        }

        var left = parseInt(style.left);
        var w = domElement.offsetWidth;
        style.left = (left - w / 2) + 'px';
    }
});
//load JSON data
rgraph.loadJSON(json);
//trigger small animation
rgraph.graph.eachNode(function(n) {
  var pos = n.getPos();
  pos.setc(-150, -150);
});
rgraph.compute('end');
rgraph.fx.animate({
  modes:['polar'],
  duration: 2000
});
//end

//append information about the root relations in the right column
//$jit.id('inner-details').innerHTML = rgraph.graph.getNode(rgraph.root).data.relation;

});
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant