Line Series Chart not displaying all data source points

5 posts, 0 answers
  1. Diego
    Diego avatar
    6 posts
    Member since:
    Nov 2014

    Posted 28 Jan Link to this post

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

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 02 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Diego
    Diego avatar
    6 posts
    Member since:
    Nov 2014

    Posted 05 Feb in reply to Danail Vasilev Link to this post

    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

  5. Diego
    Diego avatar
    6 posts
    Member since:
    Nov 2014

    Posted 05 Feb Link to this post

    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

  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 09 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017