c# - How to draw a graph in chart control with mouse -

my task draw graph in chart control using mouse , retrieve (x,y) points graph.

i tried of drawing graph mouse. here normal graph looks like. after drawing mouse, looks : code used draw graph :

    private void form1_load(object sender, eventargs e)     {     chart1.chartareas[0].axisx.minimum =0170101;     chart1.chartareas[0].axisx.maximum =0175951;     chart1.chartareas[0].axisy.minimum=0780101;     chart1.chartareas[0].axisy.maximum=0785951;     double range = chart1.chartareas[0].axisx.maximum - chart1.chartareas[0].axisx.minimum;         chart1.chartareas[0].axisx.interval = range / 5;          range = chart1.chartareas[0].axisy.maximum - chart1.chartareas[0].axisy.minimum;         chart1.chartareas[0].axisy.interval = range / 5;     }     private void chart1_mousemove(object sender, mouseeventargs e)     {         if (!(firstpoint == null))         {             graphics g = chart1.creategraphics();             pen erasepen = new pen(color.transparent);             g.drawline(erasepen, firstpoint, temppoint);             temppoint = new point(e.x, e.y);             this.refresh();         }     }     private void chart1_mousedown_1(object sender, mouseeventargs e)     {         firstpoint = new point(e.x, e.y);         temppoint = new point(e.x, e.y);     }      private void chart1_mouseup_1(object sender, mouseeventargs e)     {         lineendpoints line = new lineendpoints         {             startpoint = firstpoint,             endpont = new point(e.x, e.y)         };         lineslist.add(line);         // firstpoint = null;         this.refresh();     }      private void chart1_paint_1(object sender, painteventargs e)     {         foreach (lineendpoints line in lineslist)         {             e.graphics.drawline(pens.green, line.startpoint, line.endpont);         }         if (!(firstpoint == null))         {             e.graphics.drawline(pens.red, firstpoint, temppoint);         }     } 

when used draw graph moving away max , min values of chart control. need know is: 1) graph should not move away x , y axis points of chart control. 2) need know x,y points of graph drawn respect chart axis not form axis.

i use c# vs 2010 win-forms.

chart uses different coordinate system content control surface, ie mouse loacation; there conversion functions come caveat: guaranteed work in paint events..

• pixelpositiontovalue

• valuetopixelposition

here example translates pixel points chart point values. can see 2 graphics overlaying nicely: datapoints connected in blue lines , pixel points dotted red lines..:

    public form1()     {         initializecomponent();         chart1.series[0].charttype = seriescharttype.line;         chart1.chartareas[0].axisx.minimum = 0;         chart1.chartareas[0].axisx.maximum = 500;         chart1.chartareas[0].axisy.minimum = 0;         chart1.chartareas[0].axisy.maximum = 500;     }      list<point> points = new list<point>();      private void chart1_mouseclick(object sender, mouseeventargs e)     {         points.add(e.location);         chart1.invalidate();     }      private void chart1_paint(object sender, painteventargs e)     {         chart1.series[0].points.clear();         foreach(point pt in points)         {             double dx = chart1.chartareas[0].axisx.pixelpositiontovalue(pt.x);             double dy = chart1.chartareas[0].axisy.pixelpositiontovalue(pt.y);             chart1.series[0].points.addxy(dx, dy);         }         if (points.count > 1)             using (pen pen = new pen(color.red, 2.5f))                e.graphics.drawlines(pen, points.toarray());     } 

note clear datapoints , recreate them pixel points list, according current chart layout using pixelpositiontovalue method. layout change when things label sizes, other scaling, other minimum/maximum values etc change.

maybe want work other way round, change clicked points using valuetopixelposition.

here modified example keeps datapoints , recalculates pixel points:

    list<point> points = new list<point>();     point lastpoint = point.empty;      private void chart1_mouseclick(object sender, mouseeventargs e)     {         lastpoint = e.location;         chart1.invalidate();     }      private void chart1_paint(object sender, painteventargs e)     {         // if have new point, convert datapoint , add series.points:         if (lastpoint != point.empty)         {             double dx = chart1.chartareas[0].axisx.pixelpositiontovalue(lastpoint.x);             double dy = chart1.chartareas[0].axisy.pixelpositiontovalue(lastpoint.y);             chart1.series[0].points.addxy(dx, dy);         }         lastpoint = point.empty;         // recalculate pixel points:         points.clear();         foreach (datapoint pt in chart1.series[0].points)         {             double x = chart1.chartareas[0].axisx.valuetopixelposition(pt.xvalue);             double y = chart1.chartareas[0].axisy.valuetopixelposition(pt.yvalues[0]);             points.add(new point((int)x, (int)y));         }          if (points.count > 1)             using (pen pen = new pen(color.red, 2.5f))             {                 pen.dashstyle = system.drawing.drawing2d.dashstyle.dot;                 e.graphics.drawlines(pen, points.toarray());             }     } 

this makes lot more sense, since datapoints bound chart's scaling, 'real thing'. when resize chart datapoints , graphic make scaled usual , drawn pixel points follow perfectly:

(when resize first version can see how nothing being scaled or down , chart's grid lines change..)

note set few things start with, not every point add enforces many layout changes. note there still occurs feedback loop when new points change e.g. label sizes, enforces layout change , paint loop.. fix should control labels' formats!

also note both conversion methods work (correctly) in paint event(s), because current layout being settled.