I has probaly been asked a lot of times and i ve read lots of threads about it, but simple cant figure it out how to pass a json data pbject from php to java script.
I am am trying to get two single-dimensional json data object arrays(?) from a database and merge them into a two dinemsional json data object array which is then further passed to sigma.js for further processing.
Reading data from database:
<?php
require 'sort.php';
$db = db();
$rawNodes = $db->select('node', '*', ['ico_id' => $_GET['id']]);
$rawEdges = $db->select("edge", "*", ["ico_id" => $_GET['id']]);
$nodes = array();
foreach ($rawNodes as $node) {
array_push($out, $node);
}
$edges = array();
foreach ($rawEdges as $edge) {
array_push($out, $edge);
}
?>
now accessing it in Java Script:
<html>
<head>
<title>Dynamic Transaction Visualization </title>
<style type="text/css">
#container {
max-width: 1200px;
height: 800px;
margin: auto;
}
</style>
<script src="build/sigma.min.js"></script>
<script src="build/plugins/sigma.parsers.json.min.js"></script>
<script src="build/plugins/sigma.renderers.edgeLabels.min.js"></script>
<script>
function getData () {
var gnodes = <?php echo json_encode($nodes); ?>;
var gedges = <?php echo json_encode($edges); ?>;
alert(gnodes[0].adress); // <- Doesnt work? Why?
var g = {nodes: [], edges: []}; //<- i think this sytanx is correct for making a 2 dim json data object array- is it?
var xpos = 0;
var ypos = 0;
var n;
for (n in gnodes) { //<- Does not iterate through any Elements
alert(gnodes[n].adress); //<- Doest work either? Why?
xpos = n.block_number - 4400000;
ypos += 100;
if (ypos > 10000) { ypos = 0 }
g.nodes.push(
{
"id": n.adress,
"label": n.adress,
"size": 1, //n.size,
"x": xpos,
"y": ypos
}
)
}
var edgecount = 0;
var m;
for (m in gedges) {
g.edges.push(
{
"id": edgecount++,
"source": m.node_adress1,
"target": m.node_adress2,
"label": m.erc20_value,
"type": "arrow"
}
)
}
//g.nodes = gnodes; geht nicht benennung nicht passend
//g.edges = gedges;
return g;
}
function dispGraph() {
var gdata = getData();
s = new sigma({
graph: gdata,
container: 'container',
renderer: {
container: "container",
type: "canvas"
},
settings: {
edgeLabelSize: 'fixed',
nodeLabelSize: 'fixed',
defaultNodeColor: '#ec5148',
maxNodeSize: 15,
minNodeSize: 5,
minEdgeSize: 4,
maxEdgeSize: 4,
minArrowSize: 4,
//edgeLabelSize: 'fixed',
// {string} The opposite power ratio between the font size of the label and
// the edge size:
// Math.pow(size, -1 / edgeLabelSizePowRatio) * size * defaultEdgeLabelSize
edgeLabelSizePowRatio: 1,
// {number} The minimum size an edge must have to see its label displayed.
edgeLabelThreshold: 1,
}
});
}
</script>
</head>
<body>
<div id="container"></div>
<script>dispGraph()</script>
</body>
</html>
Bismark Asiedu Asante
1402 silver badges16 bronze badges
asked Nov 15, 2017 at 23:45
Lorenz Kummer
753 silver badges11 bronze badges
2 Answers 2
I think it is easy. In the html file (with .php extension):
<?php $json = json_encode($data); ?>
<script>
var json = <?=$json?>;
</script>
Sign up to request clarification or add additional context in comments.
4 Comments
Lorenz Kummer
doesnt seem to work for me :/. what could i be doeing wrong?
paulz
paulz
Change
$out to $nodes in array_push()Lorenz Kummer
Thanks you so much! That did the trick. I dont know how i could have missed that.
Paul Zheng helped me with the following correcttion
1)
Change $out to $nodes in array_push()
2)
<?php $json = json_encode($data); ?>
<script>
var json = <?=$json?>;
</script>
Thanks everybody for your contribution!
answered Nov 16, 2017 at 12:11
Lorenz Kummer
753 silver badges11 bronze badges
Comments
default
echo. You can make the output hidden if you want, but it needs to be outputted.console.log(gnodes[0])show? Are you sure the column name isadress? That looks like a typo foraddress.