Empty points not plotting

[Matthew Shonk]

I have reviewed the documentation and demos and still I am having difficulty getting empty points to be plotted.

I would like to see:

Or something similar in nature. Where the line is complete across the while grid despite the empty data points.

The html is:

@using Syncfusion.EJ2.Charts;

@model  List<UserParameters>

@{

    var data = Model.ToList();

    var min = data.Count == 0 ? DateTime.Now : data[0].DateRecorded;

    var max = data.Count == 0 ? DateTime.Now.AddDays(7) : data[data.Count - 1].DateRecorded;

    var xInterval = (max - min).TotalDays <= 7 ? 1 : (max - min).TotalDays / 7;

    string item = ViewBag.Series.ToString().Replace(" ", "");

    int interval = item.Contains("Low") ? 1 : item.Contains("Mid") ? 10 : 100;

    int maxY = item.Contains("Low") ? 16 : item.Contains("Mid") ? 200 : 2000;

    @Html.EJS().Chart(item).Title(item + "Chart").Tooltip(tt => tt.Enable(true)

       ).ChartArea(area => area.Border(br => br.Color("transparent"))

       ).DataSource(Model).Series(series =>

       {

           ChartEmptyPointSettings set = new ChartEmptyPointSettings();

           set.Mode = Syncfusion.EJ2.Charts.EmptyPointMode.Average;

           set.Fill = "border";

           switch (item)

           {

               case "LowRange":

                   series.Type(ChartSeriesType.Line).YName("Alkalinity").XName("DateRecorded").DataSource(data).Name("Alk").Width(2).Marker(mr => mr.Visible(true).Width(10).Height(10)).EmptyPointSettings(e => e.Mode(EmptyPointMode.Average)).Add();

                   series.Type(ChartSeriesType.Line).YName("pH").XName("DateRecorded").DataSource(data).Name("pH").Width(2).TooltipMappingName("pH").Marker(mr => mr.Visible(true).Width(10).Height(10)).EmptyPointSettings(e => e.Mode(EmptyPointMode.Average)).Add();

                   series.Type(ChartSeriesType.Line).YName("pH").XName("DateRecorded").DataSource(data).Name("pH").Width(2).TooltipMappingName("pH").Marker(mr => mr.Visible(true).Width(10).Height(10)).EmptyPointSettings(e => e.Mode(EmptyPointMode.Average)).Add();

                   series.Type(ChartSeriesType.Line).YName("Nitrite").XName("DateRecorded").DataSource(data).Name("No3").Width(2).Marker(mr => mr.Visible(true).Width(10).Height(10)).EmptyPointSettings(e => e.Mode(EmptyPointMode.Average)).Add();

                   series.Type(ChartSeriesType.Line).YName("Ammonia").XName("DateRecorded").DataSource(data).Name("Nh3").Width(2).Marker(mr => mr.Visible(true).Width(10).Height(10)).EmptyPointSettings(e => e.Mode(EmptyPointMode.Average)).Add();

                   series.Type(ChartSeriesType.Line).YName("Phosphate").XName("DateRecorded").DataSource(data).Name("Po4").Width(2).Marker(mr => mr.Visible(true).Width(10).Height(10)).EmptyPointSettings(e => e.Mode(EmptyPointMode.Average)).Add();

                   series.Type(ChartSeriesType.Line).YName("SpecificGravity").XName("DateRecorded").DataSource(data).Name("SG").Width(2).Marker(mr => mr.Visible(true).Width(10).Height(10)).EmptyPointSettings(e => e.Mode(EmptyPointMode.Average)).Add();

                   series.Type(ChartSeriesType.Line).YName("Iodine").XName("DateRecorded").DataSource(data).Name("I").Width(2).Marker(mr => mr.Visible(true).Width(10).Height(10)).EmptyPointSettings(e => e.Mode(EmptyPointMode.Average)).Add();

                   series.Type(ChartSeriesType.Line).YName("Iron").XName("DateRecorded").DataSource(data).Name("Fe").Width(2).Marker(mr => mr.Visible(true).Width(10).Height(10)).EmptyPointSettings(e => e.Mode(EmptyPointMode.Average)).Add();

                   break;

               case "MidRange":

                   series.Type(ChartSeriesType.Line).YName("Temp").XName("DateRecorded").Marker(mr => mr.Visible(true).Width(10).Height(10)).DataSource(data).Name("Temp").Width(2).Add();

                   series.Type(ChartSeriesType.Line).YName("Nitrate").XName("DateRecorded").Marker(mr => mr.Visible(true).Width(10).Height(10)).DataSource(data).Name("Nitrate").Width(2).Add();

                   series.Type(ChartSeriesType.Line).YName("Ammonium").XName("DateRecorded").Marker(mr => mr.Visible(true).Width(10).Height(10)).DataSource(data).Name("Ammonium").Width(2).Add();

                   series.Type(ChartSeriesType.Line).YName("Copper").XName("DateRecorded").Marker(mr => mr.Visible(true).Width(10).Height(10)).DataSource(data).Name("Copper").Width(2).Add();

                   break;

               case "HighRange":

                   series.Type(ChartSeriesType.Line).YName("Calcium").XName("DateRecorded").Marker(mr => mr.Visible(true).Width(10).Height(10)).DataSource(data).Name("Calcium").Width(2).Add();

                   series.Type(ChartSeriesType.Line).YName("Magnesium").XName("DateRecorded").Marker(mr => mr.Visible(true).Width(10).Height(10)).DataSource(data).Name("Magnesium").Width(2).Add();

                   series.Type(ChartSeriesType.Line).YName("Potassium").XName("DateRecorded").Marker(mr => mr.Visible(true).Width(10).Height(10)).DataSource(data).Name("Potassium").Width(2).Add();

                   break;

           }

       }).PrimaryXAxis(px => px.LabelIntersectAction(LabelIntersectAction.Rotate90).

               LabelFormat("M/d/y").

               MajorGridLines(mg => mg.Width(0)).EdgeLabelPlacement(EdgeLabelPlacement.Shift).

               ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).

               Minimum(min).

               Maximum(max).

               IntervalType(IntervalType.Days)

).PrimaryYAxis(py => py.LabelFormat("{value}:").

        MajorTickLines(mt => mt.Width(0)).MinorTickLines(mt => mt.Width(0)).LineStyle(ls => ls.Width(0)).

        Minimum(0).

        Maximum(maxY).

        Interval(interval)

 ).Render()

}

The model or class filling the datasource is:

 public class UserParameters

    {

        public System.DateTime DateRecorded { get; set; }

        public double? Alkalinity { get; set; }

        public double? Calcium { get; set; }

        public double? Magnesium { get; set; }

        public double? pH { get; set; }

        public double? Temp { get; set; }

        public double? Nitrate { get; set; }

        public double? Nitrite { get; set; }

        public double? Ammonia { get; set; }

        public double? Ammonium { get; set; }

        public double? Phosphate { get; set; }

        public double? SpecificGravity { get; set; }

        public double? Iodine { get; set; }

        public double? Iron { get; set; }

        public double? Potassium { get; set; }

        public double? Copper { get; set; }

    }

}

[Matthew Shonk]

I also tried :

.EmptyPointSettings(e => e.Mode(AccEmptyPointMode.Average)).Add();

on the series.

[Srihari Muthukaruppan]

Hi Matthew,  

  

Greetings from Syncfusion. 

  

We have validated the reported issue. From that we would like to let you know that, we can achieve your requirement by providing string value to mode directly as shown in below code snippet. Based on that we have prepared a sample for your reference. As of now EmptyPointSettings mode is not working properly. We consider this as a bug and have logged the bug report for this issue. And this fix will be available in our upcoming weekly patch release which is expected to rolled out on or before November 12th , 2019. Once it will be published, we will let you know. Please find the below sample and code snippet.  

  

Task: https://syncfusion.atlassian.net/browse/EJ2-33157 

  

Code Snippet: 

@Html.EJS().Chart("container").ChartArea(area => area.Border(br => br.Color("transparent"))).Series(series => 

              { series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue") 

                  .Marker(mr => mr.Visible(true).Width(10).Height(10)).YName("yValue") 

                  .EmptyPointSettings(e => e.Mode("Average").Fill("None")) 

                  .DataSource(ViewBag.dataSource).Name("Germany").Add(); 

              }).Render() 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EmptyPoints400237585.zip  

  

Screenshot: 

 

  

Let us know, if you have any concerns.  

  

Regards  

Srihari M 

[Matthew Shonk]

Thank you for the prompt response. I implemented the suggested changes and it is currently working.

[Sarasilmiya Shahul Hameed]

Hi Matthew, 

  

Most welcome. Please get back to us if you need further assistance. 

  

Regards, 

Sara