Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
149930 | Dec 15,2019 07:38 AM UTC | Feb 4,2020 11:30 AM UTC | Blazor | 7 |
![]() |
Tags: Charts |
I want to generate an interactive chart, which will dynamical change base on a mutilselector of category
@code{
public class Sales{
public string StoreID;
public double FoodSales;
public double DrinkSales;
public double OtherSales;
public DateTime Month;
}
}
The mutliselector will provide a list of StoreID, and the page will render a stacked area chart based on the store list.
The thing is, if I use a local datasource, the query works fine,
<ChartSeries DataSource=@salesList Query=@QueryData Name="Food" XName="Month" YName="Food" Type="ChartSeriesType.StackingArea">
@code{
public string QueryData = "new ej.data.Query().where('StoreID','equal','0001')";
}
but if I use a client side datamanager, it won't work.
<EjsDataManager Url="http://localhost:3000/saleList" Adaptor="Adaptors.WebApiAdaptor" Offline="true" ></EjsDataManager>
<ChartSeries Query=@QueryData Name="Food" XName="Month" YName="Food" Type="ChartSeriesType.StackingArea">
My understanding is that the chart can only take the response with format of { "result":[{}{}...{}],"count":6} and bind it, which might prevent it from execute a client side query, while the grid can take response of [{}{}{}...{}] format and do some local fitlering.
My question is, is there a way to work around or would it be a new feature you guys might consider?
<EjsChart id="container1">
<EjsDataManager Url="https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/" CrossDomain="true"></EjsDataManager>
<ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries Type="ChartSeriesType.Column" xName="Assignee" yName="Estimate" Query=@QueryData>
</ChartSeries>
</ChartSeriesCollection>
</EjsChart>
@code{
public string QueryData = "new ej.data.Query().take(5).where('Estimate', 'lessThan', 3, false)";
} |
<EjsChart id="container1">
<EjsDataManager Url="https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/" Offline="true"></EjsDataManager>
<ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries Type="ChartSeriesType.Column" xName="Assignee" yName="Estimate" Query=@QueryData>
</ChartSeries>
</ChartSeriesCollection>
</EjsChart>
@code{
public string QueryData = "new ej.data.Query().take(5).where('Estimate', 'lessThan', 3, false)";
} |
<EjsDataManager @ref="DataManager" Url="https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/"></EjsDataManager>
<EjsChart DataSource="DataSource" id="container1">
<ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries Type="ChartSeriesType.Column" XName="Assignee" YName="Estimate" Query="@QueryData">
</ChartSeries>
</ChartSeriesCollection>
</EjsChart>
<EjsButton OnClick="@ChangeQuery">Change Query</EjsButton>
@code{
EjsDataManager DataManager;
public IEnumerable<Order> DataSource { get; set; } = new List<Order>();
public ChartSeries DefaultChartSeries = new ChartSeries();
public string QueryData = "new ej.data.Query().take(5).where('Estimate', 'lessThan', 1.5, false)";
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{ //provide generic type TValue
object data = await DataManager.ExecuteQuery<Order>(new Query());
DataSource = (data as IEnumerable).Cast<Order>().ToList();
StateHasChanged();
}
}
public class Order
{
public int? Id { get; set; }
. . . . .
}
} |
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.
This page will automatically be redirected to the sign-in page in 10 seconds.