CodeCharge Studio
search Register Login  

Web Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> PHP

 Google org chart with CCS and Artisteer design.

Print topic Send  topic

Author Message
saseow

Posts: 735
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? :(
View profile  Send private message
saseow

Posts: 735
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>
View profile  Send private message
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
View profile  Send private message
saseow

Posts: 735
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?
View profile  Send private message
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
View profile  Send private message
saseow

Posts: 735
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!
View profile  Send private message
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
View profile  Send private message
saseow

Posts: 735
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.
View profile  Send private message
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
View profile  Send private message
saseow

Posts: 735
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
View profile  Send private message
saseow

Posts: 735
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!!
View profile  Send private message
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
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

PHP Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.