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

Message ListMessage List     Post MessagePost Message

  Rose graph and gradient for sections
Posted by Alain on Mar-30-2022 04:18
Attachments:
Hello,

I am playing with the rose graph (PolarChart).
Is it possible to create a color gradient inside a zone defined with addZone and two angles ?
I put an illustration attached with two zones with gradients as example : one red/green starting from the center, and one red/blue with a "lateral" gradient.

I started from the example "rose.cpp".

ANy help would be usefull!

Regards,

Alain
rose_gradient.jpg

  Re: Rose graph and gradient for sections
Posted by Peter Kwan on Mar-30-2022 16:33
Hi Alain,

In ChartDirector, the AngularChart can include an angular color scale. So one method is to create an AngularChart that contains just the angular color scale and nothing else, then use the AngularChart as the color of the rose sector.

An example is:

// This is the color scale with 2 angles and 2 colors as an example.
double colorScale[] = { angles[5], 0xff0000, angles[6], 0x0000ff };
const int colorScaleSize = (int)(sizeof(colorScale) / sizeof(*colorScale));

// Create a completely transparent angular meter except the color scale.
// The r below is the radius of the polar chart
AngularMeter* m = new AngularMeter(r * 2 + 1, r * 2 + 1, Chart::Transparent);
m->setMeterColors(Chart::Transparent, Chart::Transparent, Chart::Transparent);
m->setCap(0, Chart::Transparent, Chart::Transparent);
m->setMeter(r, r, 0, 0, 360);
m->setScale(0, 360, DoubleArray());
m->addColorScale(DoubleArray(colorScale, colorScaleSize) , r, -r);

// Set up the chart as a resource of the PolarChart. We can then use it to create a
// color for the PolarChart. (cx, cy) = center of the polar chart
c->setResource("mySpecialColor", m->makeChart());
int specialColor = c->patternColor("@/mySpecialColor", cx - r, cy - r);

// Add sectors to the chart as sector zones
for (int i = 0; i < data_size; ++i) {
   // Use the angular color scale if i = 5
   int color = (i == 5) ? specialColor : 0x33ff33;
   c->angularAxis()->addZone(angles[i], angles[i] + 15, 0, data[i], color, 0x008000);
}

If multiple rose sectors need angular color scale, you can simply add more angles and colors in the colorScale array. You can apply the same specialColor to all these sectors.

Regards
Peter Kwan

  Re: Rose graph and gradient for sections
Posted by Peter Kwan on Mar-30-2022 16:47
Hi Alian,

For the other gradient from center outwards, you can use the radialGradientColor:

https://www.advsofteng.com/doc/cdcpp.htm#BaseChart.radialGradientColor.htm

Regards
Peter Kwan

  Re: Rose graph and gradient for sections
Posted by Alain on Mar-30-2022 20:39
Attachments:
Dear Peter,

Thank you for your prompt answer - as always.

I modified the rose.cpp example integrating your indications into it. I get an error while compiling :

rose2.cpp:50:8: erreur: ‘class PolarChart’ has no member named ‘setResource’
     c->setResource("mySpecialColor", m->makeChart());

I can't sse why I receive this error.

The cpp file is attached.

Regards,

Alain
rose2.cpp
#include "chartdir.h"

int main(int argc, char *argv[])
{
    // Data for the chart
    double data[] = {9.4, 1.8, 2.1, 2.3, 3.5, 7.7, 8.8, 6.1, 5.0, 3.1, 6.0, 4.3, 5.1, 2.6, 1.5, 2.2,
        5.1, 4.3, 4.0, 9.0, 1.7, 8.8, 9.9, 9.5};
    double angles[] = {0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240,
        255, 270, 285, 300, 315, 330, 345};
    int colors[] = {
                    0x2E972E, 0xFF1717, 0xFF1717, 0x463AD0, 0x83345B, 0x521678, 0x345320, 0x973400, 
                    0xB10F28, 0x2E972E, 0xFF1717, 0xFF1717, 0x463AD0, 0x83345B, 0x521678, 0x345320, 
                    0x973400, 0xB10F28, 0xFF1717, 0x463AD0, 0x83345B, 0x521678, 0x345320, 0x973400,
                    };

    // Create a PolarChart object of size 460 x 460 pixels, with a silver background and a 1 pixel
    // 3D border
    PolarChart *c = new PolarChart(460, 460, Chart::silverColor(), 0x000000, 1);

    // Add a title to the chart at the top left corner using 15pt Arial Bold Italic font. Use white
    // text on deep blue background.
    c->addTitle("Polar Vector Chart Demonstration", "arialbi.ttf", 15, 0xffffff)->setBackground(0x000080);

    // Set plot area center at (230, 240) with radius 180 pixels and white background
    c->setPlotArea(230, 240, 180, 0xffffff);

    // Set the grid style to circular grid
    c->setGridStyle(false);

    // Set angular axis as 0 - 360, with a spoke every 30 units
    c->angularAxis()->setLinearScale(0, 360, 30);

    // This is the color scale with 2 angles and 2 colors as an example.
    double colorScale[] = { angles[5], 0xff0000, angles[6], 0x0000ff };
    const int colorScaleSize = (int)(sizeof(colorScale) / sizeof(*colorScale));

    // Create a completely transparent angular meter except the color scale.
    // The r below is the radius of the polar chart
    double r = 180;
    AngularMeter* m = new AngularMeter(r * 2 + 1, r * 2 + 1, Chart::Transparent);
    m->setMeterColors(Chart::Transparent, Chart::Transparent, Chart::Transparent);
    m->setCap(0, Chart::Transparent, Chart::Transparent);
    m->setMeter(r, r, 0, 0, 360);
    m->setScale(0, 360, DoubleArray());
    m->addColorScale(DoubleArray(colorScale, colorScaleSize) , r, -r);

    // Set up the chart as a resource of the PolarChart. We can then use it to create a
    // color for the PolarChart. (cx, cy) = center of the polar chart

    c->setResource("mySpecialColor", m->makeChart());
    
    double cx = 230;
    double cy = 240;
    int specialColor = c->patternColor("@/mySpecialColor", cx - r, cy - r);


    int data_size = (int)(sizeof(data) / sizeof(data[0]));

    // Add sectors to the chart as sector zones
    for (int i = 0; i < data_size; ++i) {
       // Use the angular color scale if i = 5
       int color = (i == 5) ? specialColor : 0x33ff33;
       c->angularAxis()->addZone(angles[i], angles[i] + 15, 0, data[i], color, 0x008000);
    }


    // Add an Transparent invisible layer to ensure the axis is auto-scaled using the data
    c->addLineLayer(DoubleArray(data, (int)(sizeof(data) / sizeof(data[0]))), Chart::Transparent);

    // Output the chart
    c->makeChart("rose.png");

    //free up resources
    delete c;
    return 0;
}


  Re: Rose graph and gradient for sections
Posted by Peter Kwan on Mar-30-2022 22:00
Hi Alain,

The BaseChart.setResource API is introduced in ChartDirector 6.3 released in Nov 2018. If you are using an earlier version of ChartDirector, you would need to save the DrawArea to an image file, and then load the image file into the pattern color, like:

m->makeChart("/path/to/myfile.png");
int specialColor = c->patternColor("/path/to/myfile.png", cx - r, cy - r);

With ChartDirector 6.3 or later, the setResource method can be used instead.

Note that we have not changed the filename for the ChartDirector 6.3 DLL, so it is still called "chartdir60.dll". We intentionally not change the name so that people upgrading to ChartDirector 6.3 do not need to change their Makefile or Visual Studio project configuration. To determine the real version of chartdir60.dll, please right click on the DLL and choose Properties. If your "chartdir60.dll" is of version 6.3, please make sure your header files "chartdir.h" and "bchartdir.h" also comes from ChartDirector 6.3.

Regards
Peter Kwan

  Re: Rose graph and gradient for sections
Posted by Alain on Mar-30-2022 22:12
Hi Peter,

Thank you +++

Indeed, I use version 6.0.
It works very well now!

I'll consider upgrading to version 7.

Regards,

Alain