Treemap

[Tracy]

I have this code to generate the data for treemap from csv file

private var d:Array;
private var levelOrder:Array = ['Month', 'Startday', 'Weekday',
'LocalIP'];
//private var sub:Array = ['Weekday'];
//private var ip:String = new String();
public function resultHandler(event:ResultEvent):void {
d = new DelimitedTextConverter(',').parse(event.result as
String).nodes.data;
generateTreemapData();
}
public function generateTreemapData():void {
currentState = 'loading';
treemap.data = GraphUtil.treeMap(d, levelOrder, ['Duration',
'Latency'], function(o:Object):Boolean {
return (o.Startday >= 0 && o.Startday <= 32)
});
treemap.addEventListener(DataMouseEvent.MOUSE_OVER, function
(e:DataMouseEvent):void {
if ((e.dataSprite as NodeSprite).childDegree == 0)
{
selectedNode.htmlText = Strings.format("<b>Month:</b> {0}
<br/>" + "<b>Startday:</b> {1:0}<br/>" + "<b>Weekday:</b> {2}<br/>"
+"<b>LocalIP:</b> {3}<br/>" + "<b>Duration:</b> {4:#,###0}<br/>" +
"<b>Latency:</b> {5:#,###0}<br/>" , e.data.Month, e.data.Startday,
e.data.Weekday,e.data.LocalIP,e.data.Duration,e.data.Latency);
}
});
treemap.addEventListener(DataMouseEvent.MOUSE_OUT, function
(e:DataMouseEvent):void {
selectedNode.text = '';
});
currentState = 'complete';
}

Now I create a php file to retrieve data from database, and print it
out as xml format. The code is below:

<?php

$MySQLConnection = mysql_connect( "localhost", "root", "" );

//connecting and picking DB
mysql_select_db( "fyp" );

//making the query from table contactos
$Query = "SELECT * FROM uploaded_data";
$Result = mysql_query( $Query );

/* fetching data and output as xml */
print "<data>\n";

$revdata= array();

while( $Row = mysql_fetch_object( $Result ) )
{
$revdata= $Row;
array_push($revdata, $Row);
print "<dataitem><table_id>".$Row->table_id."</table_id><start>".$Row-
>start."</start><finish>".$Row->finish."</finish><pbx>".$Row->pbx."</
pbx><type>".$Row->type."</type><local_ip>".$Row->local_ip."</
local_ip><remote_ip>".$Row->remote_ip."</remote_ip><duration>".$Row-
>duration."</duration><min_mos>".$Row->min_mos."</min_mos><av_mos>".
$Row->av_mos."</av_mos><hop>".$Row->hop."</hop><max>".$Row->max."</
max><jitb>".$Row->jitb."</jitb><jitter>".$Row->jitter."</
jitter><latency>".$Row->latency."</latency><pkloss>".$Row->pkloss."</
pkloss><pklo>".$Row->pklo."</pklo><pkrc>".$Row->pkrc."</pkrc><pksn>".
$Row->pksn."</pksn><phone>".$Row->phone."</phone><codec>".$Row-
>codec."</codec><startday>".$Row->startday."</startday><finishday>".
$Row->finishday."</finishday><month_No>".$Row->month_No."</
month_No><month>".$Row->month."</month><year>".$Row->year."</
year><startdate>".$Row->startdate."</startdate><finishdate>".$Row-
>finishdate."</finishdate><weekday>".$Row->weekday."</
weekday><starttime>".$Row->starttime."</starttime><finishtime>".$Row-
>finishtime."</finishtime><file_id>".$Row->file_id."</
file_id><file_name>".$Row->file_name."</file_name><username>".$Row-
>username."</username><date_inserted>".$Row->date_inserted."</
date_inserted></dataitem>\n";
//print "<dataitem><month>".$Row->month."</month><startday>".$Row-
>startday."</startday><av_mos>".$Row->av_mos."</av_mos></dataitem>\n";
}
return $revdata;
print "</data>";


?>

How can I change the treemap code above to read the data I retrieve
from the database?

I've been stucked with this for weeks. Help!!!!

[Chris Gemignani]

Hi Tracy:

I hope we can get you unstuck. GraphUtil.treeMap expects to receive as it's first parameter an Array of objects representing each row in your database. 

So the question is how do you convert a bunch of rows from a table in your database to an Array of objects in the browser that JuiceKit can process. One option is to do everything with delimited files.

Change your PHP to output a delimited file ("|" or tab delimited) rather than XML. 

    print "table_id|start|finish|pbx"

    while( $Row = mysql_fetch_object( $Result ) )

    {

        print $Row->table_id . '|' . $Row->start . '|' . $Row->finish . '|' . $Row->pbx . '\n';

    }

Then convert that data

    d = new DelimitedTextConverter('|').parse(event.result as String).nodes.data;

Two things to consider. First, you need a header row. Second, DelimitedTextConverter attempts to guess the data type of each column, which often works well, but can sometimes cause problems.

The second solution is to use XML to transfer the data. Your server side code would be fine. Flex HTTPService has a number of options for converting XML (try HTTPService.resultFormat="array"). Once you have an array of objects, you can call GraphUtil.treeMap.

The thing to consider with XML is that the XML conversion will make everything a string. I'm not sure if this will cause problems in the treeMap generation.

Chris

--
Chris Gemignani
Juice Analytics
phone: 571.205.4789

[Tracy]

Hi Chris,

Thanks a lot for your reply.

I tried to change the server code to use csv as below:

Query = "SELECT * FROM uploaded_data";
$Result = mysql_query( $Query );

/* fetching data and output as xml */

//print "<data>\n";
print "table_id|start|finish|pbx|type|local_ip|remote_ip|duration|
min_mos|av_mos|hop|max|jitb|jitter|latency|pkloss|pklo|pkrc|pksn|phone|
codec|startday|finishday|month_No|month|year|startdate|finishdate|
weekday|starttime|finishtime|file_id|file_name|username|date_inserted
\n";

while( $Row = mysql_fetch_object( $Result ) )
{

print $Row->table_id.'|'.$Row->start.'|'.$Row->finish.'|'.$Row-

>pbx.'|'.$Row->type.'|'.$Row->local_ip.'|'.$Row->remote_ip.'|'.$Row-
>duration.'|'.$Row->min_mos.'|'.$Row->av_mos.'|'.$Row->hop.'|'.$Row-
>max.'|'.$Row->jitb.'|'.$Row->jitter.'|'.$Row->latency.'|'.$Row-
>pkloss.'|'.$Row->pklo.'|'.$Row->pkrc.'|'.$Row->pksn.'|'.$Row-
>phone.'|'.$Row->codec.'|'.$Row->startday.'|'.$Row->finishday.'|'.$Row-
>month_No.'|'.$Row->month.'|'.$Row->year.'|'.$Row->startdate.'|'.$Row-
>finishdate.'|'.$Row->weekday.'|'.$Row->starttime.'|'.$Row-
>finishtime.'|'.$Row->file_id.'|'.$Row->file_name.'|'.$Row-
>username.'|'.$Row->date_inserted.'\n';
}

?>

I use the same code in mxml file to convert the csv to array:

public function resultHandler(event:ResultEvent):void {

d =new DelimitedTextConverter('|').parse(event.result as
String).nodes.data; ;
generateTreemapData();
}
It doesn't show the treemap yet. Did I do anything wrong? Should I
replace the "event.result as String" with anything else so that it can
read from my server code?

Tracy


On Oct 23, 10:43 pm, Chris Gemignani