How to fill null values with zero?
Hello
I have the example below and I use DateTimeAxis and I would like for the dates where the values do not exist to be filled with the value zero. It's possible?
Thanks
<ejs-chart id="seriesDiaLinha"
locale="pt"
axisLabelRender="labelRender"
textRender="textRender"
height="80%"
tooltipRender="tooltipRender"
title="PERDA DIÁRIA - kg">
<e-chart-margin bottom="20" top="20" left="40" right="40"></e-chart-margin>
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="true"></e-chart-legendsettings>
<e-chart-primaryxaxis valueType="DateTime"
intervalType="Days"
rangePadding="Auto"
edgeLabelPlacement="Hide"
labelFormat="dd/MM/yy">
</e-chart-primaryxaxis>
<e-series-collection>
@foreach (var item in ViewBag.seriesDiaLinha)
{
<e-series dataSource="@item.Data"
xName="x"
yName="y"
name="@item.texto"
type=StackingColumn>
<e-series-marker visible="true">
<e-series-datalabel visible="true" position="Outer">
<e-font fontWeight="600"
size="10"
color="#000000"></e-font>
</e-series-datalabel>
</e-series-marker>
<e-series-border width="4"></e-series-border>
<e-series-emptypointsettings fill="None" mode="@Syncfusion.EJ2.Charts.EmptyPointMode.Zero"></e-series-emptypointsettings>
</e-series>
}
</e-series-collection>
</ejs-chart>
Hi Roberto,
Greetings from Syncfusion.
We suggest you to use axisLabelRender event , where we can render only xvalue in axislabel as per your requirement.
We have created sample for the same for your reference.
|
function axisLabelRender(args) { if (args.axis.name === 'primaryXAxis') {
if ( args.value === Number(args.axis.series[0].xData)) { args.value = false; } else { args.value = 0; } } } |
Kindly revert us if you have any concerns.
Regards,
Nishanthi
Hi
I tested your example and added a data with day 7 and the chart did not show days 08 and 09 with zero values,
Days 8 and 9 were hidden, I would like it to be shown with a zero value for days where I have no data.
Hi Roberto,
We suggest you to set intervalType as ‘Days’ and interval as 1 to meet your requirement.
We have attached sample for your reference.
Kindly revert us if you have any concerns.
Regards,
Nishanthi
Attachment: axis_Label_sample_bdb3d8d9.zip
hello.
This result is not the same as expected when I fill in the data for days 08 and 09 with zero values. I don't have access to the data to manipulate it to insert the zero values for the non-existent days. I have imported data and this manipulation will be complex. I believed there was a way to pad zero values for non-existent dates because it's a timeline
public IActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { Period = new DateTime(2023, 05, 10), Viet_Growth = 5.2},
new LineChartData { Period = new DateTime(2023, 05, 9), Viet_Growth = 0},
new LineChartData { Period = new DateTime(2023, 05, 8), Viet_Growth = 0},
new LineChartData { Period = new DateTime(2023, 05, 7), Viet_Growth = 2.2},
};
ViewBag.ChartData = chartData;
return View();
}
Hi Roberto,
We can add consecutive dates from the start date to the end date with a y-value of 0 in load event to meet your requirement.
We have created a sample for the same for your reference.
|
function load(args) { var chartData = args.chart.series[0].dataSource; var consecutiveData = []; var minDate = new Date(args.chart.series[0].dataSource[0].Period); var maxDate = new Date(args.chart.series[0].dataSource[args.chart.series[0].dataSource.length - 1].Period); for (var date = new Date(maxDate); date.getTime() <= minDate.getTime(); date.setDate(date.getDate() + 1)) { var data = chartData.find(function (d) { return new Date(d.Period).toDateString() === date.toDateString(); }); if (data != null) { consecutiveData.push(data); } else { consecutiveData.push({ Period: new Date(date), Viet_Growth: 0.0 }); } } args.chart.series[0].dataSource = consecutiveData; } |
Kindly revert us if you have any concerns
Regards,
Nishanthi
Attachment: axis_Label_sample_a56068f4.zip
Hello,
I tested your example and it worked as expected for a list of several days, however when I put only ONE day, the chart shows on the horizontal axis several days and a very wide column. I understand that for just one day that date should appear on the horizontal axis. How to fix it?
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { Period = new DateTime(2023, 05, 15), Viet_Growth = 5.2 },
};
this would be the expected chart template. I switched to the DateTimeCategory type, but that type has its drawbacks.
It´s working thanks
I performed other tests and verified that when there is no data, dates with the year 1970 are shown on the X axis. I believe that it would be more elegant to show a message in the center of the chart stating that there is no data than to show years of 1970. But I can do this circumvent in a programming way, but here's the suggestion.
Thank you for your attention.
Hi Roberto,
Thank you for your suggestion. We understand your concern about displaying the year 1970 when there is no data available. One way to address this is by checking the dataSource before rendering the chart. If there is no data, we can display a message in center indicating that no data is available.
Based on your suggestion, we have created a sample implementation to handle the scenario where there is no data available for the chart. Instead of displaying the year 1970 on the X-axis, we now show a message in the center indicating that there is no data.
Code-Snippet:
|
@{ bool hasData = ViewBag.ChartData != null && (ViewBag.ChartData)?.GetEnumerator().MoveNext() == true; }
@if (hasData) { <ejs-chart> </ejs-chart> } else { <div id="container" style="display: flex; align-items: center; justify-content: center; height: 400px;"> <p style="font-size: 18px; color: black;">No chart data available.</p> </div> } |
Screenshot:
Kindly revert us if you have any concerns.
Regards,
Nishanthi
Attachment: Chart_Data_Sample_3128d846.zip
