1. Home
  2. Forum
  3. WPF
  4. I want create diagram with chart like this connector , shapes , connection between two data

I want create diagram with chart like this connector , shapes , connection between two data

I attached a sample screenshot in attachment. I need to have an x and y-axis, and need to draw exactly like the image I attached with syncfusion diagram or chart control?

Attachment: diagrm_adc3f1b8.zip

15 Replies 1 reply marked as answer
RA Ranjitha Amirthalingam Syncfusion Team November 19, 2020 02:55 PM UTC

Hi Ragavan, 
 
Greetings from Syncfusion. 
 
We have support to achieve your requirement using ConnectorPortViewModel, ConnectorViewModel and NodeViewModel. We have provided the sample to represent this. Please refer to the sample from the following link. 
 
Sample Link:
Connectorportsample
 
 
Sample Details: 
In this sample, we have established connection with source as Node and target as Point. And added connectorportviewmodel to the connector and established connection between the connectors using port. 
 
Regards, 
Ranjitha A. 


RA ragavan November 20, 2020 11:51 AM UTC

Hi Ranjitha, 

My requirement slightly different 

Y-axis I need to render timespan. Below image, I explained my requirement 

Each PC have different shape. 

IF I connected PC1 it was circle 

    PC2 diamond 
     PC3 Rectangle



HM Hemalatha Marikumar Syncfusion Team November 20, 2020 12:36 PM UTC

Hi Ragavan, 
 
This update is mainly to get the confirmation of your requirement in detail to proceed this further and provide a better solution without misleading.   
 
We have compared the provided screenshots from your first and recent update. Both are different and not clear to know your exact requirement.  
 
Comparison of recent screenshot with data points: 
 
 
 
 


If User1 uses the PC1 then, need the line on time 8 with circle end (since it is a PC1) – This is from our understanding but output shows no more connector lines shown for User 1 to PC1 but its shown for PC2 at 8 (actual value is 9) 
 
Whether you want to connect the lines between the relation of Users and PCs then please confirm this. 
 
Could you please share the detailed data points to have a previsouly provided screenshot (first update from your end) and also explain the needed connector lines and its relation to understand better and provide a possible solution at earlier? 
 
Regards,
Hemalatha M. 
 
 


RA ragavan replied to Hemalatha Marikumar November 20, 2020 12:47 PM UTC

Hi Ragavan, 
 
This update is mainly to get the confirmation of your requirement in detail to proceed this further and provide a better solution without misleading.   
 
We have compared the provided screenshots from your first and recent update. Both are different and not clear to know your exact requirement.  
 
Comparison of recent screenshot with data points: 
 
 
 
 


If User1 uses the PC1 then, need the line on time 8 with circle end (since it is a PC1) – This is from our understanding but output shows no more connector lines shown for User 1 to PC1 but its shown for PC2 at 8 (actual value is 9) 
 
Whether you want to connect the lines between the relation of Users and PCs then please confirm this. 
 
Could you please share the detailed data points to have a previsouly provided screenshot (first update from your end) and also explain the needed connector lines and its relation to understand better and provide a possible solution at earlier? 
 
Regards,
Hemalatha M. 
 
 


Hi Hemalatha, 

I took the screenshot sample you shared earlier, I made some paintings over the screenshot, connections were incomplete.

Yes, my bad user 1 connecting PC2, it should be diamond but shapes not important here , each PC with any unique shapes is fine 

My main focus is  I need to show a timeline in the y-axis  



RA ragavan November 23, 2020 11:06 AM UTC

Hi Hemalatha, 

Hope you doing well. 

Do you guys checking my requirement with Diagram control?

Thanks,
Ragavan G.

HM Hemalatha Marikumar Syncfusion Team November 23, 2020 12:13 PM UTC

Hi ragavan, 
 
Thanks for your update. 
 
Yes, we have checked with diagram control, but your requirement is to show the points (connector line) at the specific points which doesn’t possible with diagram control.  
 
Currently we are checking this with Chart control and from the provided screenshot timespan values are plotted in X axis, but you mentioned like Y axis. So, could you please confirm this? 
 
and we will check the possibilities of this requirement with chart and update you the details on or before November 25,2020. 
 
We appreciate your patience until then. 
 
Regards,
Hemalatha M. 


RA ragavan November 23, 2020 12:19 PM UTC

Hi Hemlatha , 

Yes timespan should be in X-axis ( Horizontal one ) Y-axis is User and PC List ( Vertical one )

HM Hemalatha Marikumar Syncfusion Team November 23, 2020 01:00 PM UTC

Hi ragavan,

 

Thanks for your update.

 

As I informed earlier, we will update the required UI on or before November 25, 2020, using SfChart control.

 

Regards,
Hemalatha M.


YP Yuvaraj Palanisamy Syncfusion Team November 24, 2020 04:08 PM UTC

Hi Ragavan,  
   
Thanks for your patience.  
   
We have analysed your query and we have achieved your requirement by using SfChart control.  
  
SfChart needs Primary and secondary axis to plot the data for its cartesian series. For your requirement used the Line series to represent the data and to represents that shape used the data marker.   
  
Used the primary axis as Timespan axis as per your request and to customize its Y axis view, used the numerical axis, based on that LabelCreated event, update its customizable view using LabelTemplate  
  
..  
<syncfusion:SfChart.PrimaryAxis>
   <syncfusion:TimeSpanAxis PlotOffset="20" LabelFormat="c"/>
</syncfusion:SfChart.PrimaryAxis>  
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis x:Name="yAxis"
               LabelTemplate="{StaticResource labelTemplate}"
               Minimum="0"
               EdgeLabelsDrawingMode="Hide"
               Maximum="90"
              Interval="10"
              TickLineSize="0"
              LabelCreated="NumericalAxis_LabelCreated">
</syncfusion:NumericalAxis>
</syncfusion:SfChart.SecondaryAxis>  
..  
    

 For more please refer  
  
Please check and let share us with whether our requirement has achieved or not. If not then, update your additional need.  
  
Regards, 
Yuvaraj. 


Marked as answer
RA ragavan November 24, 2020 04:57 PM UTC

Hi yuvaraj , 

Thanks for the update . Look and feel is fine , But I'm not understanding Data you binded , Data is slightly different . Please refer below image .



YP Yuvaraj Palanisamy Syncfusion Team November 25, 2020 01:51 PM UTC

Hi Ragavan,  
   
We have analysed your query and we have achieved your requirement “Single collection datapoint for SfChart” and we have elaborated the datapoint to the chart with proper use case. Please refer the following code snippet.  
   
Data = new ObservableCollection<Model>();  
Data.Add(new Model() { XValue = new TimeSpan(06, 01, 00), UserId = "User1", PC = "PC1"});  
Data.Add(new Model() { XValue = new TimeSpan(07, 01, 00), UserId = "User2", PC = "PC2"});  
Data.Add(new Model() { XValue = new TimeSpan(08, 01, 00), UserId = "User3", PC = "PC3"});  
Data.Add(new Model() { XValue = new TimeSpan(09, 01, 00), UserId = "User1", PC = "PC3"});  
   
Data1 = new ObservableCollection<Model>();  
int value = 0;  
foreach(var chartData in Data)  
{     
    if(!string.IsNullOrWhiteSpace(chartData.UserId))  
                {  
                    switch (chartData.UserId)  
                    {  
                        case "User1":  
                            value = 1;  
                            break;  
                        case "User2":  
                            value = 2;  
                            break;  
                        case "User3":  
                            value = 3;  
                            break;  
                    }  
   
                    Data1.Add(new Model() { XValue = chartData.XValue, Value = value });  
                }  
   
    if (!string.IsNullOrWhiteSpace(chartData.PC))  
                {  
                    switch (chartData.PC)  
                    {  
                        case "PC1":  
                            value = 4;  
                            break;  
                        case "PC2":  
                            value = 5;  
                            break;  
                        case "PC3":  
                            value = 6;  
                            break;  
                    }  
   
                    Data1.Add(new Model() { XValue = chartData.XValue, Value = value });  
                }  
}  
   
Also, we have attached the sample for your reference. Please find the sample from the below link.  
   
    
Output:  
 
 
 
Please let us know if you have any concern. 
 
Regards, 
Yuvaraj. 


RA ragavan December 1, 2020 10:12 AM UTC

Thanks , I can achieve my requirement using syncfusion chart control  

I'm facing a different issue, scroll viewer not added by default when we loaded a large amount of data.UI seems very clumsy 

Is possible to fix that issue?

My example data : https://1drv.ms/u/s!AkSesS-EZt-pgbYWChiANswF2giaMg?e=gea62Q

UI current look : https://1drv.ms/u/s!AkSesS-EZt-pgbYXvRlgcqUupLF9fA?e=9LOXu1


YP Yuvaraj Palanisamy Syncfusion Team December 3, 2020 01:40 AM UTC

Hi Ragavan, 

We have analyzed your query and we would like to let you know that the requirement has been achieved by using AutoScrolllingDelta support in DateTimeAxis. AutoScrollingDelta is used to ensure the specified range of data is visible in the chart. And by adding the ZoomPanBehavior to chart, you can scroll to the previous datapoints.  

<syncfusion:SfChart.PrimaryAxis> 
    <syncfusion:DateTimeAxis AutoScrollingMode="End"  
                             AutoScrollingDeltaType="Minutes" 
                             AutoScrollingDelta="20"  
                             LabelFormat="hh:mm:ss"  
                             PlotOffset="20" /> 
</syncfusion:SfChart.PrimaryAxis> 

<syncfusion:SfChart.Behaviors> 
    <syncfusion:ChartZoomPanBehavior EnablePanning="True"  
                                     ResetOnDoubleTap="False" 
                                     EnableMouseWheelZooming="False"  
                                     EnableDirectionalZooming="False" 
                                     EnablePinchZooming="False" 
                                     EnableSelectionZooming="False"/> 
</syncfusion:SfChart.Behaviors> 
 

Also, we have modified the sample based on your requirement, please find the sample from the below link. 

  
For more reference, please refer the below link 

Regards, 
Yuvaraj. 


RA ragavan December 10, 2020 10:51 AM UTC

Hi Yuvaraj , 

Thanks for the sample. But this kind of scroll not user-friendly. 

I check in syncfusion dashboard like Range Selecter like below. But I'm getting a lot of .NET exceptions and erros while I try to integrate. Could you please integrate it into my sample?

I want to do a selection-based timespan, Noy by date. 


Sample: https://1drv.ms/u/s!AkSesS-EZt-pgbYWChiANswF2giaMg?e=gea62Q



YP Yuvaraj Palanisamy Syncfusion Team December 11, 2020 02:02 PM UTC

Hi Ragavan,  
    
We have analyzed your query and currently, SfDateTimerangeNavigator supports DateTime only and not support for TimeSpan.  
   
We are trying to achieve this by converting DateTimeRangeNavigator ViewRange Start Datetime to TimeSpan in RangeNavigator ValueChaged event for the setting of chart primary axis Minimum & Maximum to timespan.   
  
But in this case, the below consideration, gets failed due to having the type of chart axis as TimeSpan.  
  
Consider I am having the VisibleRangeStart value as Sep 14, 2 PM but my VisibleRangeEnd is on Sep 15, 3 PM then, it gets the Time alone not considering the date. So, it shows the range between Sep 14, 2 PM-3 PM.  
   
private void RangeNavigator_ValueChanged(object sender, System.EventArgs e)
{
             (chart.PrimaryAxis as TimeSpanAxis).Minimum = Convert.ToDateTime((sender as SfDateTimeRangeNavigator).ViewRangeStart).TimeOfDay;  

            (chart.PrimaryAxis as TimeSpanAxis).Maximum = Convert.ToDateTime((sender as SfDateTimeRangeNavigator).ViewRangeEnd).TimeOfDay;
}  
   
  
Hence, we have prepared a sample with DateTime axis instead of TimeSpan and obtain the same as you required. Please find the sample from the below link.  
   
  
Please check the sample and let us know your concern.  
  
We hope you can understand the difficulties faced with TimeSpan and could you please share the reason for using TimeSpan , is that having any specific use case.  
 
Regards, 
Yuvaraj. 


Loader.
Up arrow icon