Empty points not plotting

4 Replies
3 Participants

Created by
MS Matthew Shonk

Platform
ASP.NET MVC - EJ 2

Platform
ASP.NET MVC - EJ 2

Control
Chart

Created On
Oct 31, 2019 06:59 PM UTC

Last Activity On
Nov 4, 2019 05:26 AM UTC

Want to subscribe?
SIGN IN

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("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; }

}

4 Replies

MS Matthew Shonk October 31, 2019 07:02 PM UTC

I also tried :

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

on the series.

SM Srihari Muthukaruppan Syncfusion Team November 1, 2019 05:13 PM UTC

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: