Single array of double as data

[GMas]

I have a Model with an array[100] of double and I would like to use this directly as the data for the chart. The index value should be the X and the value at that index should be the Y on the chart.

Currently I have to convert the array to a list of points (in my ViewModel) where I store the index value (0-99) as the X of the point and the value of that array index as the Y value of the point.

My xaml looks like this :

    <UserControl.DataContext>
            <local:ViewModel/>
        </UserControl.DataContext>
        <Grid>
            <syncfusion:SfChart>
                <chart:SfChart.PrimaryAxis>
                    <chart:NumericalAxis/>
                </chart:SfChart.PrimaryAxis>
                <chart:SfChart.SecondaryAxis>
                    <chart:NumericalAxis/>
                </chart:SfChart.SecondaryAxis>
                <chart:LineSeries ItemsSource="{Binding Data}" XBindingPath="X" YBindingPath="Y"/>
            </syncfusion:SfChart>
        </Grid>
    </UserControl>

I cannot imagine that this is the best way to get the result ...

[Yuvaraj Palanisamy]

Hi Geert, 

  

Greetings from Syncfusion. 

  

We have analyzed your query and we would like to know that we need to give X and Y binding value for rendering the chart series. Hence, we didn’t directly use a single array of double in model for chart. So we can convert and use the list of array points in ViewModel to bind in the chart. 

  

Please find the below KB document for binding the array property in SfChart. 

https://www.syncfusion.com/kb/4923/how-to-bind-the-array-property-in-sfchart  

 

Please let us know if you have any other queries. 

  

Regards, 

Yuvaraj. 

[Yin]

I also encountered the same question. This is a very common application scenario. However, chart cannot directly support arrays, which makes me feel very stressed and regretful.

[Saiyath Ali Fathima Bee Moidhin Abdhul Kathar]

Hi Yin,

We would like to inform you that in order to visualize the chart with XBindingPath and YBindingPath, we need two points. Therefore, we suggest declaring a model class to store these values. Then, you can set the values for the XBindingPath and YBindingPath properties in an array using a custom array. Please note that we cannot assign the array value directly in the chart as its behavior.

For your reference, we have provided the code snippet below:

 public class Model

 {

     public string Name { get; set; }

     public double Value { get; set; }

 }

 

 public class ViewModel

 {

     public Model[] Array { get; set; }

 

     public ViewModel()

     {

         Array = new Model[]

     {

         new Model { Name = "Item 1", Value = 10.5 },

         new Model { Name = "Item 2", Value = 20.3 },

         new Model { Name = "Item 3", Value = 15.7 },

         new Model { Name = "Item 4", Value = 8.2 },

         new Model { Name = "Item 5", Value = 12.9 }

     };

     }

 }

 <chart:ColumnSeries ItemsSource="{Binding Array}" XBindingPath="Name" YBindingPath="Value">

   </chart:ColumnSeries>

Additionally, we would like to let you know that we can also use a dictionary instead of an array. Please refer following code.

var dictionary = arr.ToDictionary(x => Array.IndexOf(arr, x));

Regards,

Saiyath Ali Fathima M