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

Message ListMessage List     Post MessagePost Message

  Track cursor programmatically display Data Points wrong place over map
Posted by Snehankita on May-18-2022 15:44
| Reply | Monitor
Attachments:
I have integrated track cursor programmatically using PHP (Track Line with Data Labels) on my website.
but at the time when I move the cursor over the chart, I get something undefined error message into the console, and data points get spread (not display exact x-axis and Y-axis) into the chart.
can you please help?

Here is the code also please check the attachment for the exact error.

<script>
// Use the window load event to set up the MouseMovePlotArea event handler

    JsChartViewer.addEventListener(window, 'load', function () {
        var viewer = JsChartViewer.get('<?php echo $viewer->getId() ?>');
        // Draw track cursor when mouse is moving over plotarea. Hide it when mouse leaves plot area.
        viewer.attachHandler(["MouseMovePlotArea", "TouchStartPlotArea", "TouchMovePlotArea", "ChartMove"],
                function (e) {
                    this.preventDefault(e);   // Prevent the browser from using touch events for other actions
                    trackLineLabel(viewer, viewer.getPlotAreaMouseX());
                    viewer.setAutoHide("all", ["MouseOutPlotArea", "TouchEndPlotArea"]);
                });
    });

//
// Draw track line with data labels
//
    function trackLineLabel(viewer, mouseX)
    {
        if (!viewer.getChart())
            return;
        // Remove all previously drawn tracking object
        viewer.hideObj("all");
        // The chart and its plot area
        var c = viewer.getChart();
        console.log(viewer);
        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(), "");
        // Draw a label on the x-axis to show the track line position
        viewer.showTextBox("xAxisLabel", xCoor, plotArea.getBottomY() + 3, JsChartViewer.Top,
                c.xAxis().getFormattedLabel(xValue, "mmm dd, yyyy"),
                "font:bold 11px Arial;color:#FFFFFF;background-color:#000000;padding:0px 2px");

        // 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);

            // 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());

                // 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, yCoor, JsChartViewer.Left,
                            dataSet.getValue(xIndex), "padding:0px 3px;font:bold 11px Arial;" +
                            "background-color:" + color + ";color:#FFFFFF;-webkit-text-size-adjust:100%;");
                }
            }
        }
    }
</script>
TinyTake18-05-2022-12-49-42.png

  Re: Track cursor programmatically display Data Points wrong place over map
Posted by Peter Kwan on May-18-2022 22:37
| Reply | Monitor
Hi Snehankita,

It seems the "undefined" error does not come from ChartDirector. Is it possible they are generated by other Javascript framework or browser extension that you may be using?

For the data point not in the correct position, one possibiility is due to chart resizing using CSS or style sheet. In some cases, the chart can be resized in a way that cannot be detected with Javascript. In this case, the data point computed by ChartDirector may not match the size of the chart.

Are you using ChartDirector 7 or an earlier version of ChartDirector? If you are using ChartDirecor 7, the sample code outputs the chart in SVG format, like:

$viewer->setChart($c, SVG);

Please change the above to PNG to see if it solves the problem. The browser side style sheet resizes SVG and PNG in different ways, and the Javascript can easily detect PNG resizing.

$viewer->setChart($c, PNG);

If the above solves the problem, and you want to use SVG instead of PNG, please try to insert the following CSS configuration in the head section of the web page to force the browser to resize SVG in a more predictable way:

<style>
#<?php echo $viewer->getId() ?> {width:100% !important; height:100% !important}
</style>

If the above does not solve the problem, is it possible to create a test page in a web server that is accessible from the internet. I can then access the web page directly and determine what is the cause the problem.

If the above not not possible, please save your web page completely, zip it, and attach to your next message or email to me at pkwan@advsofteng.net. To save a web page completely on FireFox, right click on the page, select "Save Page As", and select "Web Page, Complete". The saved content should consist of a html file and a folder. Please include both in the zip file.

Regards
Peter Kwan

  Re: Track cursor programmatically display Data Points wrong place over map
Posted by Peter Kwan on May-19-2022 01:27
| Reply | Monitor
Hi Snehankita,

After further testing, starting from the ChartDirector 7 programmable track cursor sample code, I find one way to reproduce similar problem as:

<style>
#chart1 { width: 400px; }
</style>

The reason is because the above is not the correct way to resize an image. The normal way is:

<style>
#chart1 { width: 400px; height: auto; }
</style>

I tried the following to make all image height auto, and it also works:

<style>
#chart1 { width: 400px; }
img { height: auto; }
</style>

Regards
Peter Kwan

  Track cursor programmatically display Data Points wrong place over map
Posted by Snehankita on May-19-2022 12:30
| Reply | Monitor
Hi Peter kwan,

Thank you so much for all your help.

Thanks,
Snehankita