This is a migrated thread and some comments may be shown as answers.

Draw chart with mouse click

1 Answer 141 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
assassin
Top achievements
Rank 1
assassin asked on 21 May 2018, 08:26 AM

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 21 May 2018, 09:51 AM
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.
Tags
ChartView
Asked by
assassin
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or