FlexChart - Draw vertical line with text

FlexChart - Draw vertical line with text

Posted by: dirk.kuehnle on 1 March 2022, 9:37 am EST

• 

  dirk.kuehnle

  • Post Options:
  • Link
    Copy

  Posted 1 March 2022, 9:37 am EST - Updated 3 October 2022, 10:37 pm EST

  Hello,

  is it posssible, drawing vertical lines in Flexchart with text like in attached Image?

  Thanks,
  
  Dirk

  

  1143×851 68.5 KB

• 

  kartik.sagar

  

  • Post Options:
  • Link
    Copy

  Posted 2 March 2022, 2:06 am EST

  Hi Dirk,

  Thank you for sharing the snapshot.

  You can implement this requirement using IRenderEngine’s DrawLine/DrawString method inside FlexChart’s Rendered event as follows:

  
  private void OnFlexChartRendered(object sender, RenderEventArgs e)
  {
              var dataItem = _chartvalues[3];
  
              // line drawing
              var x = AxisX.Convert(dataItem.Date.ToOADate()); // convert data coordinates to chart coordinates.
              var yMin = AxisY.Convert(((IAxis)AxisY).GetMin());
              var yMax = AxisY.Convert(((IAxis)AxisY).GetMax());
              e.Engine.SetStroke(Brushes.Blue);
              e.Engine.SetStrokeThickness(1);
              e.Engine.DrawLine(x, yMin, x, yMax);
  
              // text drawing
              var textX = x + 10;
              var textY = Math.Abs((yMax - yMin) / 2);
              e.Engine.SetFont(new Font("Segoe UI", 10, FontStyle.Italic));
              e.Engine.SetStroke(Brushes.Blue);
              e.Engine.DrawString("Sample Text", new _Point(textX, textY));
  }
  
  

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

  Best Regards,

  Kartik

  FlexChartDraw.zip

• 

  dirk.kuehnle

  • Post Options:
  • Link
    Copy

  Posted 2 March 2022, 5:21 am EST

  Hi Kartik,

  your solution works perfect for me.

  I have an additional question: Is it posssible drawing the line dotted?

  Best regards,
  
  Dirk

• 

  kartik.sagar

  

  • Post Options:
  • Link
    Copy

  Posted 2 March 2022, 7:22 am EST

  Hi Dirk,

  You can use IRenderEngine’s SetStrokePattern method before drawing the line as follows:

  
  e.Engine.SetStrokePattern(new double[] { 1, 2 }); // set line pattern
  e.Engine.DrawLine(x, yMin, x, yMax);
  
  

  Best Regards,
  
  Kartik

• 

  dirk.kuehnle

  • Post Options:
  • Link
    Copy

  Posted 2 March 2022, 7:37 am EST

  Hi Kartik,

  your solution works for me again.

  I thought to use SetStrokePattern but I didn’t know how to parameterize the double-parameter.

  Thanks and best regards,
  
  Dirk

• 

  dirk.kuehnle

  • Post Options:
  • Link
    Copy

  Posted 2 March 2022, 7:44 am EST

  Hi Kartik,

  now I have another problem.
  
  If the chart is exported as .svg, the text of the vertical line is missing in the image.
  
  .png and .jpg exports ar working fine.

  Regards,
  
  Dirk

• 

  kartik.sagar

  

  • Post Options:
  • Link
    Copy

  Posted 3 March 2022, 12:29 am EST

  Hi Dirk,

  This behavior seems like a bug. So, we have escalated it to the devs and will get back to you when there is any update. [Internal Tracking Id - C1CHART-2007]

  Best Regards,
  
  Kartik

• 

  kartik.sagar

  

  • Post Options:
  • Link
    Copy

  Posted 3 March 2022, 8:10 am EST

  Hi Dirk,

  As per the devs, we need to use IRenderEngine’s SetFill method before drawing string as follows:

  
  e.Engine.SetFill(Brushes.Blue); 
  e.Engine.DrawString("Sample Text", new _Point(textX, textY));
  
  

  However, there is still an issue where the applied font is not honored in the exported SVG and it will be fixed in the 2022v1 hotfix build. We will let you know once the hotfix build is released.

  Best Regards,
  
  Kartik

• 

  dirk.kuehnle

  • Post Options:
  • Link
    Copy

  Posted 4 March 2022, 7:00 am EST - Updated 3 October 2022, 10:37 pm EST

  Hi Kartik,

  thanks a lot therefore.

  Maybe I found another bug…
  
  I draw 3 vertical, dotted lines 2 x green, 1 x blue, as you can see in attached image.
  
  First green line with date december, 11th 2018 seems to be at the correct x-position in diagramm.
  
  Second green line with date april, 13th 2021 isn’t at the correct x-position. The line is drawn before “04/2022”-unit of x-axis.
  
  The position of the blue line with date march, 04th 2022 seems also not to be correct.

  Best regards,
  
  Dirk

  

  1359×848 102 KB

• 

  kartik.sagar

  

  • Post Options:
  • Link
    Copy

  Posted 7 March 2022, 1:08 am EST

  Hi Dirk,

  Thank you for sharing the snapshot.

  However, we couldn’t replicate this behavior at our end. Could you please share a small working sample replicating this behavior so we can assist you accordingly?

  Best Regards,
  
  Kartik