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

Message ListMessage List     Post MessagePost Message

  Change the position of the custom label?
Posted by Leo on Sep-23-2011 09:06
| Reply | Monitor
Attachments:
Hi,

Here are my codes to add the custom label for the last value and could you please take a look at the attached image to check if my requirement is possible and how to implement this:
const int NumberCurves = 2;
            const int CurveVerticalSpace = 30;
            const int CurveColor = 0x00aa22;

            // The data for the chart and there are 14 values
            double[] dataY1 = { 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1 };

            DateTime[] dataX1 = {
                    new DateTime(2008, 7, 1, 0, 0, 0), new DateTime(2008, 7, 1, 2, 17, 2)
                    , new DateTime(2008, 7, 1, 8, 5, 30), new DateTime(2008, 7, 1, 10,
                54, 10), new DateTime(2008, 7, 1, 15, 40, 0), new DateTime(2008, 7, 1, 18,
                22, 20), new DateTime(2008, 7, 1, 22, 17, 14), new DateTime(2008, 7, 2, 2,
                55, 50), new DateTime(2008, 7, 2, 8, 17, 14), new DateTime(2008, 7, 2, 11,
                55, 50), new DateTime(2008, 7, 2, 13, 17, 14), new DateTime(2008, 7, 2, 17,
                55, 50), new DateTime(2008, 7, 2, 20, 17, 14), new DateTime(2008, 7, 3, 0, 0, 0)
                           };

            // The data for the chart and there are 12 values
            double[] dataY2 = { 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0};

            DateTime[] dataX2 = {
                    new DateTime(2008, 7, 1, 0, 0, 0), new DateTime(2008, 7, 1, 2, 17, 2)
                    , new DateTime(2008, 7, 1, 8, 5, 30), new DateTime(2008, 7, 1, 10,
                54, 10), new DateTime(2008, 7, 1, 15, 40, 0), new DateTime(2008, 7, 1, 18,
                22, 20), new DateTime(2008, 7, 1, 22, 17, 14), new DateTime(2008, 7, 2, 2,
                55, 50), new DateTime(2008, 7, 2, 8, 17, 14), new DateTime(2008, 7, 2, 11,
                55, 50), new DateTime(2008, 7, 2, 13, 17, 14), new DateTime(2008, 7, 2, 17,
                55, 50)};


            // Create a XYChart object
            // Size of the chart depends from number of shown digital curves
            XYChart chart = new XYChart(900, 70 + CurveVerticalSpace * NumberCurves, 0xdddddd);


            // Tentatively set the plotarea at (100, 30). Size of plot area depends from number of shown digital curves.
            // Use transparent border. Use grey (0x888888) dotted line and light grey (0xcccccc) dotted
            // line as major and minor vertical grid lines.
            PlotArea plotArea = chart.setPlotArea(50, 30, 800, NumberCurves * 30, 0xeeeeee, -1, 0x666666);
            int dashGrey = chart.dashLineColor(0x888888, Chart.DotLine);
            int dashLightGrey = chart.dashLineColor(0xcccccc, Chart.DotLine);
            plotArea.setGridColor(Chart.Transparent, dashGrey, Chart.Transparent, dashLightGrey);

            chart.yAxis().setColors(Chart.Transparent, Chart.Transparent);

            for (int i = 1; i <= NumberCurves; i++)
            {
                var dataX = i == 1 ? dataX1 : dataX2;
                var dataY = i == 1 ? dataY1 : dataY2;
                // Shift values to get 1 or 1.2 values (e.g. for i ==1)
                double[] digitalValuesLine = new ArrayMath(dataY).mul(0.2).add(i).result();

                // Shift values to get 1 only (e.g. for i ==1)
                double[] zeroValuesLine = new ArrayMath(dataY).mul(0).add(i).result();

                // Add step lines
                StepLineLayer stepLineLayer = chart.addStepLineLayer(digitalValuesLine, 0x00aa22);
                DataSet ds = stepLineLayer.addDataSet(zeroValuesLine, 0x00aa22);
                stepLineLayer.setXData(dataX);
                ds.setLineWidth(2);

                // Fill the region between the two step lines with specified color.
                chart.addInterLineLayer(stepLineLayer.getLine(0), stepLineLayer.getLine(1), CurveColor, CurveColor);

// PAY Attention to there
                // Add  the text box for the last value
                TextBox valueMarker = stepLineLayer.addCustomDataLabel(1, i == 1? 13 : 11, "Text " + i);
                valueMarker.setAlignment(Chart.Center);
                valueMarker.setBackground(0xffffff, CurveColor);
                valueMarker.setSize(40, 20);
                valueMarker.setPos(3, -10);
                valueMarker.setRoundedCorners(90, 0, 0, 90);
            }
customLabel.png

  Re: Change the position of the custom label?
Posted by Peter Kwan on Sep-24-2011 02:42
| Reply | Monitor
Hi Leo,

Yes. What you need can be achieved in ChartDirector.

If your intention is to put the label to the right of the plot area, you may use an axis mark. The code is like:

//put your transparent y-axis on the right side
c.setYAxisOnRight();

for (int i = 1; i <= NumberCurves; i++)
{
     .... add the line as usual ....

     Mark valueMarker = c.yAxis().addMark(dataY[dataY.Length - 1], -1,
           "<*block,width=40,height=20,halign=center,valign=center*>Text " + i);
     valueMarker.setMarkColor(Chart.Transparent, Chart.TextColor, Chart.Transparent);
     valueMarker.setBackground(0xffffff, CurveColor);
     valueMarker.setRoundedCorners(90, 0, 0, 90);
}

Hope this can help.

Regards
Peter Kwan