|
 Multi-Level X-Axis Labels for Bar Chart using Data Groups |
| Posted by Brent Dermott on Oct-31-2007 22:40 |
|
Is the there a way to have two sets of x-axis labels when using data groups in a bar chart. The first set of labels would be for each bar and the second set would be for each group. below is my code that adds the data sets to the chart so you can see how I am building the chart series. You will also see from my code I had to create a condition that passes the data set names only for the first data group in order to avoid have the categories in each group repeated in the legend.
$x=0;
foreach $s (@sites) {
$layer->addDataGroup($s);
$y=0;
foreach $c (@categories) {
if ($x <= $#categories) {
$layer->addDataSet($data[$x], $category_colors[$y], $c);
}
else {
$layer->addDataSet($data[$x], $category_colors[$y]);
}
$x++;
$y++;
}
}
I have attached a image of my current chart and what I am trying to recreate.
|
| Re: Multi-Level X-Axis Labels for Bar Chart using Data Groups |
| Posted by Peter Kwan on Nov-01-2007 03:32 |
|
Hi Brent,
For the two layers of labels on the x-axis, I usually suggest to draw the second layer using custom text boxes. I have attached an example for your reference. The code is like:
#
#Draw the second layer of labels
#(Note: need to draw it after layout because we use BaseChart.getXCoor)
#
$c->layout();
for (my $i = 0; $i < scalar(@$labels); $i += 3) {
$c->addText($c->getXCoor($i + 1), 365, $$labels2[$i], "arialbi.ttf", 11, 0x000000, $perlchartdir::Top);
}
For your case, I suggest you to "flatten" the data into 3 data sets, and draw it as a standard stacked bar chart. The attached sample code illustrate the suggested data structure. With this method, there is no need to use data groups, and no need to specially remove the names for some data sets.
Hope this can help.
Regards
Peter Kwan
 |
| dualxlayers.pl |
|---|
#!/usr/bin/perl
# Include current script directory in the module path (needed on Microsoft IIS).
# This allows this script to work by copying ChartDirector to the same directory
# as the script (as an alternative to installation in Perl module directory)
use File::Basename;
use lib dirname($0);
use perlchartdir;
# The data for the bar chart
my $data0 = [100, 125, 156, 147, 87, 124, 178, 109, 140, 106, 192, 122];
my $data1 = [122, 156, 179, 211, 198, 177, 160, 220, 190, 188, 220, 270];
my $data2 = [167, 190, 213, 267, 250, 320, 212, 199, 245, 267, 240, 310];
my $labels = ["-TJ", "-AMK", "HZ", "-TJ", "-AMK", "HZ", "-TJ", "-AMK", "HZ", "-TJ", "-AMK", "HZ"];
my $labels2 = ["Jun", "Jun", "Jun", "Jul", "Jul", "Jul", "Aug", "Aug", "Aug", "Sep", "Sep", "Sep"];
# Create a XYChart object of size 540 x 375 pixels
my $c = new XYChart(540, 400);
# Add a title to the chart using 18 pts Times Bold Italic font
$c->addTitle("Average Weekly Network Load", "timesbi.ttf", 18);
# Set the plotarea at (50, 55) and of 440 x 280 pixels in size. Use a vertical
# gradient color from light blue (f9f9ff) to blue (6666ff) as background. Set border
# and grid lines to white (ffffff).
$c->setPlotArea(50, 55, 440, 280, $c->linearGradientColor(0, 55, 0, 335, 0xf9f9ff,
0x6666ff), -1, 0xffffff, 0xffffff);
# Add a legend box at (50, 28) using horizontal layout. Use 10pts Arial Bold as font,
# with transparent background.
$c->addLegend(50, 28, 0, "arialbd.ttf", 10)->setBackground($perlchartdir::Transparent
);
# Set the x axis labels
$c->xAxis()->setLabels($labels);
# Draw the ticks between label positions (instead of at label positions)
$c->xAxis()->setTickOffset(0.5);
$c->xAxis()->setTickLength(50, 20);
# Set axis label style to 8pts Arial Bold
$c->xAxis()->setLabelStyle("arialbd.ttf", 8);
$c->yAxis()->setLabelStyle("arialbd.ttf", 8);
# Set axis line width to 2 pixels
$c->xAxis()->setWidth(2);
$c->yAxis()->setWidth(2);
# Add axis title
$c->yAxis()->setTitle("Throughput (MBytes Per Hour)");
# Add a multi-bar layer with 3 data sets
my $layer = $c->addBarLayer2($perlchartdir::Stack);
$layer->addDataSet($data0, 0xff0000, "Server #1");
$layer->addDataSet($data1, 0x00ff00, "Server #2");
$layer->addDataSet($data2, 0xff8800, "Server #3");
# Set bar border to transparent. Use glass lighting effect with light direction from
# left.
$layer->setBorderColor($perlchartdir::Transparent, perlchartdir::glassEffect(
$perlchartdir::NormalGlare, $perlchartdir::Left));
$c->layout();
for (my $i = 0; $i < scalar(@$labels); $i += 3) {
$c->addText($c->getXCoor($i + 1), 365, $$labels2[$i], "arialbi.ttf", 11, 0x000000, $perlchartdir::Top);
}
# output the chart
binmode(STDOUT);
print "Content-type: image/png\\n\\n";
print $c->makeChart2($perlchartdir::PNG);
|
| |
| Re: Multi-Level X-Axis Labels for Bar Chart using Data Groups |
| Posted by alexyhchu on Sep-09-2008 17:25 |
|
hi Peter
could you please help for making a classic asp code on this sample?
thanks |
| Re: Multi-Level X-Axis Labels for Bar Chart using Data Groups |
| Posted by Peter Kwan on Sep-09-2008 18:34 |
|
Hi alexyhchu,
Attached please find the same code in ASP/VBScript.
Hope this can help.
Regards
Peter Kwan
| a.asp |
|---|
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")
' The data for the bar chart
data0 = Array(100, 125, 156, 147, 87, 124, 178, 109, 140, 106, 192, 122)
data1 = Array(122, 156, 179, 211, 198, 177, 160, 220, 190, 188, 220, 270)
data2 = Array(167, 190, 213, 267, 250, 320, 212, 199, 245, 267, 240, 310)
labels = Array("-TJ", "-AMK", "HZ", "-TJ", "-AMK", "HZ", "-TJ", "-AMK", "HZ", "-TJ", "-AMK", "HZ")
labels2 = Array("Jun", "Jun", "Jun", "Jul", "Jul", "Jul", "Aug", "Aug", "Aug", "Sep", "Sep", "Sep")
' Create a XYChart object of size 540 x 375 pixels
Set c = cd.XYChart(540, 400)
' Add a title to the chart using 18 pts Times Bold Italic font
Call c.addTitle("Average Weekly Network Load", "timesbi.ttf", 18)
' Set the plotarea at (50, 55) and of 440 x 280 pixels in size. Use a vertical
' gradient color from light blue (f9f9ff) to blue (6666ff) as background. Set border
' and grid lines to white (ffffff).
Call c.setPlotArea(50, 55, 440, 280, c.linearGradientColor(0, 55, 0, 335, &Hf9f9ff, _
&H6666ff), -1, &Hffffff, &Hffffff)
' Add a legend box at (50, 28) using horizontal layout. Use 10pts Arial Bold as font,
' with transparent background.
Call c.addLegend(50, 28, 0, "arialbd.ttf", 10).setBackground(cd.Transparent)
' Set the x axis labels
Call c.xAxis().setLabels(labels)
' Draw the ticks between label positions (instead of at label positions)
Call c.xAxis().setTickOffset(0.5)
Call c.xAxis().setTickLength(50, 20)
' Set axis label style to 8pts Arial Bold
Call c.xAxis().setLabelStyle("arialbd.ttf", 8)
Call c.yAxis().setLabelStyle("arialbd.ttf", 8)
' Set axis line width to 2 pixels
Call c.xAxis().setWidth(2)
Call c.yAxis().setWidth(2)
' Add axis title
Call c.yAxis().setTitle("Throughput (MBytes Per Hour)")
' Add a multi-bar layer with 3 data sets
Set layer = c.addBarLayer2(cd.Stack)
Call layer.addDataSet(data0, &Hff0000, "Server #1")
Call layer.addDataSet(data1, &H00ff00, "Server #2")
Call layer.addDataSet(data2, &Hff8800, "Server #3")
' Set bar border to transparent. Use glass lighting effect with light direction from
' left.
Call layer.setBorderColor(cd.Transparent, cd.glassEffect(cd.NormalGlare, cd.Left))
Call c.layout()
For i = 0 To Ubound(labels) Step 3
Call c.addText(c.getXCoor(i + 1), 365, labels2(i), "arialbi.ttf", 11, &H000000, cd.Top)
Next
' output the chart
Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
%>
|
| |
|
Forum Home
Search
Message List
Post Message
(Brent Dermott)