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

Message ListMessage List     Post MessagePost Message

  Chart into three different colors
Posted by Tony on Nov-26-2020 16:58
| Reply | Monitor
Attachments:
Hi,

Is there a way to divide chart into three different colors?
I need to fill the colors in the chart.
Attached is the example.

OS: Windows7
C# and C++ Programming Language
sample pic.jpg

  Re: Chart into three different colors
Posted by Peter Kwan on Nov-27-2020 00:59
| Reply | Monitor
Hi Tony,

Yes. For your case, you can use InterLineLayer. See:

https://www.advsofteng.com/doc/cdnet.htm#linefill.htm

You can define 4 lines:
- The top line
- The orange line
- The green line
- The bottom line

Then you can fill the region between the top and orange lines with pink, and between the orange and green line with flesh, and between the green and bottom line with light green.

The code is like:

c.xAxis().setLogScale(1, 2000, 10);
c.yAxis().setLogScale(0.1, 100, 10);

// Transparent Top Line
Mark topLine = c.yAxis().addMark(100, Chart.Transparent);

// Orange Line
double[] orangeX = { 1, 8, 100, 100, 1000, 2000};
double[] orangeY = { 0.2, 0.2, 2, 9, 100, 100};
LineLayer orangeLine = c.addLineLayer(orangeY, 0xffcc44);
orangeLine.setXData(orangeX);

// Green Line
double[] greenX = { 0.1, 10, 100, 100, 2000};
double[] greenY = { 0.1, 0.1, 0.8, 5, 100};
LineLayer greenLine = c.addLineLayer(greenY, 0x99ff99);
greenLine.setXData(greenX);

// Transparent Bottom Line
Mark bottomLine = c.yAxis().addMark(0.1, Chart.Transparent);

// Fill between top and orange lines
c.addInterLineLayer(topLine.getLine(), orangeLine.getLine(), 0xffdddd);

// Fill between orange and green lines
c.addInterLineLayer(orangeLine.getLine(), greenLine.getLine(), 0xffeecc);

// Fill between green and bottom lines
c.addInterLineLayer(greenLine.getLine(), bottomLine.getLine(), 0xddffdd);

Hope this can help.

Regards
Peter Kwan

  Re: Chart into three different colors
Posted by Tony on Nov-30-2020 17:54
| Reply | Monitor
Thank you very much!

  Re: Chart into three different colors
Posted by Tony on Dec-08-2020 17:41
| Reply | Monitor
Hello,

I want to add vertical and horizontal gridline for the chart.
but the gridline disappears after run c.addInterLineLayer().
How can I add gridline?




            c.setPlotArea(75, 35, 500, 500, -1, -1, 0xc0c0c0, 0xc0c0c0, -1);//add grid


            c.xAxis().setLogScale(1, 2000, 10, Chart.LinearTick);
            c.yAxis().setLogScale(0.1, 100, 10, Chart.LinearTick);
            c.yAxis().setLabelFormat("{value}%");
            c.getPlotArea().setGridColor(Chart.Transparent, Chart.Transparent);
            Mark topLine = c.yAxis().addMark(100, Chart.Transparent);

            double[] orangeX = { 1, 8, 100, 100, 1000, 2000 };
            double[] orangeY = { 0.2, 0.2, 2, 9, 100, 100 };
            LineLayer orangeLine = c.addLineLayer(orangeY, 0xffcc44);
            orangeLine.setXData(orangeX);


            double[] greenX = { 0.1, 10, 100, 100, 2000 };
            double[] greenY = { 0.1, 0.1, 0.8, 5, 100 };
            LineLayer greenLine = c.addLineLayer(greenY, 0x99ff99);
            greenLine.setXData(greenX);


            Mark bottomLine = c.yAxis().addMark(0.1, Chart.Transparent);
            // Fill between top and orange lines
            c.addInterLineLayer(topLine.getLine(), orangeLine.getLine(), 0xffdddd);

            // Fill between orange and green lines
            c.addInterLineLayer(orangeLine.getLine(), greenLine.getLine(), 0xffeecc);

            // Fill between green and bottom lines
            c.addInterLineLayer(greenLine.getLine(), bottomLine.getLine(), 0xddffdd);

   viewer.Chart = c;

  Re: Chart into three different colors
Posted by Peter Kwan on Dec-09-2020 00:45
| Reply | Monitor
Hi Tony,

You can move the grid lines in front of the InterLineLayer by using the PlotArea.moveGridBefore method.

https://www.advsofteng.com/doc/cdnet.htm#PlotArea.moveGridBefore.htm

For example:

// In ChartDirector, the first layer added is the top layer
Layer topLayer = c.addInterLineLayer(topLine.getLine(), orangeLine.getLine(), 0xffdddd);

// Fill between orange and green lines
c.addInterLineLayer(orangeLine.getLine(), greenLine.getLine(), 0xffeecc);

// Fill between green and bottom lines
c.addInterLineLayer(greenLine.getLine(), bottomLine.getLine(), 0xddffdd);

// Move the grid in front of the top layer
c.getPlotArea().moveGridBefore(topLayer);


Hope this can help.

Regards
Peter Kwan