|
 Dates in x-axis bubble chart |
| Posted by Jorge Eduardo on May-04-2013 05:41 |
|
Hi Peter:
I have an issue with dates on x-axis in a bubble chart. My three layers of data are:
i) dates for the x-axis;
ii) hours for the y-axis;
iii) value for the z: bubble radius.
Attached is:
i) db_output.png: shows the results from the database
ii) parsed_data.png: data parsed to the chart
iii) actual_bubble.png: chart output.
iv) expected_chart.png: draft of what I need.
I assume that the chart is not managing value dates as well, and instead is assigning
ordinals.
Hope you can, as always, help me to deal with it.
I just want to generate a scatter chart which shows traffic or money spent at a day an at
an hour:
create.
Thanks,
Jorge.
|
| Re: Dates in x-axis bubble chart |
| Posted by Peter Kwan on May-06-2013 23:13 |
|
Hi Jorge,
For "dates", in general, the date should be a date as according to your programming language. ("Dates" in a human language is usually for displaying to human. They may not be useful for further processing by the computer.)
However, in PHP, there is no such thing as date (unlike other programming languages such as java.awt.Date in Java, System.DateTime in .NET, etc). A common date representation in PHP is to use a number representing the seconds elapsed since Jan 1, 1970 00:00:00 GMT. Many database has a function to retrieve the date as this number. For example, in MySQL, there is a UNIX_Timestamp function that can retrieve the date as a number representing the seconds elapsed since Jan 1, 1970 00:00:00 GMT.
For your case, I suggest you modify your code so that the "dates" in the URL is in "UNIX timestamp".
Then in the charting code, you may convert the "UNIX timestamp" into "chartTime" using:
$myXData = map(chartTime2, explode(",", $_GET["data_x"]));
The $myXData can then be used as the x-coordinates of your scatter chart.
ChartDirector will auto-scale the x-axis and will use a default date format. If you would like to specify the date format to be dd-mmm-yy, you may use:
$c->xAxis->setLabelFormat("{value|dd-mmm-yy}");
Hope this can help.
Regards
Peter Kwan |
| Re: Dates in x-axis bubble chart |
| Posted by Jorge Eduardo on May-07-2013 18:24 |
|
Hi Peter thanks for the answer. Yes indeed in did as you recommended However I found
an issue with map(). Haven't found yet in chartdirector manual, and at this moment it
doesn't seem to work, just works chartTime2(explode(",", $_GET["data_x"])); but not
autoscaled. I think the issue is with map().
Thanks,
Jorge |
| Re: Dates in x-axis bubble chart |
| Posted by Peter Kwan on May-07-2013 23:49 |
|
Hi Jorge,
Sorry. In PHP, the map should be "array_map", like:
$myXData = array_map("chartTime2", explode(",", $_GET["data_x"]));
Basically, the above is just applying chartTime2 to every element of the array. You can also use:
$myXData = explode(",", $_GET["data_x"]);
for ($i = 0; $i < count($myXData); ++$i)
$myXData[$i] = chartTime2($myXData[$i]);
Hope this can help.
Regards
Peter Kwan |
| Re: Dates in x-axis bubble chart |
| Posted by Jorge Eduardo on May-08-2013 02:07 |
|
| Working as expected Peter. Thanks again for the quick an efficient response. |
| Re: Dates in x-axis bubble chart |
| Posted by Jorge Eduardo on May-09-2013 01:05 |
|
Hi Peter, however I found an issue with dates. They represent a different date, with year
44.
I attached the data output, the actual generated bubbles, and here is the code to
manipulate specifically this data.
$data_x= explode(",", $_GET["data_x"]);
$labels = array_map(chartTime2, $data_x);
$c->xAxis->setLabelStyle("arial.ttf", 7, "", 45);
$c->xAxis->setLabelFormat("{value|dd-mmm-yy}");
Don't understand what is hapenning or if its a matter of how dates are stored in the mySql
database.
Thanks again. Jorge.
|
| Re: Dates in x-axis bubble chart |
| Posted by Peter Kwan on May-09-2013 13:34 |
|
Hi Jorge,
Would you mind to clarify if you are using $data_x to plot the chart, or are you using $labels?
In your code, $labels should be used, not $data_x. $data_x is just an intermediate temporary variable and has no other purpose. In my original code, I simply combine the two lines together into:
$labels = array_map(chartTime2, explode(",", $_GET["data_x"]));
But if your like, you can split them into two lines like in your current code, but just don't use the $data_x in the chart.
Hope this can help.
Regards
Peter Kwan |
| Re: Dates in x-axis bubble chart |
| Posted by Jorge Eduardo on May-10-2013 06:12 |
|
HI Peter:
I'm using the data from the database as this:
column 1: Unix timestamp is data_x, which I use as x axis in the scatter plot.
Column 2: Hour is data_y as y axis.
Column 3: avg_bill is data_z which gives the circle radius.
Here is the code to generate the chart:
# The XYZ points for the bubble chart
$data_x= explode(",", $_GET["data_x"]);
$data_y= explode(",", $_GET["data_y"]);
$data_z= explode(",", $_GET["data_z"]);
$labels = array_map(chartTime2, $data_x);
# Create a XYChart object of size 450 x 420 pixels
$c = new XYChart(350, 220);
# Set the plotarea at (55, 65) and of size 350 x 300 pixels, with a light grey border
# (0xc0c0c0). Turn on both horizontal and vertical grid lines with light grey color
# (0xc0c0c0)
$c->setPlotArea(25, 5, 320, 170, -1, -1, 0xc0c0c0, 0xc0c0c0, -1);
# Add a legend box at (50, 30) (top of the chart) with horizontal layout. Use 12 pts
# Times Bold Italic font. Set the background and border color to Transparent.
#$legendObj = $c->addLegend(15, 15, false, "arialbd.ttf", 10);
#$legendObj->setBackground(Transparent);
# Add a title to the chart using 18 pts Times Bold Itatic font.
#$c->addTitle("relacion altura peso edad", "arialbd.ttf", 11);
# Add a title to the y axis using 12 pts Arial Bold Italic font
$c->yAxis->setTitle("hora", "arialbd.ttf", 10);
# Add a title to the x axis using 12 pts Arial Bold Italic font
$c->xAxis->setTitle("fecha", "arialbd.ttf", 10);
# Set the axes line width to 3 pixels
$c->xAxis->setWidth(3);
$c->yAxis->setWidth(3);
#$c->xAxis->setLabels($labels);
$c->xAxis->setLabelStyle("arial.ttf", 7, "", 45);
$c->xAxis->setLabelFormat("{value|dd-mmm-yy}");
# Add (dataX0, dataY0) as a scatter layer with semi-transparent red (0x80ff3333)
# circle symbols, where the circle size is modulated by dataZ0. This creates a bubble
# effect.
$scatterLayerObj = $c->addScatterLayer($data_x, $data_y, "", CircleSymbol, 9,
0x80ff3333, 0x80ff3333);
$scatterLayerObj->setSymbolScale($data_z);
# Output the chart
header("Content-type: image/png");
print($c->makeChart2(PNG)); |
| Re: Dates in x-axis bubble chart |
| Posted by Peter Kwan on May-10-2013 17:30 |
|
Hi Jorge,
As mentioned in my previous message, in your code, the $data_x has no purpose. Please use $labels instead:
$scatterLayerObj = $c->addScatterLayer($labels, $data_y, "", CircleSymbol, 9,
0x80ff3333, 0x80ff3333);
If you like to use the $data_x variable name, please change your variable name to use $data_x:
#Change your variable name from $labels to $data_x if you like to use the $data_x name
$data_x = array_map(chartTime2, $data_x);
Hope this can help.
Regards
Peter Kwan |
| Re: Dates in x-axis bubble chart |
| Posted by Jorge Eduardo on May-10-2013 19:06 |
|
Ok Peter, I got it. I was using $data_x without transforming, no callback to chartime2.
Thanks,
The last issue I see is that the labels are not perfectly aligned with bubbles.
Please check last chart column, the bubble is alone and no x axis label identifies it. It's
like labels are displaced 1 position from data.
Thanks, JOrge
|
| Re: Dates in x-axis bubble chart |
| Posted by Peter Kwan on May-11-2013 00:49 |
|
Hi Jorge,
Both the labels on the y-axis (0, 5, 10, 15, ....) and on the x-axis (02-Apr, 05-Apr, 08-Apr, ...) do not align with your data. It is normal for an auto-scaled axis.
For example, if you have a data point at 4-May-2013 15:33:11, and ChartDirector choose to use daily labels, it is normal the data point "4-May-2013 15:33:11" does not align with any daily labels. Similarly, if your chart has a wide date range and ChartDirector chooses a monthly label, but you have data point at "7-May-2013", it will not align with any monthly labels.
For the chart you attached, ChartDirector happens to choose to put one label every 3 days. I am not sure what are your data. From the chart, it looks like the last data point is at 07-May, and it is not a label position (the previous label position is 05-May and the next label position will be 08-May), so that bubble is not align with any x-axis label.
If you want the axis scale to extend a little bit beyond your data range (even if your data are only up to 07-May, you would like the x-axis to extend beyond 07-May), you may add some scale extension usnig Axis.setAutoScale. You may also enable minor ticks or more ticks are displayed. For your case, if you enabled minor ticks, you may see small daily ticks in addition to one label per 3 days.
$c->xAxis->setAutoScale(0.05, 0.05, 0);
$c->xAxis->setTickDensity(20, 5);
Hope this can help.
Regards
Peter Kwan |
| Re: Dates in x-axis bubble chart |
| Posted by Jorge Eduardo on May-25-2013 00:06 |
|
Hi Peter,
Yes indeed it worked for me but due to the difference of scales, ubix timestamp in seconds
and my data related to hours, if used the unix_timestamp for days, transformig the
selected column like this: UNIX_TIMESTAMP( DATE( DATE_SUB( utc_starttime, INTERVAL 5
HOUR ) ) ) .
Thanks for your excellent support,
Jorge |
| Re: Dates in x-axis bubble chart |
| Posted by Jorge Eduardo on May-28-2013 05:35 |
|
Hi Peter, again I have some issues with the chart, which I haven't accomplished to
complete as requested.
First I attach an image of my actual charts. I have three issues:
i) It's generating many x fields, more than required, for example on May 26 there is no
data, and there are many May 27.
ii) I want to start y-axis from say 8:00 am, but instead it starts from 0.
iii) I want to format hour (y-axis) as time, HH:00. Even do I am outputting DB data
formatted as HH:00. Second image is actual query output.
Finally here is the actual code used to generate the chart:
$data_x= explode(",", $_GET["data_x"]);
$data_y= explode(",", $_GET["data_y"]);
$data_y = array_map(chartTime2, $data_y); //tranformo unix date a fecha legible
$data_z= explode(",", $_GET["data_z"]);
$c = new XYChart(350, 250);
$c->setPlotArea(55, 20, 285, 190, -1, -1, 0xc0c0c0, 0xc0c0c0, -1);
$c->yAxis->setTitle("hora: 24h", "arialbd.ttf", 8);
$c->xAxis->setTitle("fecha", "arialbd.ttf", 8);
$c->xAxis->setWidth(3);
$c->yAxis->setWidth(3);
$c->xAxis->setLabelStyle("arial.ttf", 7, "", 0);
$c->xAxis->setLabelFormat("{value|dd-mmm}");
$c->yAxis->setAutoScale(0.1, 0.1, 0.8);
$c->yAxis->setTickDensity(30, -1);
$c->yAxis->setLabelFormat("{value|2}");
$scatterLayerObj = $c->addScatterLayer($data_y, $data_x, "", CircleSymbol, 12,
0x80ff3333, 0x80ff3333);
$scatterLayerObj->setSymbolScale($data_z);
header("Content-type: image/png");
print($c->makeChart2(PNG));
Thanks in advance, Jorge
|
| Re: Dates in x-axis bubble chart |
| Posted by Peter Kwan on May-28-2013 17:22 |
|
Hi Jorge,
According to your output, the y-coordinate is 09:00, 10:00, 11:00 and 12:00. These things are only for human reading, and are not meaning to PHP. (According to PHP syntax, "09:00" has no particular meaning and is just a text string, just like the text string "Apple" has no particular meaning to the computer language but can be used for human reading.) If you pass "09:00" to PHP, I think it will probably convert it to a number 9 in numeric format (ignoring the part ":00" as they are illegal in PHP syntax).
To confirm what you are using as the y-coordinate, may be you can inform me what is in your URL (the data_x=....&data_y=....), so as to help me understand what exactly are from your database.
If your UNIX timestamps are in the x-coordinates, please apply chartTime2 to data_x, not to data_y:
$data_x = array_map(chartTime2, $data_x);
For the y-axis range, ChartDirector will auto-scale the y-axis. If you do not want the y-axis to have a tendency to start from 0, please do not use 0.8 as the zero affinity parameter. It is better to simple use 0.
$c->yAxis->setAutoScale(0.1, 0.1, 0);
If you want to the y-axis format to be hh:nn, please use:
$c->yAxis->setLabelFormat("{={value}*86400|hh:nn}");
For the x-axis, it seems all your data are at 26 May, 00:00:00. ChartDirector has no way to know what should be the x-axis range (should the entire x-axis be 1 day, 1 year, 1 hour or 1 second?). I suspect ChartDirector simply uses 1 day as the x-axis range, and then put a label every 6 hours. So the labels are 26 May 12:00, 26 May 18:00, 27 May 00:00, 27 May 06:00 and 27 May 12:00. But then your code ask ChartDirector not to display the hh:nn part, so it becomes 26 May, 26 May, 27 May, 27 May, 27May.
To avoid the above labelling problem, your label format should be appropriate for your date range. For example, if your date range is 1 hour, you may want to use a label format that shows hour and minute. If your date range is 10 years, you may just need to show the year and month part.
ChartDirector can automatically infer a date range from your data. However, if you want to specify a date range not reflected by your data (eg. if your data are all of the same date, but you still want to see 10 days on the x-axis), you may use Axis.setDateScale to tell ChartDirector the date range you want to use.
Hope this can help.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(Jorge Eduardo)