saseow
Posts: 744
|
| Posted: 05/27/2014, 7:15 AM |
|
Well, this should be easy....simple html from Google demo and that's it.
I cannot get it to work! Putting the code into "head", "Content", adding html, removing html, client "beforeShow" etc. etc.......I am at a loss.
Has anyone got the Google org chart working with CCS and Artisteer design? If so, I would dearly love to know how!
This may just be a very bad day. I dunno! Anyone? Anyone? 
|
 |
 |
saseow
Posts: 744
|
| Posted: 05/27/2014, 7:52 AM |
|
To make it simpler, put this code into a page:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['orgchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true});
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
|
|
|
|
eratech
Posts: 513
|
| Posted: 05/27/2014, 8:18 PM |
|
Hi saseow - I tried the HTML demo from you and that works, so what's the problem you get? Is the chart not running at all in a CSS page?
Eric
_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia |
|
|
|
saseow
Posts: 744
|
| Posted: 05/27/2014, 9:59 PM |
|
Hi Eric, Yup, that is the problem.
It works OK if you call the html page but as soon as you call the php page first, as you do with CCS, the chart will not show. This happens whether you have the design in the page or not.
Obviously I want to pull the names from the database so need the PHP page called first.
Any ideas?
|
|
|
|
eratech
Posts: 513
|
| Posted: 05/28/2014, 3:35 AM |
|
I've had something similar with google maps - I wanted the fields to load before I loaded the map.
The examples use something similar to the jQuery document.ready to fire after all is loaded:
google.maps.event.addDomListener(window, 'load', initialize);
where 'initialize' is my map setup, which in turn gets the address and map - so I suspect you would find something similar for the google.visualization...?
I can provide the full google map code if you need a pointer.
Eric
_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia |
|
|
|
saseow
Posts: 744
|
| Posted: 05/28/2014, 3:42 AM |
|
The problem is even more basic than that.
If a take a CCS page without any design and put the google code into the html and then call it like org.php nothing is diplayed. If however I call org.html it shows correctly.
This is the first hassle I have to overcome and then I will tackle loading the data from the Db.
Thanks for your input Eric!
|
|
|
|
eratech
Posts: 513
|
| Posted: 05/29/2014, 10:13 PM |
|
If the org.php isn't working, are you sure it's loading the template org.html? (I'm assuming it is, and only the org chart is not showing, but always good to check)
I'll try out a simple example with the code you gave (I did pure HTML, so will load it into CCS). It still sounds like something is not triggering - does Javascript Console (Firebug/Development Tools) show any errors?
Eric
_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia |
|
|
|
saseow
Posts: 744
|
| Posted: 05/30/2014, 12:09 AM |
|
Hi Eric,
Yup, that's exactly it. It is loading the HTML but something is not being triggered.
To get the data from the Db via PHP is something else entirely. There are a few examples using JSON on the web that I will look at but presently, I just want to know why the hard-coded html values do not show.
Very strange.
|
|
|
|
eratech
Posts: 513
|
| Posted: 05/31/2014, 2:00 AM |
|
Checked it out - there is a javascript error on the line that draws the charts, and I've confirmed it is the {allowHtml:true} because I think the PHP templating language is confusing it for a CCS field.
Move the configuration out to a separate variable and it will work:
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
var options = {allowHtml: true};
chart.draw(data, options);
And thanks for introducing me to the Org chart tool - there are a heap of these visualisation tools to play with.
Eric
_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia |
|
|
|
saseow
Posts: 744
|
| Posted: 05/31/2014, 2:30 AM |
|
Thank you Eric,
I will look at this early next week. Busy weekend here. :)
Thanks again and I will let you know how it goes with this and also with getting the data from MySQL.
Trevor
|
|
|
|
saseow
Posts: 744
|
| Posted: 06/27/2014, 11:20 PM |
|
Finally had a chance to look at this. The graphics are still been overwritten when using Artisteer and I don't think there is anything that can be done about that, but getting data from the database is straight forward. This code is very rough as a proof of concept but the idea will be to get data from a table, assign the data to arrays and then loop through them deciding which formatting to use depending on whether the person has children or not. Multidimension arrays will be the easiest way to go in the final code.
Create a label in the html:
data.addRows([
{Lbl_chart_data}
]);
Then in the before show event of that label, do the data coding. The below is very rough but hopefully you can follow the idea:
$id[0] = 0;
$parent_id[0] = 0;
$name[0] = "Mrs. Mitchell";
$details[0] = "Head Honcho";
$tt[0] = "mm@mm.com";
$id[1] = 1;
$parent_id[1] = $id[0];
$name[1] = "Bill Tong";
$details[1] = "Sub-Head Honcho";
$tt[1] = "+27 21 555-6666";
$id[2] = 2;
$parent_id[2] = $id[0];
$name[2] = "Alice Strange";
$details[2] = "";
$tt[2] = "Right up there!";
$id[3] = 3;
$parent_id[3] = $id[1];
$name[3] = "Phillip Gagny";
$details[3] = "Regional Sales";
$tt[3] = "Some Tooltip";
$id[4] = 4;
$parent_id[4] = $id[1];
$name[4] = "Carol Gregory";
$details[4] = "Global Sales";
$tt[4] = "Carols Tooltip";
$id[5] = 5;
$parent_id[5] = $id[1];
$name[5] = "Jim Lacey";
$details[5] = "Groundsman";
$tt[5] = "";
$str = "[{v:'".$id[0]."', f:'".$name[0]."<div style=color:red; font-style:italic>".$details[0].".</div>'}, '', '".$tt[0]."'],";
$str = $str."[{v:'".$id[1]."', f:'".$name[1]."<div style=color:red; font-style:italic>".$details[1]."</div>'}, '".$id[0]."', '".$tt[1]."'],";
$str = $str."['".$name[2]."', '".$parent_id[2]."', '".$tt[2]."'],";
$str = $str."[{v:'".$id[3]."', f:'".$name[3]."'}, '".$parent_id[3]."', '".$tt[3]."'],";
$str = $str."['".$name[4]."', '".$id[3]."', '".$tt[4]."'],";
$str = $str."['".$name[5]."', '".$id[3]."', '']";
$Component->SetValue($str);
At least I now know that using the Google Org Chart with CCS data is very feasable.
Thanks for your input Eric!!
|
|
|
|
eratech
Posts: 513
|
| Posted: 07/01/2014, 12:53 AM |
|
No problems - you introduced me to the Org Tool. 
E
_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia |
|
|
|
|
