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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Blazor Charts using Complex / Nested Lists

Thread ID:

Created:

Updated:

Platform:

Replies:

147158 Sep 3,2019 11:49 AM UTC Sep 6,2019 09:47 AM UTC Blazor 3
loading
Tags: Charts
Sorin
Asked On September 3, 2019 11:49 AM UTC

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 [Syncfusion]
Replied On September 4, 2019 12:19 PM UTC

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
Replied On September 5, 2019 12:13 PM UTC

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 [Syncfusion]
Replied On September 6, 2019 09:47 AM UTC

Hi Sorin, 

Welcome you always. 

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

Regards, 
Kesavan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon