Line Series Chart not displaying all data source points

[Diego]

I am creating RadHTMLChart programmatically to generate a single line chart with date on the x-axis and integers on the Y axis.. Everything seems to be working correctly but when I look closer to the data points the graph does not seem to be drawing every singles data point from the source. I am attaching an screenshot of the generated chart . I know that between the firs tool tip ("58") and the second tool tip ("31) . I have some data points that fluctuate to 59 then back to 58 and then 59 again but I do not see this reflected on my graph. Does HtmlChart takes an avarage to draw the graph or how does it work? Please any help would be appreciate it.

 The data source of the graph is obtained of a filtered CSV file.

Here is my code:

RadHtmlChart PowerChart = new RadHtmlChart();
            PowerChart.ID = "PowerChart";
            PowerChart.Width = Unit.Pixel(1200);
            PowerChart.Height = Unit.Pixel(500);
            PowerChart.Transitions = true;
            PowerChart.Skin = "Silk";
            PowerChart.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.White;
            PowerChart.ChartTitle.Appearance.Align = Telerik.Web.UI.HtmlChart.ChartTitleAlign.Center;
            PowerChart.ChartTitle.Appearance.BackgroundColor = System.Drawing.Color.Transparent;
            PowerChart.ChartTitle.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartTitlePosition.Top;
            LineSeries PowerChartLineSeries = new LineSeries();
            //PowerChartLineSeries.DataFieldY = "BatteryCapacity"; // ??? mayb non global
            PowerChart.PlotArea.XAxis.DataLabelsField = "DateandTime";
            PowerChart.PlotArea.XAxis.Type = Telerik.Web.UI.HtmlChart.AxisType.Date;
            PowerChart.PlotArea.XAxis.TitleAppearance.Text = "Date";
            PowerChart.PlotArea.XAxis.MajorGridLines.Color = System.Drawing.ColorTranslator.FromHtml("#EFEFEF");
            PowerChart.PlotArea.XAxis.MajorGridLines.Width = 1;
            PowerChart.PlotArea.XAxis.MinorGridLines.Color = System.Drawing.ColorTranslator.FromHtml("#F7F7F7");
            PowerChart.PlotArea.XAxis.MinorGridLines.Width = 1;
            PlotBand yAxisPlotBandDanger = new PlotBand();
            yAxisPlotBandDanger.Color = System.Drawing.ColorTranslator.FromHtml("#CC0000");
            yAxisPlotBandDanger.Alpha = 190;
            PlotBand yAxisPlotBandDanger2 = new PlotBand();
            yAxisPlotBandDanger2.Color = System.Drawing.ColorTranslator.FromHtml("#CC0000");
            yAxisPlotBandDanger2.Alpha = 190;
            PlotBand yAxisPlotBandWarning = new PlotBand();
            yAxisPlotBandWarning.Color = System.Drawing.Color.Yellow;
            yAxisPlotBandWarning.Alpha = 190;
            PlotBand yAxisPlotBandWarning2 = new PlotBand();
            yAxisPlotBandWarning2.Color = System.Drawing.Color.Yellow;
            yAxisPlotBandWarning2.Alpha = 190;
PowerChart.ChartTitle.Text = "Batttery Capacity in the last month";
                PowerChart.PlotArea.XAxis.BaseUnit = Telerik.Web.UI.HtmlChart.DateTimeBaseUnit.Days;
                PowerChart.PlotArea.YAxis.Step = 10;
                PowerChart.PlotArea.YAxis.MinValue = 0;
                PowerChart.PlotArea.YAxis.MaxValue = 120;
                yAxisPlotBandDanger.From = 0;
                yAxisPlotBandDanger.To = 5;
                yAxisPlotBandWarning.From = 5;
                yAxisPlotBandWarning.To = 10;
                PowerChart.PlotArea.YAxis.TitleAppearance.Text = "Battery Capacity";
                PowerChart.PlotArea.YAxis.LabelsAppearance.DataFormatString = "{0}%";
                PowerChart.PlotArea.YAxis.PlotBands.Add(yAxisPlotBandDanger);
                PowerChart.PlotArea.YAxis.PlotBands.Add(yAxisPlotBandWarning);
                PowerChartLineSeries.DataFieldY = "BatteryCapacity";
                PowerChart.PlotArea.Series.Add(PowerChartLineSeries);
                HtmlChartHolder.Controls.Add(PowerChart);
                PowerChart.DataSource = GetDataTableToGraph(4, "BatteryCapacity");
                PowerChart.DataBind();

public DataTable GetDataTableToGraph(int option, string powerVariable)
        {

            DateTime olddate;
            DataTable sourceTable = new DataTable();
            sourceTable.Columns.AddRange(new DataColumn[] {
                new DataColumn("DateandTime", typeof(DateTime)),
                new DataColumn("BatteryCapacity", typeof(int)),
                new DataColumn("BatteryChargeState", typeof(string)),
                new DataColumn("BatteryStatus", typeof(string)),
                new DataColumn("BatteryVoltage", typeof(double)),
                new DataColumn("Temperature", typeof(double)),
                new DataColumn("InputVoltage", typeof(double)),
                new DataColumn("InputFrequency", typeof(double)),
                new DataColumn("OutputCurrent", typeof(double)),
                new DataColumn("OutputLoad", typeof(int)),
                new DataColumn("OutputSource", typeof(string)),
                new DataColumn("OutputVoltage", typeof(double)),
                new DataColumn("LRTLB", typeof(string))
                });
            try
            {
                string directory = ReadPowerDisplayRegistry("Dir") + "Service\\PWRDATA.csv";
                string[] fileContent = File.ReadAllLines(directory);
                for (int i = 2; i < fileContent.Count(); i++)
                {
                    string[] rowData = fileContent[i].Split(',');
                    sourceTable.Rows.Add(rowData);
                }

                string[] selectedColumns = new[] { "DateandTime", powerVariable };
                DataTable newDt = new DataView(sourceTable).ToTable(false, selectedColumns);


                if (option == 0)
                {
                    olddate = DateTime.Now.AddMinutes(-30);
                }
                else if (option == 1)
                {
                    olddate = DateTime.Now.AddMinutes(-60);
                }
                else if (option == 2)
                {
                    olddate = DateTime.Now.AddDays(-1);
                }
                else if (option == 3)
                {
                    olddate = DateTime.Now.AddDays(-7);
                }
                else
                {
                    olddate = DateTime.Now.AddMonths(-1);
                }

                newDt.DefaultView.RowFilter = String.Format(CultureInfo.InvariantCulture.DateTimeFormat,
                    "[DateandTime] >#{0}#", olddate);
                //newDt.DefaultView.RowFilter = string.Format

                return newDt;
            }

            catch
            {
                return null;
            }

        }

[Danail Vasilev]

Hi Diego,

This behavior is expected - the date time data is aggregated based on a particular unit (e.g., a week, month, year, etc.). You can try to hardcode the base unit to a lower one but thus the values may look cluttered. What I can suggest is that you try scatter series or the data navigation functionality.

Regards,
Danail Vasilev
Telerik

[Diego]

Danail,

 Thanks for your response, I tried changing it to a scatter series as you mentioned and I get the same results. Also when I tried doing setting the BaseUnit to Auto "PowerChart.PlotArea.XAxis.BaseUnit = Telerik.Web.UI.HtmlChart.DateTimeBaseUnit.Auto;" The page becomes unresponsive and never load the graph even though I am trying to retrieve data for the last month which in this case were only 7 data poin. The only way the show the graph somehow correctly is if I set the DateTimeBaseUnit to Days. And I get the attached graph as you can tell missing some data points. I do not know how the graph can't draw all the data points. I think this is a critical feature for the software I am developing I need to see every single change in the graph.

1/7/2016 10:12:52  PM,14
1/7/2016 10:22:52 PM,14
1/7/2016 10:25:01 PM,14
1/7/2016 10:32:52 PM,16
1/28/2016 11:50:52 AM,16
1/28/2016 11:52:52 AM,10
1/28/2016 11:53:52 AM,18

[Diego]

Danail,

Sorry here is the graph that I obtained when changing to Scatter Series. I do not know why the graph is showing this way.

Thank you

[Danail Vasilev]

Hi Diego,

There are only two values shown because the detected baseunit is days. If you set it, however, to minutes, more data will be displayed:

ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
    <PlotArea>
        <Series>
            <telerik:ScatterLineSeries Name="series 1" DataFieldY="SellQuantity" DataFieldX="SellDate">
                <LabelsAppearance DataFormatString="d"></LabelsAppearance>
            </telerik:ScatterLineSeries>
        </Series>
        <XAxis BaseUnit="Minutes"></XAxis>
    </PlotArea>
</telerik:RadHtmlChart>

C#:

protected DataTable GetData()
{
    DataTable dt = new DataTable();

    dt.Columns.Add("ID", typeof(int));
    dt.Columns.Add("SellDate", typeof(DateTime));
    dt.Columns.Add("SellQuantity", typeof(int));

    dt.Rows.Add(1, DateTime.Parse("1/07/2016 10:12:52 PM"), 14);
    dt.Rows.Add(2, DateTime.Parse("1/07/2016 10:22:52 PM"), 14);
    dt.Rows.Add(3, DateTime.Parse("1/07/2016 10:25:01 PM"), 14);
    dt.Rows.Add(4, DateTime.Parse("1/07/2016 10:32:52 PM"), 16);
    dt.Rows.Add(5, DateTime.Parse("1/28/2016 11:50:52 AM"), 16);
    dt.Rows.Add(6, DateTime.Parse("1/28/2016 11:52:52 AM"), 10);
    dt.Rows.Add(7, DateTime.Parse("1/28/2016 11:53:52 AM"), 18);

    return dt;
}
protected void Page_Load(object sender, EventArgs e)
{
    RadHtmlChart1.DataSource = GetData();
    RadHtmlChart1.DataBind();
}

You may also find useful the pan and zoom and data navigation functionalities.

Regards,
Danail Vasilev
Telerik

[Wayne]

I am asking the same question. It MUST show what the true data is on any given point, not the Max point value that happen between chart points. I think Telerik has missed a very important thing here. We want to reflected the line and if big changes between points it needs to show this not smoth things out with Max value points.Can you make this happen? That is turn of Max and show the true value at a chart point and show the line and what it is doing between points.

[Marin Bratanov]

Hi Wayne,

I have just answered your support ticket on this question and the gist of the answer is that you should use a category axis and convert the dates to strings, so you can have a 1:1 strictly defined relationship between a x-axis item and a series data point. The date axis does aggregation so there is no such hard mapping.

Here follow some more detailed explanations in case it helps someone else with a similar question.

---

Here are some more details and examples on the way a date axis works:

• first and foremost, to get a data point, there must be data for the said interval. For example, the 13th of July 2018.
• if there is data for the 12th and for the 14th, but no data fro the 13th, and the x-axis scale is at the level of days, there will be no data point for the 13th, and the line will go from the point for the 12th to the point for the 14th. The chart cannot know what to do with a place it has no data for. If you want to show such trend lines, perhaps you should shape the data to include data points for those desired moments.
• if there is more than one value for the given rage (e.g., there are two data points for the 13th), these values must be aggregated in some manner because only one data point can be rendered per range. This aggregation choice is up to you - for example, you can use "max" or "min". Or, you can create your own function that will provide the logic you need if neither of the built-in options works out for you.
• this is applicable for any range for the x-axis, regardless of whether it is days, weeks, months, years, hours, seconds. In this manner the chart achieves behavior similar to a regular category axis where one data point in a series is mapped to one label (segment) in the x-axis. The difference here is that the user can change the scale of the x-axis and thus the number of items from the data source that fit in that range. This is why aggregation is needed - when there are several data points within one category, the chart cannot know what the value is, because there are several values.

On the flip side, if you convert all the dates to a string and feed them to the chart as categories, there will be no aggregation, because the x-axis scale will never change, it will always be the same distance from one data point to the next, regardless of the actual time that has elapsed between them - 1 second is going to be the same as 1 year, for example.

I hope this explains the situation and helps you make a more informed decision.

---

Regards,
Marin Bratanov
Progress Telerik