Reorganizing Charts using drag and drop

[Teodor Nikolaev]

My app has a bunch of charts on one of its pages and i want to be able to reorganize them with drag and drop. But i couldn't find any information on how to do it. Are there any ways to implement it in Xamarin Forms?

[Bharathiraja K]

Hi Nikolaev, 

 

We have prepared the sample based on your requirement that can be downloaded from below link. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SimpleSample-455448173.zip  

 

If your requirement is differing from the above sample, please share more details about your requirement. We will analyze and provide you solution as much as possible. 

 

Regards, 

Bharathi. 

[Teodor Nikolaev]

Will this method work if I have multiple types of charts that I want to move around (e.g. combination of pie chart, line chart and a histogram chart), also i don't know if it matters but the charts are inside one of the Content pages inside a TabbedPage

[Bharathiraja K]

Hi Nikolaev,  

 

Thanks for your update. We don’t have dragging support in Chart. We have provided the previous update as workaround solution using our SfListView to achieve your requirement. However, you can use the same SfListView in Content Page or Tabbed Page according to your requirement.  

 

Query: Will this method work if I have multiple types of charts that I want to move around 

 

We are not clear with the above query. So, could you please provide more details regarding your requirement and application scenario. It will be more helpful to investigate and provide you better solution. 

 

Regards, 

Bharathi. 

[Teodor Nikolaev]

Hello,

I've uploaded a picture of a sample page that would better illustrate my question, which is that if the charts are of different type how would i put them in the same listView so that i can reorganize them using your previous workaround and if that workaround doesn't work with multiple different types of charts then is there a way to reorganize a page filled with different charts, as in the picture that's attached, using drag and drop.

Thank you in advance.

Attachment: SyncFusionForum_eb8f772a.zip

[Bharathiraja K]

Hi Nikolaev, 

 

We can achieve your requirement by binding the ChartSeries with ChartSeriesCollection property from model by below 

 

<chart:SfChart x:Name="chart"  Series="{Binding SeriesCollection}"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 

                            

 </chart:SfChart> 

 

We have prepared the sample, that can be downloaded from below link.  

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SimpleSample_(2)2082154741.zip  

 

Output:  

 

 

Please revert us any time we happy to help you always.  

 

Regards, 

Bharathi. 

[Teodor Nikolaev]

Thank you that worked perfectly, is there a documentation on the "ChartSeriesCollection" ? Because i was wondering whether i could select different background colours to the charts inside the collection?

[Bharathiraja K]

Hi Nikolaev,  

 

Query: is there a documentation on the "ChartSeriesCollection" ? 

 

We already have the documentation for SeriesCollection in the name of Multi-Series. Please find the documentation link below here. 

 

Multi-Series: https://help.syncfusion.com/xamarin-android/sfchart/chartseries#multiple-series 

 

Query: select different background colours to the charts inside the collection? 

 

You can set different color to Chart by using BackgroundColor property. Create a property ChartColor in Model and set the different color in ViewModel and finally bind to Chart BackgroundColor property as you see in the below code snippet.  

 

Code Snippet [C#]:  

Model: 

=====  

 public class ChartModel
    {
        public ChartSeriesCollection SeriesCollection { get; set; } 

  

      public Color ChartColor { get; set; }
        public ChartModel(ChartSeriesCollection seriesCollection, Color chartColor)
        {
            SeriesCollection = seriesCollection;
          ChartColor = chartColor;
        }
    } 

 

View Model: 

=========  

new ChartModel(
                    new ChartSeriesCollection()
                    {
                        new LineSeries()
                        {
                            //or else bind your data model.
                            ItemsSource = new ObservableCollection<Model>(){new Model("Information Technology", 32), new Model("India",53),new Model("Saudi",26), new Model("USA",82), new Model("Japan",43),
                            },
                            XBindingPath = "Countries",
                            YBindingPath = "Count",
                            XAxis = new CategoryAxis(),
                            YAxis = new NumericalAxis(),
                        },
                    }, Color.LightCoral
                ), 

 

 

[XAML] 

<chart:SfChart x:Name="chart"  Series="{Binding SeriesCollection}" BackgroundColor="{Binding ChartColor}"> 

 

</chart:SfChart> 

 

 

Output:  

 

 

Please let us know, if you have any other queries. 

 

Regards, 

Bharathi. 

[Teodor Nikolaev]

Thank you for all the help!

[Bharathiraja K]

Hi Nikolaev,   

 

You are welcome. 

 

-Bharathi. 

[Teodor Nikolaev]

Hello,

Regarding this chartSeriesCollection i was wondering if there is anyways to add some sort of table (like an excel table) that represents data(for example a DataGrid) instead of one of the charts? 

[Saravanan Madheswaran]

Hi Teodor, 

  

We would like to let you know that we won’t able to add other views other than series in ChartSeriesCollection property, but by using DataTemplateSelector support in SfListView we can able to switch the template based on some condition. We have prepared sample by placing SfDataGrid instead of one of the charts and it can be downloaded from the below link. 

  

Sample - https://www.syncfusion.com/downloads/support/forum/144226/ze/SimpleSample1435371957.zip 

  

Please refer the below links for more details: 

https://help.syncfusion.com/xamarin/sflistview/viewappearance 

https://help.syncfusion.com/xamarin/sfdatagrid/getting-started 

  

Please get back to us for further assistance.  

 

Regards, 

Saravanan M. 

 

[Teodor Nikolaev]

Hello,

Thank you for the previously proposed solution it did in fact work, but another problem occurred, i have doughnut charts that are dynamically created, the problem is that if i click and hold on the chart itself nothing happens but if i put some padding in the frame and i click and hold on the farm itself(not the chart) i am able to move the whole thing around and reorder it, same if i click and hold on the parts of the listviewItem that are separate from the chart. I've uploaded a picture to better describe it i can click and hold the red (frame) and white(listItem) parts of the screen but the darker Green (the chart itself) doesn't allow me to click and hold to re position.

Attachment: Capture_b6584451.zip

[Rachel A]

Hi Teodor, 

 

We would like to let you know that the problem is due to chart interactions are invoked instead of ListView. So, to restrict the touch interactions for the chart we can set the InputTransparent property as true. We have attached video and sample for your reference. 

 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DragAndDrop-1133158292 

 

Sample - https://www.syncfusion.com/downloads/support/directtrac/144226/ze/144226-SimpleSample-1082043513.zip 

 

Please find the code snippet below for the same. 

 

[C#]: 

<chart:SfChart x:Name="chart" InputTransparent="True" Series="{Binding SeriesCollection}" BackgroundColor="{Binding ChartColor}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" /> 

 

 

 

Regards, 

Rachel. 

[Teodor Nikolaev]

Hello,

So setting the property InputTrasnparent to true didn't do the job, but i figured out that whenever the property explode on touch is enabled i cant reorder with drag and drop, but if i disable the property drag and drop works fine. Any ideas how i can have explode on touch enabled and be able to drag and drop?

[Rachel A]

Hi Teodor, 

 

Currently we are checking for the feasibility to achieve this requirement. We need two more business days to complete and will update you the status on 23^rd August 2019. 

 

Regards, 

Rachel. 

[Muneesh Kumar G]

Hi Teodor, 

  

Thanks for your patience.  

 

We have analysed your requirement and we have prepared sample by enabling both drag and drop of listview and touch interactions on chart by setting DragIndicatorView for SfListView.  

 

We can use the DragIndicatorView to perform drag and drop operation. Please refer the below code. 

  

Code snippet: 

<DataTemplate x:Key="ChartTemplate"> 

    <Grid> 

        <Grid.ColumnDefinitions> 

            <ColumnDefinition></ColumnDefinition> 

            <ColumnDefinition Width="30"></ColumnDefinition> 

        </Grid.ColumnDefinitions> 

  

        <chart:SfChart x:Name="chart" Series="{Binding SeriesCollection}" BackgroundColor="{Binding ChartColor}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 

  

            <chart:SfChart.PrimaryAxis> 

                <chart:CategoryAxis/> 

            </chart:SfChart.PrimaryAxis> 

            <chart:SfChart.SecondaryAxis> 

                <chart:NumericalAxis/> 

            </chart:SfChart.SecondaryAxis> 

  

        </chart:SfChart> 

  

        <syncfusion:DragIndicatorView x:Name="dragIndicator" ListView="{x:Reference listView}" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center"> 

            <Grid > 

                <Image Source="DragIndicator.png" VerticalOptions="Center" HorizontalOptions="Center" /> 

            </Grid> 

        </syncfusion:DragIndicatorView> 

    </Grid> 

</DataTemplate> 

  

Please refer the below UG for more details. 

https://help.syncfusion.com/xamarin/sflistview/item-drag-and-drop 

  

Sample – https://www.syncfusion.com/downloads/support/directtrac/144226/ze/144226-sample-746531061.zip 

  

Note: If you enable touch interactions for chart means, touches will not be passed to its parent while perform any interaction by default.  

  

Regards, 

Muneesh Kumar G