Flexchart: smooth chart update + bars out of chart

Flexchart: smooth chart update + bars out of chart

Posted by: a.sharov on 13 December 2021, 4:20 pm EST

• 

  a.sharov

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 13 December 2021, 4:20 pm EST - Updated 3 October 2022, 10:48 pm EST

  Hi.

  I see this question as aggregation(or continuation) of these discussions – https://www.grapecity.com/forums/winforms-edition/flexchartdisplay-error-bar
  
  and
  
  https://www.grapecity.com/forums/winforms-edition/flexchart-axisy--autoscale

  I was asked to provide sources – https://drive.google.com/file/d/12lxccHrW61nVzyPGEVIlPSAvyi-7uaoQ/view?usp=sharing

  There is ChartUserControl which incapsulates all logic.

  It seems that for now with cropping there is no problem, but rather bars are now out of chart. Plus, when I add new points on chart via “norm” button chart twitches which leads to following artifcats (see img below).

  1)How to deal with these artifacts?

  2)Can I update chart more smoother , without flicking or twitching? Is it relates to changing Axis[XY] values, or I update chart in wrong way? For example, I call
  
  BeginUpdate\ EndUpdate, or maybe I should call other methods?

  3)As you can see in sources, my control is based on samples from FlexChartExplorer: range selector sample + plot areas/zones sample + analytics/aggregation sample (I use daily aggregation for range selector chart).

  I would be very very thankfull to you if you give a small code review, some
  
  hints or improvements.

  Thanks in advance.

  

  

  153×611 2.05 KB

• 

  a.sharov

  • Post Options:
  • Link
    Copy

  Posted 13 December 2021, 4:24 pm EST

  Sorry for formatting images, there are three images – two demonstates bars outside of charts and last demonstrates that chart as a whole is a little bit cropped on X scale.
  
  Please, let me now if smth more is needed.

• 

  kartik.sagar

  

  • Post Options:
  • Link
    Copy

  Posted 14 December 2021, 7:30 am EST

  Hi Anton,

  Thank you for sharing the sample and snapshots.

  1. In order to fix the alarm zone getting out of chart bounds, you can use FlexChart’s PlotRect bounds while drawing alarm zone as follows:

  
  engine.DrawRect(flexChart3.PlotRect.X, Math.Min(pt1.Y, pt2.Y),
                 flexChart3.PlotRect.Right - flexChart3.PlotRect.X, Math.Abs(pt2.Y - pt1.Y));
  
  

  2. The error bar issue was because of the incorrect error bar drawing logic which I have fixed in the attached sample as follows:

  
   var upperPoint =
                      flexChart3.DataToPoint(new PointF(0, (float)(dataItem.Value + errorValue)));
  var lowerPoint =
                      flexChart3.DataToPoint(new PointF(0, (float)(dataItem.Value - errorValue)));
  
  

  3. For making the chart effects smooth, you can use FlexChart’s AnimationSettings property as follows:

  
  flexChart3.AnimationSettings = AnimationSettings.All;
  
  

  Please refer to the attached modified sample. (see C1Sample_Mod.zip)

  Best Regards,
  
  Kartik

  C1Sample_Mod.zip

• 

  a.sharov

  • Post Options:
  • Link
    Copy

  Posted 14 December 2021, 4:33 pm EST

  Hi, thank you very much, Kartik!

  Small question\request:
  
  I’ve decided to use Animation.Axes for now but when I add new point on chart , first moments it appears out of the chart on the right and then chart shifts to it (or point moves into chart bounds from the right). Is it possible to fix, maybe initially shift chart and then add point? If it is hard to understand I will try to produce some video. But it could be see on sample above, first monents point is out of chart.

  Thanks in advance.

• 

  kartik.sagar

  

  • Post Options:
  • Link
    Copy

  Posted 15 December 2021, 12:51 am EST

  Hi Anton,

  In order to prevent this behavior, you can update the Axis’s Max before adding a new point as follows:

  
  flexChart3.BeginInvoke(new Action(async() => {
  flexChart3.AxisX.Max = position.Date.ToOADate();
  await Task.Delay(flexChart3.AnimationUpdate.Duration); // wait till the animation completes
  _fdsi.AddNewPosition(position);
  }));
  
  

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

  Best Regards,
  
  Kartik

  C1Sample_Mod2.zip