Hi there!
I need to create a chart where i can add / delete data and I stumbled upon a weird reaction, my chart does not remove the datasets from last -> first however it works the other way around. I will be posting my code below and a short recording. I know i used Async task for onInitialized and AddData function althought i do not need them, however i wanted to recreate the functions i would be using in a real environment. https://giphy.com/gifs/chnJNj2QSD1R47aUp9
I guess my question would be, if removing datasets if any order a user would want cannot work, is there a way i can force the chart to rerender at any point?
Thanks in advance!
@using System.Globalization
<style>
rect.btn {
padding: 15px 25px;
text-align: center;
cursor: pointer;
outline: none;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
stroke: #fff;
fill: #fff;
fill-opacity: 0;
stroke-opacity: 0;
}
</style>
<div class="row">
<div class="col-md-6 col-sm-12 p-4">
<label>Smooth <RadzenCheckBox @bind-Value="@smooth" Name="smooth"></RadzenCheckBox></label>
@if (datasets != null)
{
<RadzenChart>
@foreach (DataItemModel data in datasets)
{
<RadzenLineSeries Smooth="@smooth" Data="@data.DataSet" CategoryProperty="Date" Title="@data.Title" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenMarkers MarkerType="MarkerType.Circle" />
</RadzenLineSeries>
<RadzenCategoryAxis Padding="20" FormatString="{0:MMM}" />
<RadzenValueAxis Formatter="@FormatAsUSD">
<RadzenGridLines Visible="true" />
<RadzenAxisTitle Text="Revenue in USD" />
</RadzenValueAxis>
}
</RadzenChart>
<div class="chart_dataset_list">
<div>
<ul>
@foreach (DataItemModel data in datasets)
{
<li>
<span id="@data.DataUId">
@data.Title
<svg class="" width="24" height="24" viewBox="-3 -4 20 20" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M8.414 7l5.293-5.293c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-5.293 5.293-5.293-5.293c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l5.293 5.293-5.293 5.293c-.391.391-.391 1.023 0 1.414.195.195.451.293.707.293.256 0 .512-.098.707-.293l5.293-5.293 5.293 5.293c.195.195.451.293.707.293.256 0 .512-.098.707-.293.391-.391.391-1.023 0-1.414l-5.293-5.293"></path>
<rect class="btn" x="0" y="0" width="10" height="10" @onclick='(() => RemoveDataset(data.DataUId))' />
</g>
</svg>
</span>
</li>
}
</ul>
</div>
</div>
}
</div>
</div>
<RadzenButton Click="@AddDataSet" Text="Add" Style="margin-bottom: 20px; width: 90px; margin-left: 10px" />
@code {
bool smooth = false;
private List<DataItemModel> datasets = new List<DataItemModel>();
class DataItem
{
public DateTime Date { get; set; }
public double Revenue { get; set; }
}
class DataItemModel
{
public string Title { get; set; }
public int DataUId { get; set; }
public DataItem[] DataSet { get; set; }
}
string FormatAsUSD(object value)
{
return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
}
DataItem[] revenue2019 = new DataItem[] {
new DataItem
{
Date = DateTime.Parse("2019-01-01"),
Revenue = 234000
},
new DataItem
{
Date = DateTime.Parse("2019-02-01"),
Revenue = 269000
},
new DataItem
{
Date = DateTime.Parse("2019-03-01"),
Revenue = 233000
},
new DataItem
{
Date = DateTime.Parse("2019-04-01"),
Revenue = 244000
},
new DataItem
{
Date = DateTime.Parse("2019-05-01"),
Revenue = 214000
},
new DataItem
{
Date = DateTime.Parse("2019-06-01"),
Revenue = 453000
},
new DataItem
{
Date = DateTime.Parse("2019-07-01"),
Revenue = 274000
},
new DataItem
{
Date = DateTime.Parse("2019-08-01"),
Revenue = 284000
},
new DataItem
{
Date = DateTime.Parse("2019-09-01"),
Revenue = 273000
},
new DataItem
{
Date = DateTime.Parse("2019-10-01"),
Revenue = 282000
},
new DataItem
{
Date = DateTime.Parse("2019-11-01"),
Revenue = 289000
},
new DataItem
{
Date = DateTime.Parse("2019-12-01"),
Revenue = 294000
}
};
DataItem[] revenue2020 = new DataItem[] {
new DataItem
{
Date = DateTime.Parse("2019-01-01"),
Revenue = 334000
},
new DataItem
{
Date = DateTime.Parse("2019-02-01"),
Revenue = 369000
},
new DataItem
{
Date = DateTime.Parse("2019-03-01"),
Revenue = 333000
},
new DataItem
{
Date = DateTime.Parse("2019-04-01"),
Revenue = 344000
},
new DataItem
{
Date = DateTime.Parse("2019-05-01"),
Revenue = 314000
},
new DataItem
{
Date = DateTime.Parse("2019-06-01"),
Revenue = 353000
},
new DataItem
{
Date = DateTime.Parse("2019-07-01"),
Revenue = 374000
},
new DataItem
{
Date = DateTime.Parse("2019-08-01"),
Revenue = 384000
},
new DataItem
{
Date = DateTime.Parse("2019-09-01"),
Revenue = 373000
},
new DataItem
{
Date = DateTime.Parse("2019-10-01"),
Revenue = 382000
},
new DataItem
{
Date = DateTime.Parse("2019-11-01"),
Revenue = 389000
},
new DataItem
{
Date = DateTime.Parse("2019-12-01"),
Revenue = 394000
}
};
DataItem[] revenue2021 = new DataItem[] {
new DataItem
{
Date = DateTime.Parse("2019-01-01"),
Revenue = 334000
},
new DataItem
{
Date = DateTime.Parse("2019-02-01"),
Revenue = 369000
},
new DataItem
{
Date = DateTime.Parse("2019-03-01"),
Revenue = 333000
},
new DataItem
{
Date = DateTime.Parse("2019-04-01"),
Revenue = 144000
},
new DataItem
{
Date = DateTime.Parse("2019-05-01"),
Revenue = 414000
},
new DataItem
{
Date = DateTime.Parse("2019-06-01"),
Revenue = 353000
},
new DataItem
{
Date = DateTime.Parse("2019-07-01"),
Revenue = 374000
},
new DataItem
{
Date = DateTime.Parse("2019-08-01"),
Revenue = 284000
},
new DataItem
{
Date = DateTime.Parse("2019-09-01"),
Revenue = 373000
},
new DataItem
{
Date = DateTime.Parse("2019-10-01"),
Revenue = 382000
},
new DataItem
{
Date = DateTime.Parse("2019-11-01"),
Revenue = 289000
},
new DataItem
{
Date = DateTime.Parse("2019-12-01"),
Revenue = 394000
}
};
protected override async Task OnInitializedAsync()
{
datasets.Add(new DataItemModel { Title = "2019", DataUId = 1, DataSet = revenue2019});
datasets.Add(new DataItemModel { Title = "2020", DataUId = 2, DataSet = revenue2020});
}
public async Task AddDataSet()
{
datasets.Add(new DataItemModel { Title = "2021", DataUId = 3, DataSet = revenue2021});
}
private void RemoveDataset(int dataID)
{
datasets.RemoveAll(x => x.DataUId == dataID);
}
}