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

Message ListMessage List     Post MessagePost Message

  Position of track line labels
Posted by Sebastian on Nov-05-2012 17:41
| Reply | Monitor
Hi!
I just created a "combined chart" with an area layer and a line layer. I added the Track Line with Data Labels from the cdjcv.js as well.

But for this chart i have area datasets with very small values, what leads in overlapping trackline labels. Cann you help me how to solve this Problem? I tried to give a variable value to the y-axis-position, but only getting exceptions. So I'm not very familar with javascript.

Thanks in advance!!
Sebastian

  Re: Position of track line labels
Posted by Peter Kwan on Nov-06-2012 02:06
| Reply | Monitor
Hi Sebastian,

If your chart has two data sets (one for a line layer and one for an area layer), and you worry that the track data labels may overlap, you may move the track label for the second data set if it is too close to that of the first data set.

Below is a modified trackLineLabel that can move the second label y-position if it is too close to the first label.

Hope this can help.

Regards
Peter Kwan


//
// Draw track line with data labels
//
function trackLineLabel(viewer, mouseX)
{
    // Remove all previously drawn tracking object
    viewer.hideObj("all");

    // The chart and its plot area
    var c = viewer.getChart();
    var plotArea = c.getPlotArea();

    // Get the data x-value that is nearest to the mouse, and find its pixel coordinate.
    var xValue = c.getNearestXValue(mouseX);
    var xCoor = c.getXCoor(xValue);

    // Draw a vertical track line at the x-position
    viewer.drawVLine("trackLine", xCoor, plotArea.getTopY(), plotArea.getBottomY(), "black 1px dotted");

    // Draw a label on the x-axis to show the track line position
    viewer.showTextBox("xAxisLabel", xCoor, plotArea.getBottomY() + 4, JsChartViewer.Top,
        c.xAxis().getFormattedLabel(xValue, "mmm dd, yyyy"),
        "font:bold 11px Arial;color:#FFFFFF;background-color:#000000;padding:0px 3px");

    // Iterate through all layers to draw the data labels
    for (var i = 0; i < c.getLayerCount(); ++i)
    {
        var layer = c.getLayerByZ(i);

        // The data array index of the x-value
        var xIndex = layer.getXIndexOf(xValue);
        var labelYoor = 0;

        // Iterate through all the data sets in the layer
        for (var j = 0; j < layer.getDataSetCount(); ++j)
        {
            var dataSet = layer.getDataSetByZ(j);

            // Get the color and position of the data label
            var color = dataSet.getDataColor();
            var yCoor = c.getYCoor(dataSet.getPosition(xIndex), dataSet.getUseYAxis());

            if (Math.abs(yCoor - labelYoor) < 12)
                labelYoor = labelYoor + ((yCoor > labelYoor) ? 12 : -12);
            else
                labelYoor = yCoor;

            // Draw a track dot with a label next to it for visible data points in the plot area
            if ((yCoor != null) && (yCoor >= plotArea.getTopY()) && (yCoor <= plotArea.getBottomY()) &&
                (color != null))
            {
                viewer.showTextBox("dataPoint" + i + "_" + j, xCoor, yCoor, JsChartViewer.Center,
                    viewer.htmlRect(7, 7, color));

                viewer.showTextBox("dataLabel" + i + "_" + j, xCoor + 5, labelYoor, JsChartViewer.Left,
                    dataSet.getValue(xIndex).toPrecision(4),
                    "padding:0px 3px;font:bold 10px Arial;background-color:" + color + ";color:#FFFFFF");
            }
        }
    }
}

  Re: Position of track line labels
Posted by Sebastian on Nov-06-2012 19:44
| Reply | Monitor
Hey Peter!
Thanks a lot for your help!! The code shown above was exactly what I needed!
Problem solved.

Regards, Sebastian