|
 sync 2 y-axis |
| Posted by elvis reyes on Dec-04-2014 09:41 |
|
hi guys i'm sure this is just a piece of cake for u guys but i'm a just a newbie in chart
director so pls help me......... i have a 2 arrays for bar chart. $pm and $estimate......
then im computing $percent = ($estimate / $pm) * 100 to have an array for the percent
to create my value for the line chart....... now the question is how can i sync my 2 y-
axis in bar chart and my line chart..... il post my codes for the chart director below
$transmonth = array(1, 2, 3);
$estimate = array(80, 50, 40);
$pm = array(10, 5, 8);
foreach($estimate as $k => $v){
$percent[$k] = ( $pm[$k] / $v) * 100;
}
$data = $percent;
$data1 = $estimate;
$data2 = $pm;
$labels = $transmonth;
$c = new XYChart(780, 400, -1,1);
$c->addTitle("Mini-PM Hit Rate");
# Set the plotarea at (80, 40) and of 650, 300 pixels in size. Use alternating light
# grey (f8f8f8) / white (ffffff) background. Set border to transparent and use grey
# (CCCCCC) dotted lines as horizontal and vertical grid lines
$c->setPlotArea(80, 80, 650, 250, 0xffffff, 0xf8f8f8,Transparent, $c-
>dashLineColor(0xcccccc, Dotline), $c->dashLineColor(0xcccccc, Dotline));
$legendObj = $c->addLegend(70, 50, false, "arial.ttf", 10);
$legendObj->setBackground(Transparent);
$lineLayer = $c->addLineLayer2();
$lineLayerObj = $lineLayer->addDataSet($data, 0x009966, "Hit Rate Percentage");
$lineLayerObj->setDataSymbol(CircleShape, 9, 0xff9966, 0x009966);
$lineLayerObj->setDataLabelFormat("{value|1}");
$lineLayerObj->setDataLabelStyle("arialbd.ttf", 8);
$lineLayer->setLineWidth(2);
$lineLayer->setUseYAxis2();
$c->yAxis2->setLinearScale(0, 120, 10);
$layer = $c->addBarLayer2(Side);
$layer->addDataSet($data1, 0x10b4f1, "Estimated PM");
$layer->addDataSet($data2, 0x7B3BA3, "Actual PM");
$layer->setBorderColor(Transparent);
$layer->setBarGap(0.2, TouchBar);
$c->xAxis->setLabels($labels);
$c->xAxis->setTickOffset(0.5);
$c->xAxis->setTitle("Period");
$c->yAxis->setTitle("Total Handlers");
$c->yAxis2->setTitle("Hit Rate Percentage (%)");
header("Content-type: image/png");
print($c->makeChart2(PNG));
|
| Re: sync 2 y-axis |
| Posted by Peter Kwan on Dec-04-2014 22:17 |
|
Hi elvis,
I am not too sure what you mean by "sync my 2 y-axis in bar chart and my line chart". From
the nature of your data, it seems there is no definite relationship between the two axes.
Would you mind to clarify how you would expect the axis to sync?
I saw that in your chart the line exceeds the top of the chart. It is because according to
your code, the percentage can be much higher than 100%. However, your code configures
the yAxis2 to be from 0 to 120 only. If you remove that line of code and let ChartDirector
automatically determine the y-axis scale for yAxis2, the scale will be such that the entire
line will fall within the chart.
Regards
Peter Kwan |
| Re: sync 2 y-axis |
| Posted by elvis reyes on Dec-05-2014 10:13 |
|
hi Peter,
Tanx for your immediate response il clarify my problem again with my progress
heres again my updated code............................................
my line chart data comes from the computed $data2/$data1 * 100
my chart now looks nice but my 2 y-axis is not syncronize...
i think my circle points in my line chart should touch the violet bar chart.
because the percent value is the value came from the violet bart chart
__________________________________________________________
$data1 = array(230,150,87);
$data2 = array(70,80,37);
foreach($data1 as $k => $v){
$percent[$k] = ( $data2[$k] / $v) * 100;
}
$data = $percent;
$labels = $transmonth;
$c = new XYChart(780, 400, -1,1);
$c->addTitle("Mini-PM Hit Rate");
# Set the plotarea at (80, 40) and of 650, 300 pixels in size. Use alternating light
# grey (f8f8f8) / white (ffffff) background. Set border to transparent and use grey
# (CCCCCC) dotted lines as horizontal and vertical grid lines
$c->setPlotArea(80, 80, 650, 250, 0xffffff, 0xf8f8f8,Transparent, $c-
>dashLineColor(0xcccccc, Dotline), $c->dashLineColor(0xcccccc, Dotline));
$legendObj = $c->addLegend(70, 50, false, "arial.ttf", 10);
$legendObj->setBackground(Transparent);
$lineLayer = $c->addLineLayer2();
$lineLayerObj = $lineLayer->addDataSet($data, 0x009966, "Hit Rate
Percentage");
$lineLayerObj->setDataSymbol(CircleShape, 9, 0xff9966, 0x009966);
$lineLayerObj->setDataLabelFormat("{value|1}");
$lineLayerObj->setDataLabelStyle("arialbd.ttf", 8);
$lineLayer->setLineWidth(2);
$lineLayer->setUseYAxis2();
$c->yAxis2->setLinearScale(0, 100, 10);
$layer = $c->addBarLayer2(Side);
$layer->addDataSet($data1, 0x10b4f1, "Estimated PM");
$layer->addDataSet($data2, 0x7B3BA3, "Actual PM");
$layer->setBorderColor(Transparent);
$layer->setBarGap(0.2, TouchBar);
$c->xAxis->setLabels($labels);
$c->xAxis->setTickOffset(0.5);
$c->xAxis->setTitle("Period");
$c->yAxis->setTitle("Total Handlers");
$c->yAxis2->setTitle("Hit Rate Percentage (%)");
header("Content-type: image/png");
print($c->makeChart2(PNG));
|
| Re: sync 2 y-axis |
| Posted by Peter Kwan on Dec-06-2014 02:56 |
|
Hi elvis,
I am not too sure the exact meaning of "my line chart should touch the violet bar chart". Do
you mean you would like to move the line to the right, so that the line points are on top of
the violet bar? Or do you want the line points to be at the same height as the violet bars?
According to your code, the line points should not be at the same height as the violet bars.
It is because the percentage value does not come entirely from the violet bar. It also
depends on the blue bar. For example, if the violet bar increases, the line can decrease if
the blue bar increase even more. An example is like:
$data1 = array(100, 200, 500);
$data2 = array(70, 80, 90);
With the above data, the violet bar increase from 70 to 90, but the percentages are (70%,
40%, 18%). So the percentages move decreases as the violet bar increases, and it is not
logical for the percentages to be at the same height as the violet bar.
If you just want to move the line horizontally so that the line points are at the same x
position as the violet bars, you may use Layer.alignLayer. For example:
$lineLayer->alignLayer($layer, 1);
Hope this can help.
Regards
Peter Kwan |
| Re: sync 2 y-axis |
| Posted by elvis reyes on Dec-09-2014 09:08 |
|
$data1 = array(100, 200, 500);
$data2 = array(70, 80, 90);
With the above data, the violet bar increase from 70 to 90, but the percentages are (70%,
40%, 18%). So the percentages move decreases as the violet bar increases, and it is not
logical for the percentages to be at the same height as the violet bar.
tanx Peter,
i think your analysis in the above is correct...... after clearing that part how can i sync my
2 y-axis?????
Thanks for your quick response......... |
| Re: sync 2 y-axis |
| Posted by Peter Kwan on Dec-10-2014 01:20 |
|
Hi elvis,
Actually, I am not sure exactly how you would like to "sync the 2 y-axis". Do you mean in
your application, the percentage must be proportional to $data2? If this is the case, then
the ratio must be array_sum($percent) / array_sum($data2), so the axes can be sync
using:
if (array_sum($data2) != 0)
$c->syncYAxis(array_sum($percent) / array_sum($data2));
Hope this can help.
Regards
Peter Kwan |
| Re: sync 2 y-axis |
| Posted by elvis reyes on Dec-10-2014 09:03 |
|
| tanx Peter for your patience......... ill try this one! |
| Re: sync 2 y-axis |
| Posted by elvis reyes on Dec-10-2014 14:09 |
|
hi peter i think i dont need to sync my 2 y axis anymore. I think i need to do something
like this
$c->yAxis2->setLinearScale(0, /maximum value in percent/, /auto-adjust/);
is this possible i want to scale my yAxis2 from 0 to maximum value in my $data then
the step will be auto adjust by chart director base on the values in $data???????? |
| Re: sync 2 y-axis |
| Posted by Peter Kwan on Dec-10-2014 18:55 |
|
Hi elvis,
Do you mean if the maximum percentage in your data is 53.3612%, you want the maximum
axis scale to be 53.3612 (instead of something like 60)? If this is what you need, the code
is:
#always start the axis from 0, irrespective of the data values.
$c->yAxis2->setAutoScale(0, 0, 1);
#disable auto-adjustment of the maximum axis scale to a "nice" value
$c->yAxis2->setRounding(false, false);
Hope this can help.
Regards
Peter Kwan |
| Re: sync 2 y-axis |
| Posted by elvis reyes on Dec-11-2014 09:54 |
|
man!!!!!!!!!!!!!!!!! thank you so much for the help! and thank you very very very much for
your patience! merry xmas bro! my project looks perfect now! |
|
Forum Home
Search
Message List
Post Message
(elvis reyes)