We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Editable chart with user input

Thread ID:

Created:

Updated:

Platform:

Replies:

129734 Mar 31,2017 09:33 AM UTC Apr 3,2017 01:00 PM UTC WPF 2
loading
Tags: Chart
Francesco Colombo
Asked On March 31, 2017 09:37 AM UTC

Hi,I'm currently using sf:Chart to draw on UI a chart with some editable features.What I need to achieve is that this chart has to be editable by the user with some sort of "drag&drop" feature. Basically the chart present 3 series. Each series is clickable (I can handle this via events), once clicked the bar become red and two circle indicators are shown, positioned over the series bar (like in the attached image). These circles can be used by the user as draggable controls to change the series values. The user can drag up&down via the "upper circle" (this will change the series y value) or can drag left&right via the "lateral circle" (this will change the series x value).To better understand what I need to achieve I attach a picture which shows my needthanksF

Francesco Colombo
Replied On March 31, 2017 09:39 AM UTC


Devi Aruna Maharasi Murugan [Syncfusion]
Replied On April 3, 2017 01:00 PM UTC

Hi Francesco, 
  
Thanks for contacting Syncfusion Support. 
  
In default, SfChart has support for dragging the ColumnSeries and it can be achieved by enabling the EnableSegmentDragging property of ColumnSeries as shown in the below code snippet, 
 
<chart:ColumnSeries EnableSegmentDragging="True"  
                    EnableDragTooltip="False" /> 
 
We are able to change the color of column segment while dragging with MouseLeftButtonDown and MouseLeftButtonUp events of column series. Please find the code snippet, 
 
 
Model selectedModel; 
private void ColumnSeries_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
     { 
         var column = sender as ColumnSeries; 
        if (e.OriginalSource is Rectangle) 
        { 
              selectedModel = ((e.OriginalSource as Rectangle).Tag as  
                                  ColumnSegment).Item as Model; 
              column.SelectedIndex = (column.ItemsSource as  
                         ObservableCollection<Model>).IndexOf(selectedModel); 
                     
            } 
                
        } 
 
 private void ColumnSeries_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
        { 
            (sender as ColumnSeries).SelectedIndex = -1; 
        } 
 
Please find the output screenshot, 
 
 
 
  
We have prepared a demo sample for your reference and it can be downloaded from below link, 
  
Sample: SegmentDragging 
  
Kindly refer our UG documentation link to know more about the data editing in chart series, 
  
  
Regards, 
Devi 




CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;