C1FlexChart Series Binding

C1FlexChart Series Binding

Posted by: hmmftg on 14 April 2019, 3:07 am EST

• 

  hmmftg

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 April 2019, 3:07 am EST

  Hi, Please check this code:

  C#

  
          public class ChartPoint
          {
              public string Time { get; set; }
              public int CountOk { get; set; }
              public int CountFail { get; set; }
              public ChartPoint(string time, int countOk, int countFail)
              {
                  Time = time;
                  CountOk = countOk;
                  CountFail = countFail;
              }
          }
          public static List<ChartPoint> TimeData;
  
          public List<ChartPoint> ChartBindingData { get { return TimeData; } }
  

  WPF
  
  in Window Tag

  DataContext = "{Binding RelativeSource={RelativeSource Self}}"
  
  

  in Grid

  
                      <c1:C1FlexChart BindingX="Time" x:Name="flexChart" 
                                      HorizontalAlignment="Stretch" 
                                      VerticalAlignment="Stretch" Palette="Light"
                                      ItemsSource="{Binding Path=ChartBindingData}">
                          <c1:Series Binding="CountFail" SeriesName="Fail"/>
                          <c1:Series Binding="CountOk" SeriesName="Ok"/>
                      </c1:C1FlexChart>
  

  and in timer thread

  SyncContext.Send(state => MainWindow.TimeData.Add(new MainWindow.ChartPoint(DateTime.Now.ToString("T"), (int)usedCpu, (int)usedBytesPrivate)), null);
  

  the binding is not working here and I’m use the code in WPF.FlexChart.pdf document.

  please help

• 

  basant.khatiyan

  

  • Post Options:
  • Link
    Copy

  Posted 14 April 2019, 4:47 pm EST

  Hi,

  Since you are dynamically adding items to your collection so, you should use a collection which provides such change notifications (e.g. ObservableCollcetion) instead of List.

  Also, since your Binding source is read (get) only so, you should initialize it before/when it gets used by the Binding. For example:

  public ObservableCollection<ChartPoint> ChartBindingData
  {
   get
   {
    if (TimeData == null)
     TimeData = new ObservableCollection<ChartPoint>();
    return TimeData;
   }
  }
  

  Also, you can refer the attached sample(prj_DynamicFlexChart.zip) for the same.

  Thanks,
  
  Basant

  prj_DynamicFlexChart.zip

• 

  hmmftg

  • Post Options:
  • Link
    Copy

  Posted 14 April 2019, 11:00 pm EST

  Hi, thank you for your reply it worked well,
  
  can you please help me with adding Axis Scrollbar for my flexchart?

• 

  basant.khatiyan

  

  • Post Options:
  • Link
    Copy

  Posted 15 April 2019, 7:57 pm EST

  Hi,

  AxisScrollbar can be added to a FlexChart Axis simply as follows:

  <c1:C1FlexChart.AxisX>
   <c1:Axis>
    <c1:Axis.Scrollbar>
     <c1:C1AxisScrollbar x:Name="axisScrollbar"/>
    </c1:Axis.Scrollbar>
   </c1:Axis>
  </c1:C1FlexChart.AxisX>
  
  

  However, since you are using dynamic data so, you have to update AxisScrollbar’s Minimum and Maximum according to the current data bounds. For example: Since you have categorical data so, X-Axis values for data items will be 0,1,2…n-1 (n= number of data items) and hence we’ll update AxisScrollbar bounds using FlexChart.Rendered event accordingly as follows:

  axisScrollbar.Minimum = 0;
  var max = ChartBindingData.Count() - 1;
  axisScrollbar.Maximum = max <= axisScrollbar.Minimum ? axisScrollbar.Maximum : max;
  

  Please refer the attached modified sample(prj_ScrollDynamicChart.zip) for complete implementation.

  Thanks,
  
  Basant

  prj_ScrollDynamicChart.zip

• 

  hmmftg

  • Post Options:
  • Link
    Copy

  Posted 20 April 2019, 2:00 am EST

  Hi basant.khatiyan, thanks very much for your help,
  
  It helps a lot, I have had a problem by which my legends and axises did not show up in the chart, I tried some modifications and understand that the mistake was using ```
  
  AllowTransparency=true

  
  thanks again for your help.
  Regards

• 

  basant.khatiyan

  

  • Post Options:
  • Link
    Copy

  Posted 21 April 2019, 4:26 pm EST

  Hi,

  I tried to replicate the behavior by setting “AllowTransparency = true” and “WindowStyle = WindowStyle.None (required for AllowTransparency)” but could not observe any impact on Legend/Axes(or FlexChart Text).

  Also, the AllowTransparency = true allows only the Window’s client area to be transparent if specified(using Background property) so, it should not have affected the text on FlexChart. Therefore, I would request you to confirm the behavior by applying the required settings to the earlier provided sample and share your observations.

  Regards,
  
  Basant