Blazor Charts using Complex / Nested Lists

[Sorin]

Hello,

I'm working with Blazor charts (package version 17.2.0.46-beta).

I've noticed that it seems Blazor charts cannot support a complex DataSouce which has parameters from nested lists.

I tried to plot the same data via two different methods.

(1) Primitive data type:  "Price" (double)

(2) Complex data type:  "ComplexPrice" which contains "value" (double) and "unit" (string)

Plotting with (1) works ok  ---->     XName="Price"

Plotting with (2) does NOT work --->    XName="ComplexPrice.value"

Is there any plan for supporting such complex parameters?

I noticed a similar question in the UWP forum: https://www.syncfusion.com/forums/124057/databinding-complex-itemssource

Thank you,

Sorin

PS. Here is my code:

<EjsChart Title="Scatter using Primitive List">

    <ChartSeriesCollection>

        <ChartSeries DataSource="@PrimitiveList" XName="Price" YName="Sqft" Type="ChartSeriesType.Scatter">

        </ChartSeries>

    </ChartSeriesCollection>

</EjsChart>

<EjsChart Title="Scatter using Complex List">

    <ChartSeriesCollection>

        <ChartSeries DataSource="@ComplexList" XName="ComplexPrice.value" YName="ComplexSqft" Type="ChartSeriesType.Scatter">

        </ChartSeries>

    </ChartSeriesCollection>

</EjsChart>

@code {

    /// <summary>

    /// Primitive List for testing the chart

    /// </summary>

    public class ScatterData

    {

        public double Price;

        public double Sqft;

    }

    public List<ScatterData> PrimitiveList = new List<ScatterData>

{

        new ScatterData { Price=115000, Sqft=1000},

        new ScatterData { Price=125000, Sqft=1200},

        new ScatterData { Price=135000, Sqft=1300},

    };

    /// <summary>

    /// Complex Nested List for tesing the chart

    /// </summary>

    public class ComplexPrice

    {

        public double value;

        public string units;

    }

    public class ComplexScatterData

    {

        public ComplexPrice complexprice;

        public double complexsqft;

    }

    public List<ComplexScatterData> ComplexList = new List<ComplexScatterData>

    {

        new ComplexScatterData { complexprice= new ComplexPrice{value=115000, units="USD" }, complexsqft=1000},

        new ComplexScatterData { complexprice= new ComplexPrice{value=125000, units="USD" }, complexsqft=1200},

        new ComplexScatterData { complexprice= new ComplexPrice{value=135000, units="USD" }, complexsqft=1300},

    };

[Kesavan Muthusamy]

Hi Sorin, 

Greetings from Syncfusion.  

We have analyzed your query and we have already provided support for complex field binding to the attribute.  

For this, you need to set enableComplexProperty attribute to true and you can set attributes with corresponding complex field names. Field names are case sensitive.  

Code snippet: 

<EjsChart Title="Scatter using Complex List"> 

    <ChartSeriesCollection> 

        <ChartSeries EnableComplexProperty="true" DataSource="@ComplexList" XName="complexprice.value" YName="complexsqft" Type="ChartSeriesType.Scatter"> 

        </ChartSeries> 

    </ChartSeriesCollection> 

</EjsChart> 

 

@code { 

public class ComplexPrice 

    { 

        public double value; 

        public string units; 

    } 

 

    public class ComplexScatterData 

    { 

        public ComplexPrice complexprice; 

        public double complexsqft; 

    } 

 

    public List<ComplexScatterData> ComplexList = new List<ComplexScatterData> 

{ 

        new ComplexScatterData { complexprice= new ComplexPrice{value=115000, units="USD" }, complexsqft=1000}, 

        new ComplexScatterData { complexprice= new ComplexPrice{value=125000, units="USD" }, complexsqft=1200}, 

        new ComplexScatterData { complexprice= new ComplexPrice{value=135000, units="USD" }, complexsqft=1300}, 

 

    }; 

} 

Sample link: ChartComplexData 

Please let us know if you have any concerns about this. 

Regards, 

Kesavan 

[Sorin]

Hi Kesavan, 

Thank you so much!

I appreciate your quick reply!

Using the EnableComplexProperty attribute (and fixing my casing mistake) I could succeed to get the output I was looking for.

Sorin

[Kesavan Muthusamy]

Hi Sorin, 

Welcome you always. 

We are always happy to assist you. Please contact us if you have any queries. 

Regards, 

Kesavan