Draw chart with mouse click

2 posts, 1 answers
  1. assassin
    assassin avatar
    1 posts
    Member since:
    May 2018

    Posted 21 May 2018 Link to this post

    Hello

    I want to draw a chart (Cartesian, line series) with mouse click but i don't know how can I get location of mouse click in chart axes,

    Also how to allow for add new point only in horizontal and vertical stripes lines intersect

    Thanks

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    2820 posts

    Posted 21 May 2018 Link to this post

    Hi Sebastiaan,

    You can use the following code to calculate the value on the chart surface. I am adding an invisible series to define the range. Here is the code:
    public RadForm1()
    {
        InitializeComponent();
     
        radChartView1.MouseDown += RadChartView1_MouseDown;
        ScatterSeries scatterSeries = new ScatterSeries();
        scatterSeries.Name = "";
        scatterSeries.DataPoints.Add(new ScatterDataPoint(0, 0));
        scatterSeries.DataPoints.Add(new ScatterDataPoint(200,200));
        scatterSeries.BackColor = Color.Transparent;
        this.radChartView1.Series.Add(scatterSeries);
    }
     
    private void RadChartView1_MouseDown(object sender, MouseEventArgs e)
    {
        object hValue = this.GetVerticalAxisValueFromMouse(e);
        object vValue = this.GetHorizontalAxisValueFromMouse(e);
     
        Console.WriteLine(hValue);
        Console.WriteLine(vValue);
        Console.WriteLine();
    }
     
    private object GetVerticalAxisValueFromMouse(MouseEventArgs e)
    {
        LinearAxis axis = radChartView1.Axes[1] as LinearAxis;
        double delta = axis.ActualRange.Maximum - axis.ActualRange.Minimum;
        double totalHeight = axis.Model.LayoutSlot.Height;
        double ratio = 1 - (e.Location.Y - this.radChartView1.Area.View.Viewport.Y - axis.Model.LayoutSlot.Y) / totalHeight;
        double value = axis.ActualRange.Minimum + delta * ratio;
     
        return value;
    }
     
    private object GetHorizontalAxisValueFromMouse(MouseEventArgs e)
    {
        LinearAxis axis = radChartView1.Axes[0] as LinearAxis;
        double delta = axis.ActualRange.Maximum - axis.ActualRange.Minimum;
        double totalWidth = axis.Model.LayoutSlot.Width;
        double ratio = (e.Location.X - this.radChartView1.Area.View.Viewport.X - axis.Model.LayoutSlot.X) / totalWidth;
        double value = axis.ActualRange.Minimum + delta * ratio;
     
        return value;
    }

    If you want to use specific values only can pick the closest value after the user clicks on the surface. 

    I hope this will be useful. 

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top