ChartDirector Support - View Thread 1183378085

zoom polar graph

Posted by UR on Jul-02-2007 20:08

How to add zoom features in polar drawings. Basically there is no SetClipping() function for Polar graphs.

Re: zoom polar graph

Posted by Peter Kwan on Jul-03-2007 04:05

Hi UR,

Unluckily, it is correct that it is hard to zoom in non-XYChart, so we do not provide any examples for zooming in polar charts. The reason, as you have mentioned, is the lack of circular clipping functions.

The only method to zoom in a polar chart is to draw a bigger polar grid on the same chart image. For example, suppose your polar grid is 200 pixels in radius, and the entire chart image is 400 x 400 pixels. To zoom in by 2x, you may draw the grid at 400 pixels radius, but keep the chart image at 400 x 400 pixels. Part of the grid will then be outside the chart image, which is normal during zooming in. The entire chart image, in fact, acts as the clipping region of the polar grid.

Hope this can help.

Regards
Peter Kwan

Re: zoom polar graph

Posted by UR on Jul-03-2007 13:20

Thank you sir.

Actually I have used the the sample application Zoomscrolldemo2 . And in that I have placed this polar scatter application. Problem here is, if zoom is applied,  the angles are coming in opposite or incorrect positions. The polar circle is fixed and the distances are coming correct wrt to zoom; but the data is not correct;
Please help mel

my code is like this

{
// The data for the chart
    double data0[] = {43, 89, 76, 64, 48, 18, 92, 68, 44, 79, 71, 85};
    double angles0[] = {45, 96, 169, 258, 15, 30, 330, 260, 60, 75, 110, 140};

    double data1[] = {50, 91, 26, 29, 80, 53, 62, 87, 19, 40};
    double angles1[] = {230, 210, 240, 310, 179, 250, 244, 199, 89, 160};

    // Create a PolarChart object of size 460 x 500 pixels, with a grey (e0e0e0)
    // background and 1 pixel 3D border
    PolarChart *cc = new PolarChart(460, 500, 0xe0e0e0, 0x000000, 10);

    // Add a title to the chart at the top left corner using 15pts Arial Bold Italic
    // font. Use a wood pattern as the title background.
    cc->addTitle("Polar Line Chart Demo", "arialbi.ttf", 15)->setBackground(
        cc->patternColor("wood.png"));

    // Set center of plot area at (230, 280) with radius 180 pixels, and white
    // (ffffff) background.
    cc->setPlotArea(230, 280, 280, 0xffffff);

    // Set the grid style to circular grid, with grids below the chart layers
    cc->setGridStyle(false, false);

    // Add a legend box at top-center of plot area (230, 35) using horizontal layout.
    // Use 10 pts Arial Bold font, with 1 pixel 3D border effect.
    LegendBox *b = cc->addLegend(230, 35, false, "arialbd.ttf", 9);
    b->setAlignment(Chart::TopCenter);
    b->setBackground(Chart::Transparent, Chart::Transparent, 1);
    // Set angular axis as 0 - 360, with a spoke every 30 units
    cc->angularAxis()->setLinearScale(0, 360, 30);
// Set the radial axis label format
    cc->radialAxis()->setLabelFormat("{value} km");

    // Add a blue (0xff) line layer to the chart using (data0, angle0)
    PolarLineLayer *layer0 = cc->addLineLayer(DoubleArray(data0,
        sizeof(data0)/sizeof(data0[0])), 0x0000ff, "Close Loop Line");
    layer0->setAngles(DoubleArray(angles0, sizeof(angles0)/sizeof(angles0[0])));

    // Set the line width to 2 pixels
    layer0->setLineWidth(0);

    // Use 11 pixel triangle symbols for the data points
    layer0->setDataSymbol(Chart::TriangleSymbol, 11);

    // Enable data label and set its format
    layer0->setDataLabelFormat("({value},{angle})");

    // Set the data label text box with light blue (0x9999ff) backgruond color and 1
    // pixel 3D border effect
    layer0->setDataLabelStyle()->setBackground(0x9999ff, Chart::Transparent, 1);

    // Add a red (0xff0000) line layer to the chart using (data1, angle1)
    PolarLineLayer *layer1 = cc->addLineLayer(DoubleArray(data1,
        sizeof(data1)/sizeof(data1[0])), 0xff0000, "Open Loop Line");
    layer1->setAngles(DoubleArray(angles1, sizeof(angles1)/sizeof(angles1[0])));

    // Set the line width to 2 pixels
    layer1->setLineWidth(2);

    // Use 11 pixel diamond symbols for the data points
    layer1->setDataSymbol(Chart::DiamondSymbol, 11);

    // Set the line to open loop
    layer1->setCloseLoop(false);

    // Enable data label and set its format
    layer1->setDataLabelFormat("({value},{angle})");

    // Set the data label text box with light red (0xff9999) backgruond color and 1
    // pixel 3D border effect
    layer1->setDataLabelStyle()->setBackground(0xff9999, Chart::Transparent, 1);

    if (m_maxX == m_minX)
    {
        // The axis scale has not yet been set up. So 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
        cc->layout();

        // Save the axis scales for future use
        m_minX = cc->radialAxis()->getMinValue();
        m_maxX = cc->radialAxis()->getMaxValue();
    }
    else
    {
        // Compute the zoomed-in axis scales using the overall axis scales and ViewPort size
        double xScaleMin = m_minX + (m_maxX - m_minX) * viewer->getViewPortLeft();
        double xScaleMax = m_minX + (m_maxX - m_minX) * (viewer->getViewPortLeft()  +   viewer->getViewPortWidth());

// Set the axis scales
        cc->radialAxis()->setLinearScale(xScaleMin, xScaleMax);
        cc->radialAxis()->setRounding(false, false);
    }

// output the chart
//    c->makeChart("polarline.png");

// delete m_ChartViewer.getChart();
    m_ChartViewer.setChart(cc);

//free up resources
    delete cc;

}

Thanks
UR

Peter Kwan wrote:

Hi UR,

Unluckily, it is correct that it is hard to zoom in non-XYChart, so we do not provide any examples for zooming in polar charts. The reason, as you have mentioned, is the lack of circular clipping functions.

The only method to zoom in a polar chart is to draw a bigger polar grid on the same chart image. For example, suppose your polar grid is 200 pixels in radius, and the entire chart image is 400 x 400 pixels. To zoom in by 2x, you may draw the grid at 400 pixels radius, but keep the chart image at 400 x 400 pixels. Part of the grid will then be outside the chart image, which is normal during zooming in. The entire chart image, in fact, acts as the clipping region of the polar grid.

Hope this can help.

Regards
Peter Kwan

Re: zoom polar graph

Posted by Peter Kwan on Jul-03-2007 16:18

Hi UR,

The method you use would not work at all. First, you are using the zooming for the x-axis, and try to apply it for the radial axis. This is not correct. Second, the origin is not at the center anyway after zooming, but you code keep the origin at the fixed point (230, 280). Even in the original zoomscrolldemo2 sample code, the origin shifts depend on where to zoom in.

Actually, in your code, if your click near the right edge of the chart, you can see it zooms correctly. It is because the right edge of the chart is near x = 0, but you try to apply it to the radial axis, so your code interprets it as zooming near radius = 0. The origin is not moved if you zoom around the center. So your code, which does not move the origin, is not incorrect in this particular type of zooming, and it works.

To properly zoom in, I suggest you to move the origin point and increase the radius (instead of fixed it to 280 pixels), and keep the radial scale unchanged.

Hope this can help.

Regards
Peter Kwan

Re: zoom polar graph

Posted by UR on Jul-03-2007 16:53

Hi Peter,

Can you give the code please? I am not getting how to move the origin without using RadialAxis().

Hope you can help !!

Regards
UR

Re: zoom polar graph

Posted by Peter Kwan on Jul-04-2007 03:05

Hi UR,

The center of the polar chart is determine by setPlotArea.

Below please find the complete code, modified from your code:

    double data0[] = {43, 89, 76, 64, 48, 18, 92, 68, 44, 79, 71, 85};
    double angles0[] = {45, 96, 169, 258, 15, 30, 330, 260, 60, 75, 110, 140};

    double data1[] = {50, 91, 26, 29, 80, 53, 62, 87, 19, 40};
    double angles1[] = {230, 210, 240, 310, 179, 250, 244, 199, 89, 160};

    // Create a PolarChart object of size 460 x 500 pixels, with a grey (e0e0e0)
    // background and 1 pixel 3D border
    PolarChart *cc = new PolarChart(560, 560, 0xe0e0e0, 0x000000, 10);

    // Add a title to the chart at the top left corner using 15pts Arial Bold Italic
    // font. Use a wood pattern as the title background.
    cc->addTitle("Polar Line Chart Demo", "arialbi.ttf", 15)->setBackground(
        cc->patternColor("wood.png"));

    // Set center of plot area at (230, 280) with radius 180 pixels, and white
    // (ffffff) background.

int cx = (int)((0.5 - viewer->getViewPortLeft()) * 560 / viewer->getViewPortWidth());
int cy = (int)((0.5 - viewer->getViewPortTop()) * 560 / viewer->getViewPortHeight());
    int r = (int)(280 / viewer->getViewPortWidth());

cc->setPlotArea(cx, cy, r, 0xffffff);

//cc->setPlotArea(230, 280, 280, 0xffffff);

    // Set the grid style to circular grid, with grids below the chart layers
    cc->setGridStyle(false, false);

    // Add a legend box at top-center of plot area (230, 35) using horizontal layout.
    // Use 10 pts Arial Bold font, with 1 pixel 3D border effect.
    LegendBox *b = cc->addLegend(230, 35, false, "arialbd.ttf", 9);
    b->setAlignment(Chart::TopCenter);
    b->setBackground(Chart::Transparent, Chart::Transparent, 1);
    // Set angular axis as 0 - 360, with a spoke every 30 units
    cc->angularAxis()->setLinearScale(0, 360, 30);
// Set the radial axis label format
    cc->radialAxis()->setLabelFormat("{value} km");

    // Add a blue (0xff) line layer to the chart using (data0, angle0)
    PolarLineLayer *layer0 = cc->addLineLayer(DoubleArray(data0,
        sizeof(data0)/sizeof(data0[0])), 0x0000ff, "Close Loop Line");
    layer0->setAngles(DoubleArray(angles0, sizeof(angles0)/sizeof(angles0[0])));

    // Set the line width to 2 pixels
    layer0->setLineWidth(0);

    // Use 11 pixel triangle symbols for the data points
    layer0->setDataSymbol(Chart::TriangleSymbol, 11);

    // Enable data label and set its format
    layer0->setDataLabelFormat("({value},{angle})");

    // Set the data label text box with light blue (0x9999ff) backgruond color and 1
    // pixel 3D border effect
    layer0->setDataLabelStyle()->setBackground(0x9999ff, Chart::Transparent, 1);

    // Add a red (0xff0000) line layer to the chart using (data1, angle1)
    PolarLineLayer *layer1 = cc->addLineLayer(DoubleArray(data1,
        sizeof(data1)/sizeof(data1[0])), 0xff0000, "Open Loop Line");
    layer1->setAngles(DoubleArray(angles1, sizeof(angles1)/sizeof(angles1[0])));

    // Set the line width to 2 pixels
    layer1->setLineWidth(2);

    // Use 11 pixel diamond symbols for the data points
    layer1->setDataSymbol(Chart::DiamondSymbol, 11);

    // Set the line to open loop
    layer1->setCloseLoop(false);

    // Enable data label and set its format
    layer1->setDataLabelFormat("({value},{angle})");

    // Set the data label text box with light red (0xff9999) backgruond color and 1
    // pixel 3D border effect
    layer1->setDataLabelStyle()->setBackground(0xff9999, Chart::Transparent, 1);

    if (m_maxX == m_minX)
    {
        // The axis scale has not yet been set up. So 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
        cc->layout();

        // Save the axis scales for future use
        m_minX = cc->radialAxis()->getMinValue();
        m_maxX = cc->radialAxis()->getMaxValue();
    }
    else
    {
        // Compute the zoomed-in axis scales using the overall axis scales and ViewPort size
cc->radialAxis()->setLinearScale(m_minX, m_maxX);
        //double xScaleMin = m_minX + (m_maxX - m_minX) * viewer->getViewPortLeft();
        //double xScaleMax = m_minX + (m_maxX - m_minX) * (viewer->getViewPortLeft()  +   viewer->getViewPortWidth());

// Set the axis scales
        //cc->radialAxis()->setLinearScale(xScaleMin, xScaleMax);
        cc->radialAxis()->setRounding(false, false);
    }

// output the chart
//    c->makeChart("polarline.png");

// delete m_ChartViewer.getChart();
    m_ChartViewer.setChart(cc);

//free up resources
    delete cc;

Hope this can help.

Regards
Peter Kwan

Re: zoom polar graph

Posted by UR on Jul-04-2007 14:35

Hi Peter,
Thank you very much. That code is working excellent.

Thank you once again for very quick reply.

Thanks & Regards
UR