I have some js code to make organizational chart. I made an array of id's, names, etc; I need to fill the js data array but i can't do it. This is the original code:
<script>
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
[{'v':'Peter', 'f':'Peter J.<div style="color:red; font-style:italic"></div>'},
`'${jre}'`, 'VP'],
[{'v':'u-red1', 'f':'ured 40<div style="color:red; font-style:italic">unconfrmed</div>'},
`'${jre}'`, 'VP'],
[{'v':'u-red2', 'f':'ured 42<div style="color:red; font-style:italic">unconfrmed</div>'},
`'${jre}'`, 'VP'],
[{'v':'Felix', 'f':'Felix02<div style="color:red; font-style:italic">Sales</div>'},
'Louis', 'Salesman'],
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {
'allowHtml': true
});
}
</script>
i made an array in php and passe by json to the function in order to populate the js function with data from a MySQL data table but i can make it work... i believe my logic its clear but i can code it .... this its what i make.... or at least the last effort to make it work... ... i know the json array passed works fine because if i cant display the array values (const's jid, jpa etc) correctly
<script>
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var passedArray = <?php echo json_encode($reeco_net); ?>;
const jid =(passedArray[0][0]);
const jpa =(passedArray[0][1]);
const jav =(passedArray[0][2]);
const jcd =(passedArray[0][3]);
const jre=(passedArray[0][4]);
const jno=(passedArray[0][5]);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
const rrr="[{'v':`'${jre}'`, 'f':`${jno}`+ '<a href="hhh.com?thx='+jid+'"><button type="button" style="border:none;background-color: transparent;"><img class="table-avatar circular-square_v" src="../img/avatar/'+jav+'" width="40px" height="40px"></button></a>'},
'', 'toolTip'],";
data.addRows([
`'${rrr}'`;
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {
'allowHtml': true
});
}
</script>
plsss some help ... tnx i advance....
<script>
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
[{'v':'Peter', 'f':'Peter J.<div style="color:red; font-style:italic"></div>'},
`'${jre}'`, 'VP'],
[{'v':'u-red1', 'f':'ured 40<div style="color:red; font-style:italic">unconfrmed</div>'},
`'${jre}'`, 'VP'],
[{'v':'u-red2', 'f':'ured 42<div style="color:red; font-style:italic">unconfrmed</div>'},
`'${jre}'`, 'VP'],
[{'v':'Felix', 'f':'Felix02<div style="color:red; font-style:italic">Sales</div>'},
'Louis', 'Salesman'],
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {
'allowHtml': true
});
}
</script>
i made an array in php and passe by json to the function in order to populate the js function with data from a MySQL data table but i can make it work... i believe my logic its clear but i can code it .... this its what i make.... or at least the last effort to make it work... ... i know the json array passed works fine because if i cant display the array values (const's jid, jpa etc) correctly
<script>
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var passedArray = <?php echo json_encode($reeco_net); ?>;
const jid =(passedArray[0][0]);
const jpa =(passedArray[0][1]);
const jav =(passedArray[0][2]);
const jcd =(passedArray[0][3]);
const jre=(passedArray[0][4]);
const jno=(passedArray[0][5]);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
const rrr="[{'v':`'${jre}'`, 'f':`${jno}`+ '<a href="hhh.com?thx='+jid+'"><button type="button" style="border:none;background-color: transparent;"><img class="table-avatar circular-square_v" src="../img/avatar/'+jav+'" width="40px" height="40px"></button></a>'},
'', 'toolTip'],";
data.addRows([
`'${rrr}'`;
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {
'allowHtml': true
});
}
</script>
plsss some help ... tnx i advance....