ChartDirector Support - View Thread 1600626702

ChartDirector Support

Forum Home

Search

Message List Post Message

[Sep-21-2020 02:31] Removing Line At Bottom Of Area Chart (Electron Shepherd)
- [Sep-21-2020 15:03] Re: Removing Line At Bottom Of Area Chart (Peter Kwan)
  - [Sep-22-2020 05:01] Re: Removing Line At Bottom Of Area Chart (Electron Shepherd)

Removing Line At Bottom Of Area Chart

Posted by Electron Shepherd on Sep-21-2020 02:31

Hi there,

I'm trying to remove the line indicated by the green arrow in the attached image. I want the line at the top, but not the one at the bottom.

To show the problem, I've taken the code from https://www.advsofteng.com/doc/cdcpp.htm#enhancedarea.htm and added:

l->setLineWidth(10);
c->yAxis()->setMargin(10, 10);

My whole code to generate the image is:

    // The data for the area chart
    double data[] = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53, 35, 50, 66,
        56, 48, 52, 65, 62};

    // The labels for the area chart
    const char *labels[] = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12",
        "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24"};

    // Create a XYChart object of size 600 x 360 pixels, with a brushed silver background, 1 pixel
    // 3D border effect, rounded corners and soft drop shadow.
    XYChart *c = new XYChart(600, 360, Chart::brushedSilverColor(), Chart::Transparent, 1);
    c->setRoundedFrame();
    c->setDropShadow();

    // Add a title box to the chart using 18pt Times Bold Italic font.
    TextBox *title = c->addTitle(
        "<*block,valign=absmiddle*><*img=star.png*><*img=star.png*> Performance Enhancer "
        "<*img=star.png*><*img=star.png*><*/*>", "timesbi.ttf", 18);

    //
    // Use a text box with a depressed 3D border to create the inner depressed region
    //

    // The width of the frame border
    int frameWidth = 5;

    // Set the depressed region position
    TextBox *contentBox = c->addText(frameWidth, title->getHeight(), "");
    contentBox->setSize(c->getDrawArea()->getWidth() - 1 - frameWidth * 2, c->getDrawArea(
        )->getHeight() - title->getHeight() - frameWidth - 1);

    // Use -1 as the rasied effect to create a depressed region
    contentBox->setBackground(Chart::Transparent, Chart::Transparent, -1);

    // Set rounded corners, and put the text box at the back of the chart
    contentBox->setRoundedCorners(10);
    contentBox->setZOrder(Chart::ChartBackZ);

    // Tentatively set the plotarea to 50 pixels from the left depressed edge, and 25 pixels under
    // the top depressed edge. Set the width to 75 pixels less than the depressed region width, and
    // the height to 75 pixels less than the depressed region height. Use white (ffffff) background,
    // transparent border, and grey (cccccc) horizontal and vertical grid lines.
    PlotArea *plotArea = c->setPlotArea(50 + contentBox->getLeftX(), contentBox->getTopY() + 25,
        contentBox->getWidth() - 75, contentBox->getHeight() - 75, 0xffffff, -1, -1, 0xcccccc, -1);

    // Add a title to the y axis
    c->yAxis()->setTitle("Energy Concentration (KJ per liter)");

    // Set the labels on the x axis.
    c->xAxis()->setLabels(StringArray(labels, (int)(sizeof(labels) / sizeof(labels[0]))));

    // Display 1 out of 3 labels on the x-axis.
    c->xAxis()->setLabelStep(3);

    // Add a title to the x axis using CDML
    c->xAxis()->setTitle("<*block,valign=absmiddle*><*img=clock.png*>  Elapsed Time (hour)<*/*>");

    // Set the axes width to 2 pixels
    c->xAxis()->setWidth(2);
    c->yAxis()->setWidth(2);

    // Add an area layer to the chart using a gradient color that changes vertically from
    // semi-transparent red (60ff0000) to semi-transparent white (60ffffff)
    Layer* l = c->addAreaLayer(DoubleArray(data, (int)(sizeof(data) / sizeof(data[0]))),
        c->linearGradientColor(0, contentBox->getTopY() + 20, 0, contentBox->getTopY() +
        contentBox->getHeight() - 50, 0x60ff0000, 0x60ffffff));

// the next two lines have been added by Electron Shepherd
l->setLineWidth(10);
c->yAxis()->setMargin(10, 10);

    // Adjust the plot area size, such that the bounding box (inclusive of axes) is 15 pixels from
    // the left depressed edge, 25 pixels below the top depressed edge, 25 pixels from the right
    // depressed edge, and 15 pixels above the bottom depressed edge.
    c->packPlotArea(contentBox->getLeftX() + 15, contentBox->getTopY() + 25, contentBox->getLeftX()
         + contentBox->getWidth() - 25, contentBox->getTopY() + contentBox->getHeight() - 15);

    // Add a custom CDML text with the bottom right corner is anchored to the bootom right corner of
    // the plot area, with 5 pixels margin.
    c->addText(plotArea->getLeftX() + plotArea->getWidth() - 5, plotArea->getTopY() +
        plotArea->getHeight() - 5,
        "<*block,valign=absmiddle*><*img=small_molecule.png*> <*block*>"
        "<*font=timesbi.ttf,size=10,color=804040*>MolecularnEngineering<*/*>")->setAlignment(
        Chart::BottomRight);

    // Output the chart
    c->makeChart("enhancedarea.jpg");

I tried setting the border color of the layer to transparent, but that just made both the top thick line and the bottom thin line disappear. Is there any way I can get the just the lower line to not show?

Re: Removing Line At Bottom Of Area Chart

Posted by Peter Kwan on Sep-21-2020 15:03

Hi Electron Shepherd,

By default, in an area chart, the "base line" is at y = 0. This allows positive and negative data points to be represented as different regions, and is consistent with how a bar chart is normally drawn. See the first image below.

For your case, even if you lifted the y = 0 line upwards using Axis.setMargin, the base line is still y = 0.

The base line can be configured using AreaLayer.setBaseLine. If you want the area to start from the bottom of the plot area, you can set the base line to some large negative value, such as:

l->setBaseLine(-999999);

The base line is then below the bottom border. ChartDirector will then chop the area at the bottom border.

If you want to keep the base line at y = 0, you can set the area layer border color to Chart::Transparent. Both the top and bottom border will disappear, but you can add another line layer with the same data as the area layer for the top border. (The line layer needs to be added before the area layer to make the line stay in front of the area layer.)

Regards
Peter Kwan

Re: Removing Line At Bottom Of Area Chart
Posted by Electron Shepherd on Sep-22-2020 05:01	\| Reply \| Monitor
Peter Thank you for this - it's exactly what I needed and now my charts look so much better! Electron Shepherd