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. Image for the cookie policy date

Blazor Charts using Complex / Nested Lists

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},

    };





3 Replies

KM Kesavan Muthusamy Syncfusion Team September 4, 2019 04:19 AM

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 



SO Sorin September 5, 2019 04:13 AM

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


KM Kesavan Muthusamy Syncfusion Team September 6, 2019 01:47 AM

Hi Sorin, 

Welcome you always. 

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

Regards, 
Kesavan 


Loader.
Live Chat Icon For mobile
Up arrow icon