Drag Data Point in C1Graph

Posted by: cnoelle on 11 April 2022, 11:11 am EST

  • Posted 11 April 2022, 11:11 am EST

    In chart.MouseDown(sender As Object, e As MouseEventArgs) I can get SeriesIndex and PointIndex from

    CoordToDataIndex(XCoord As Integer, YCoord As Integer, focus As CoordinateFocusEnum, ByRef SeriesIndex As Integer, ByRef PointIndex As Integer, ByRef Distance As Integer) As Boolean
    

    but no information about which chart.ChartGroups(i) is mentioned.

    Also I cannot find the index of a previously added series item:

    Dim _sr = chart.ChartGroups.Group0.ChartData.SeriesList.AddNewSeries
    _sr.index = ?
    

    How do I get the right datapoint?

  • Posted 12 April 2022, 1:29 am EST

    Hi Chris,

    Thank you for sharing the code snippets.

    You need to manually identify ChartGroup based on the distance from the nearest point. I have written an extension method for Hit testing C1Chart as follows:

    
    public static ChartHitTestInfo HitTest(this C1Chart chart, Point mouseCoordinates, int maxDistance = 3)
    {
                var hitTestInfo = new ChartHitTestInfo();
    
                int seriesIndex = -1, pointIndex = -1, distance = -1;
    
                // Hit testing with group 1
                var group0 = chart.ChartGroups.Group0;
                if (group0.CoordToDataIndex(mouseCoordinates.X, mouseCoordinates.Y, CoordinateFocusEnum.XandYCoord, ref seriesIndex, ref pointIndex, ref distance))
                {
                    hitTestInfo.SeriesIndex = seriesIndex;
                    hitTestInfo.PointIndex = pointIndex;
                    hitTestInfo.Distance = distance;
                    hitTestInfo.Group = group0;
                }
    
                seriesIndex = -1;
                pointIndex = -1; 
                distance = -1;
    
                // Hit testing with group 2
                var group1 = chart.ChartGroups.Group1;
                if (group1.CoordToDataIndex(mouseCoordinates.X, mouseCoordinates.Y, CoordinateFocusEnum.XandYCoord, ref seriesIndex, ref pointIndex, ref distance)
                    && distance < hitTestInfo.Distance)
                {
                    // Group2 is hit if its series dataitem distance is nearest to mouse coordinates
                    hitTestInfo.SeriesIndex = seriesIndex;
                    hitTestInfo.PointIndex = pointIndex;
                    hitTestInfo.Distance = distance;
                    hitTestInfo.Group = group1;
                }
    
                // return null if any of the below criteria matches
                if (hitTestInfo.Group == null || hitTestInfo.SeriesIndex == -1 ||
                    hitTestInfo.Distance < 0 || hitTestInfo.Distance > maxDistance || hitTestInfo.PointIndex == -1)
                    return null;
    
                // hit test is valid
                return hitTestInfo;
    }
    
    

    And then you can use it inside C1Chart’s MouseDown event as follows:

    
    private void OnChartMouseDown(object sender, MouseEventArgs e)
    {
                var hitTest = c1Chart1.HitTest(e.Location);
    
                if(hitTest != null)
                    MessageBox.Show($"Series Index: {hitTest.SeriesIndex}\nPoint Index: {hitTest.PointIndex}\nDistance: {hitTest.Distance}\nChart Group: {hitTest.Group.Name}");
    }
    
    

    And for getting the series index, you need to use ChartDataSeriesCollection’s IndexOf method as follows:

    
    var series = c1Chart1.ChartGroups.Group0.ChartData.SeriesList.AddNewSeries();
    int seriesIndex = c1Chart1.ChartGroups.Group0.ChartData.SeriesList.IndexOf(series);
    
    

    Please refer to the same from the attached sample. (see C1ChartSample.zip)

    Additionally, I would also like to inform you that C1Chart is a legacy control now and hence you won’t receive any fixes/updates in future. So, I would recommend you to take a look at our latest charting control i.e. FlexChart which is more feature-rich, highly-customizable & has top-notch performance as compared to C1Chart.

    https://www.grapecity.com/componentone/docs/win/online-flexchart/key-features.html

    Best Regards,

    Kartik

    C1ChartSample.zip

  • Posted 12 April 2022, 10:33 am EST

    Thank you very much Kartik for this prompt answer. Problems solved.

    I chose the old graph because I had to replace buggy MS Chart. The distance between the two is not too large…

    Is there any easy sample code for having the new flexgraph with xy plots and 2 axis?

    Best Regards,

    Chris

  • Posted 13 April 2022, 12:26 am EST

    Hi Chris,

    I am happy to hear that your issue is resolved.

    I have attached a sample which shows how you can create multiple X/Y plots using FlexChart. (see FlexChartWinSample.zip)

    Additionally, the requirement of your previous query can also be implemented very easily as FlexChart provides HitTest support by default as follows;

    
    private void OnFlexChartMouseDown(object sender, MouseEventArgs e)
    {
                var hittest = flexChart.HitTest(e.Location);
    
                if(hittest != null && hittest.Distance <= 3)
                {
                    MessageBox.Show(
                        $"DataIndex: {hittest.PointIndex}\n" +
                        $"Series:{hittest.Series.Name}\n" +
                        $"Distance: {hittest.Distance}");
                }
    }
    
    

    I hope it helps :slight_smile:

    Best Regards,

    Kartik

    FlexChartWinSample.zip

  • Posted 14 April 2022, 1:51 am EST

    Thanks again, Kartik,

    Some questions:

    Why is dragging not implemented?

    Handling data seems weird, what is faster: adding like your code or filling a datatable with thousands records of xy data and binding?

    Best regards,

    Chris

  • Posted 18 April 2022, 4:11 am EST

    Hi Chris,

    > Why is dragging not implemented?

    Since, Dragging is not a part of plotting/charting data and hence it is not included in FlexChart by default. However, you can implement this requirement by using FlexChart’s MouseDown/MouseUp/MouseMove event. Please refer to the attached sample for the same. (see FlexChartWinSample_Drag.zip)

    Handling data seems weird, what is faster: adding like your code or filling a datatable with thousands records of xy data and binding?

    The code shared with you was a sample demonstration of how you can bind list of objects with FlexChart. Similarly, you can bind a DataTable with FlexChart. Please refer to the attached sample for the same. (see FlexChartWinSample_Drag.zip)

    Additionally, FlexChart is capable of plotting millions of data points so you can use any of the approaches along with a better performance.

    Best Regards,

    Kartik

    FlexChartWinSample_Drag.zip

  • Posted 20 April 2022, 2:35 am EST

    Thanks for the information

    Regards

    Chris

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels