ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Problem of labels when using Zooming and Scrolling functions
Posted by James Long on Dec-01-2009 22:31
| Reply | Monitor
Attachments:
Hi,
I am trying to use Zooming functions to get my XY bar charts more interactive,
but after applied the functions to the graph, the original labels (string format) will be replaced by automatically generated numbers(eg. 1, 2, 3......10) when zoom-in. I have tried to use c.xAxis().setFormatCondition to restrict it but don't know how.
I attached two screenshots. Does anyone know how to restrict the labels?

Thanks a lot!

James
zoom1.png
zoom2.png

  Re: Problem of labels when using Zooming and Scrolling functions
Posted by James Long on Dec-01-2009 23:11
| Reply | Monitor
Here is the code. Thanks!


XYChart c = new XYChart(1000, 500, 0xf4e5ec, 0xf4e5ec, 0);
c.setPlotArea(60, 40, 850, 320, c.linearGradientColor(60, 40, 60, 200, 0xFFFFFF, 0xe6e6e6), -1, 0x000000, 0xffffff, c.dashLineColor(0xffffff, -0));

// Enable clipping mode to clip the part of the data that is outside the plot area.
c.setClipping();

// The default ChartDirector settings has a denser y-axis grid spacing and less-dense x-axis
// grid spacing. In this demo, we want the tick spacing to be symmetrical. We use around 40
// pixels between major ticks and 20 pixels between minor ticks.
c.xAxis().setTickDensity(40, 20);
c.yAxis().setTickDensity(40, 20);

double[] d1 = new ArrayMath(data).selectGEZ(null, 0).result();
double[] d2 = new ArrayMath(data).selectLTZ(null, 0).result();

c.addBarLayer(d1, 0xff0000).setBorderColor(0xff0000, Chart.softLighting(Chart.Bottom));
c.addBarLayer(d2, 0x0000ff).setBorderColor(0x0000ff, Chart.softLighting(Chart.Bottom));

c.addText(720, 25, "Number of Companies: " + labels.Length, "LSANSD.TTF", 9, 0x000000);

c.setWallpaper(bgImagePath);

c.yAxis().setTitle(reportTypeSymbol);
c.yAxis().setTitle(reportTypeSymbol).setFontAngle(0);
c.yAxis().setTitle(reportTypeSymbol).setFontSize(12);

c.xAxis().setTitle("Company", "LSANSD.TTF", 8);
c.xAxis().setLabels(labels);
c.xAxis().setLabels(labels).setFontAngle(90);
c.xAxis().setLabels(labels).setFontSize(8);
c.xAxis().setLabels(labels).setFontStyle("LSANSD.TTF");

//c.xAxis().setFormatCondition("align", 360 * 86400);
c.xAxis().setFormatCondition(">0");

if ((viewer.GetCustomAttr("minY") == null) || (viewer.GetCustomAttr("minY") == ""))
{
    // The axis scale has not yet been set up. This means this is the first time the chart is
    // drawn and it is drawn with no zooming. We can use auto-scaling to determine the
    // axis-scales, then remember them for future use.

    // explicitly auto-scale axes so we can get the axis scales
    c.layout();

    // save the axis scales for future use
    viewer.SetCustomAttr("minX", c.xAxis().getMinValue());
    viewer.SetCustomAttr("maxX", c.xAxis().getMaxValue());
    viewer.SetCustomAttr("minY", c.yAxis().getMinValue());
    viewer.SetCustomAttr("maxY", c.yAxis().getMaxValue());
}
else
{
    // Retrieve the original full axes scale
    double minX = double.Parse(viewer.GetCustomAttr("minX"));
    double maxX = double.Parse(viewer.GetCustomAttr("maxX"));
    double minY = double.Parse(viewer.GetCustomAttr("minY"));
    double maxY = double.Parse(viewer.GetCustomAttr("maxY"));

    // Compute the zoomed-in axis scales by multiplying the full axes scale with the view port
    // ratio
    double xScaleMin = minX + (maxX - minX) * viewer.ViewPortLeft;
    double xScaleMax = minX + (maxX - minX) * (viewer.ViewPortLeft + viewer.ViewPortWidth);
    double yScaleMax = maxY - (maxY - minY) * viewer.ViewPortTop;
    double yScaleMin = maxY - (maxY - minY) * (viewer.ViewPortTop + viewer.ViewPortHeight);

    // Set the axis scales
    c.xAxis().setLinearScale(xScaleMin, xScaleMax);
    c.yAxis().setLinearScale(yScaleMin, yScaleMax);

    // By default, ChartDirector will round the axis scale to the tick position. For zooming, we
    // want to use the exact computed axis scale and so we disable rounding.
    c.xAxis().setRounding(false, false);
    c.yAxis().setRounding(false, false);
}

// output the chart
viewer.Image = c.makeWebImage(Chart.PNG);

//include tool tip for the chart
if (ddReportType.SelectedItem.Text == "Differences")
{
    if (dataSource == "Call Center")
        viewer.ImageMap = c.getHTMLImageMap("", "", "title='" + ddQtr.SelectedItem.Text + " " + year + " \\n{xLabel}: ?{value}'");
    else
        viewer.ImageMap = c.getHTMLImageMap("", "", "title='" + ddMonth.SelectedItem.Text + " " + year + " \\n{xLabel}: ?{value}'");
}
else
{
    if (dataSource == "Call Center")
        viewer.ImageMap = c.getHTMLImageMap("", "", "title='" + ddQtr.SelectedItem.Text + " " + year + " \\n{xLabel}:{value}%'");
    else
        viewer.ImageMap = c.getHTMLImageMap("", "", "title='" + ddMonth.SelectedItem.Text + " " + year + " \\n{xLabel}:{value}%'");
}

  Re: Problem of labels when using Zooming and Scrolling functions
Posted by Peter Kwan on Dec-02-2009 01:20
| Reply | Monitor
Hi James,

In your case, because the x-axis is not numeric or date/time (they are just names), so we need to configure the chart to use labels instead directly using setLinearScale. There is a similar example in:

http://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&thread=1208163885#N1208193245

In brief, the changes are:

//remove the following line from your current code
//c.xAxis().setLinearScale(xScaleMin, xScaleMax)

//round the x-coordinates to integers as the x-axis is label based, and not really numeric
int xIndexStart = (int)Math.Round(xScaleMin);
int xIndexEnd = (int)Math.Round(xScaleMax);

//get the labels for the above integer range
string[] visibleXLabels = new string[xIndexEnd - xIndexStart];
Array.Copy(labels, xIndexStart, visibleXLabels, 0, xIndexEnd - xIndexStart + 1)

//use the labels as the axis scale
c.xAxis().setLinearScale2(xIndexStart, xIndexEnd, visibleXLabels);

Hope this can help.

Regards
Peter Kwan

  Re: Problem of labels when using Zooming and Scrolling functions
Posted by James Long on Dec-02-2009 17:42
| Reply | Monitor
Hi Peter,

The problem has been solved!

Thank you very much!

James

  Re: Problem of labels when using Zooming and Scrolling functions
Posted by at on May-10-2012 11:18
| Reply | Monitor
Hi Peter,  I'm also encountering same problem but I'm not just sure of its equivalent in PHP so pls kindly convert
them specially the ff lines:

//round the x-coordinates to integers as the x-axis is label based, and not really numeric
int xIndexStart = (int)Math.Round(xScaleMin);
int xIndexEnd = (int)Math.Round(xScaleMax);

//get the labels for the above integer range
string[] visibleXLabels = new string[xIndexEnd - xIndexStart];
Array.Copy(labels, xIndexStart, visibleXLabels, 0, xIndexEnd - xIndexStart + 1)

Thanks.

  Re: Problem of labels when using Zooming and Scrolling functions
Posted by at on May-10-2012 11:33
| Reply | Monitor
Attachments:
Hi Peter, not exactly the same but hoping it could fix. Here's the situation, my graph could have many labels and
may tend to overlap so impossible to show them all so i used labelstep,  but during zooming in, I want that the
labels that are hidden during the initial/default load will now be shown. How to achieve that? I attached 2 charts,
the 1st one showing the default and the second when zoomed-in, notice the labels are now having wide gap when
zoomed in which i want to be filled in with the labels not originally shown in default.
Thanks.
fig_1-default.png
fig_2-zoom-in chart.png

  Re: Problem of labels when using Zooming and Scrolling functions
Posted by Peter Kwan on May-11-2012 00:09
| Reply | Monitor
Hi at,

Instead of using labels, I suggest you use numbers as x-coordinates. In PHP, if a text string is a number according to PHP syntax, then it will automatically be converted to a number if necessary. For example, "12345" will be converted to the number 12345. However, "12,345" will not be converted as expected, as "12,345" is not a valid number in PHP syntax.

So instead of using:

$c->addScatterLayer(null, $dataY, ....);
$c->xAxis->setLabels($myLabels);

You may change it toL

$c->addScatterLayer($myLabels, $dataY, ....);

and let ChartDirector auto-scale the x-axis. ChartDirector will then put suitable number of labels on the x-axis, just like how it labels the y-axis.

If you prefer to use a label based x-axis, you may change the step size in setLabelStep based on the number of labels on the chart. For example, in PHP 5:

#the label step is set such that the labels are at least 15 pixels apart
$c->xAxis->setLabelStep(floor(count($visibleLabels) * 15 / $c->getPlotArea()->getWidth()) + 1);

Hope this can help.

Regards
Peter Kwan