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

Message ListMessage List     Post MessagePost Message

  Standard Cube
Posted by John Nelson on Jan-11-2018 21:34
Attachments:
Hi - I need to create a cube in ChartDirector. I have not seen this capability anywhere in the documentation.  Please see attached image.

The trick is the the cube can be 3x3, 4x4, or 5x5.  The colors will always be red, yellow, or green.  The trick is each cell could be any one of those colors given the set of circumstances.

I thought about making a bar graph with no x and y axis.  Would that be a possible solution?

Each cell could have text in them as well as tool tips.
cube.jpg

  Re: Standard Cube
Posted by Peter Kwan on Jan-12-2018 05:31
Attachments:
Hi John,

There are actually some examples in this forum, but because this type of chart has no standard name, it is not known which keyword to search for. Even I cannot find many of the examples that I remember should exist. I can only find an example that is called the "wafer chart".

See:

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


http://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&pattern=wafer+chart&thread=1468189605#N1468264100

(The large wafer chart is above quite complex as it contains a lot of cells, can be circular, can rotate, and is clickable with tooltips.)

Another issue is that the code in the forum may not be in the programming language you are using. So I simply write one for you. Basically, it is using scatter layers to draw the square cells.

// 3 x 3 cells
int xCount = 3;
int[] colors = { 0xff0000, 0xff0000, 0x00ff00, 0xffff00, 0x00ff00, 0x0000ff, 0xff00ff, 0xffff00, 0x00ffff };

int cellSize = 151;  // Should be an odd number to ensure the center is at an integral coordinate

int plotAreaWidth = cellSize * xCount;
XYChart c = new XYChart(plotAreaWidth, plotAreaWidth);
c.setPlotArea(0, 0, plotAreaWidth - 1, plotAreaWidth - 1, -1, -1, 0x444444, 0x444444, 0x444444);

for (int i = 0; i < xCount; ++i) {
    for (int j = 0; j < xCount; ++j) {
        ScatterLayer layer = c.addScatterLayer(new double[] { i + 0.5 }, new double[] { j + 0.5 }, "",
            Chart.SquareSymbol, cellSize, colors[i * xCount + j], colors[i * xCount + j]);
        c.getPlotArea().moveGridBefore(layer);
    }
}

c.xAxis().setLinearScale(0, xCount, 1);
c.yAxis().setLinearScale(0, xCount, 1);

viewer.setChart(c);

Hope this can help.

Regards
Peter Kwan
test.png

  Re: Standard Cube
Posted by John Nelson on Jan-12-2018 11:10
Attachments:
Thank you - I figured another way  - and it begs a question.  Why does the top of the graph from 5.0 to 6.0 show up like that?

Here is the code and the screen shot...

XYChart c = new XYChart(600, 380, Chart.brushedSilverColor(), Chart.Transparent, 2);

c.addTitle("Annual Revenue for Star Tech", "Times New Roman Bold Italic", 18).setMargin2(0, 0, 8, 8);

c.setPlotArea(70, 55, 460, 280, -1, -1, Chart.Transparent, 0x000000);

c.setRoundedFrame(0xffffff, 20);

double[] dataX = {0.0, 0.0, 5.0, 5.0};
  double[] dataY = {0.0, 5.0, 5.0, 0.0};

AreaLayer layer = c.addAreaLayer(dataY, project.getLowLevelColor(), "");

   layer.setXData(dataX);

c.makeChart(Chart.PNG);
Area Example.jpg

  Re: Standard Cube
Posted by Peter Kwan on Jan-12-2018 13:03
Hi John,

If your code does not specify the y-axis scale, ChartDirector will automatically determine the y-axis scale and labels. By default, ChartDirector will ensure there is at least 10% empty space between the top of the plot area and the highest data position.

For your case, the highest data position is 5, so the top of the axis must be at least 5 / 0.9 = 5.5555. By default, ChartDirector will also ensure the axis scale is a label position, and the next label position is 6.0. So the axis scale is 0 to 6.

The horizontal black lines you see are the grid lines, which is black in color as configured in XYChart.setPlotArea. The grid lines below are hidden by your area chart.

If you do not want to have empty space at the top, you can specify the scale with your own code (use Axis.setLinearScale) or use Axis.setAutoScale and Axis.setRounding to configure the auto-scaling parameters. For example:

c.yAxis().setLinearScale(0, 5, 1);

or

// Do not add top and bottom scale margin to the axis scale, and do not
// extend the axis scale to a labelled position.
c.yAxis().setAutoScale(0, 0, 0.8);
c.yAxis().setRounding(false, false);

Hope this can help.

Regards
Peter Kwan

  Re: Standard Cube
Posted by John Nelson on Jan-12-2018 11:26
One more question - how can I get the text into each cell?

See my original image.

  Re: Standard Cube
Posted by Peter Kwan on Jan-12-2018 18:42
Hi John,

If you use the addScatterLayer method, you can add the text as data labels. For example:

ScatterLayer layer = c.addScatterLayer(....);

layer.addCustomDataLabel(0, 0, "abc\ndef\n123", "Arial", 10, 0x000000, 0).setAlignment(Chart.Center);

Hope this can help.

Regards
Peter Kwan

  Re: Standard Cube
Posted by John Nelson on Jan-12-2018 20:18
No chance i can add text to the area layer?

  Re: Standard Cube
Posted by John Nelson on Jan-12-2018 20:29
I managed to get text into the layer using addCustomDataLabel()

But now I want to remove the x and y axis text altogether.

Any help there?

  Re: Standard Cube
Posted by Peter Kwan on Jan-12-2018 21:00
Hi John,

Just set the axes to transparent.

c.xAxis().setColors(Chart.Transparent, Chart.Transparent);
c.yAxis().setColors(Chart.Transparent, Chart.Transparent);

Regards
Peter Kwan

  Re: Standard Cube
Posted by John Nelson on Feb-13-2018 23:25
Ok - so I have this chart all set - but I have one additional feature that I just cannot figure out.

How can i add a title to this chart.

plotAreaWidth = 300;
cellSize = 61;

       XYChart c = new XYChart(plotAreaWidth, plotAreaWidth);


        c.setPlotArea(0, 0, plotAreaWidth - 1, plotAreaWidth - 1, -1, -1, 0x444444, 0x444444, 0x444444);



        for(int column=1; column<=cubeSize; column++){

            for(int row=cubeSize; row>=1; row--){

                ScatterLayer layer = c.addScatterLayer(new double[] { xx + 0.5 },
                                                new double[] { yy + 0.5 },
                                                "",
                                                Chart.SquareSymbol,
                                                cellSize,
                                                getColor(column, row),
                                                -1);




                c.getPlotArea().moveGridBefore(layer);
            }
        }

        c.xAxis().setLinearScale(0, cubeSize, 1);
        //c.yAxis().setLinearScale(0, cubeSize, 1);

           c.addTitle("My Title Here", "Arial Bold Italic", 12, 0xffffff);


So - when i do this the text 'My title Here' does show up but it is overwritingthe top line of the cube.  How can I set aside some space for the title?

  Re: Standard Cube
Posted by Peter Kwan on Feb-14-2018 02:01
Hi John,

You may try:

// Add 20 pixels at the top to reserve space for the title
XYChart c = new XYChart(plotAreaWidth, plotAreaWidth + 20);

c.setPlotArea(0, 20, plotAreaWidth - 1, plotAreaWidth - 1, -1, -1, 0x444444, 0x444444, 0x444444)

Hope this can help.

Regards
Peter Kwan

  Re: Standard Cube
Posted by John Nelson on Feb-14-2018 04:22
Thank you - yes that works.

Sorry - now one more thing that I can't seem to get to work - and maybe I am mis understanding.

I'm trying to get that title background to be transparent so that no matter what background the image is display in the text background will match.

I have tried

        c.setPlotArea(0, 20, plotAreaWidth - 1, plotAreaWidth - 1, Chart.Transparent, Chart.Transparent, 0x444444, 0x444444, 0x444444);

        c.addTitle(title, "Arial Bold", 8, 0x000000, Chart.Transparent, Chart.Transparent);

But neither one works.

Any help or explanation ?

  Re: Standard Cube
Posted by Peter Kwan on Feb-14-2018 13:25
Hi John,

The title background is by default transparent, so your code does not need to do anything special. Just use:

c.addTitle(title, "Arial Bold", 8, 0x000000);

Since the title background is transparent, so you should be the chart background color behind the title. See:

http://www.chartdir.com/forum/download_thread.php?site=chartdir&bn=chartdir_support&thread=1515677651#N1515726612

If you do not set the chart background, the default chart background is white. If you want the chart itself to be transparent, you can use Chart.Transparent as the chart background color. This would work provided your output format supports transparency. (For example, PNG supports transparency, while JPG does not.)

Regards
Peter Kwan