Hello,
I'm currently trying to create a line chart programmatically and was successfully able to do so. However I noticed that in certain cases, the smooth line type produces odd results. When the x-axis has a date scale and 2 points are too close to one another, depending on the y-axis values the line will sometimes curve backwards (see the black line in the smooth_line attachment). I'm using a cartesian coordinate system as recommended by your documentation. I've attached images of the chart using both straight and smooth line types. The data is the same, only the line type is different. We have not had this issue creating similar line charts in kendo jquery ui or kendo angular. We would like to use the smooth line type (instead of the straight) for our reporting charts. Is there way to prevent this issue from happening, or is there a different coordinate system that we can use to achieve the desired results? Please advise. Thanks!
10 Answers, 1 is accepted
Hi Ryan,
Thank you for providing the screenshots. Although, from the information provided I am unable to understand where the issue is coming from. My first instinct is the scale of the X-Axis but I am just guessing. In order to troubleshoot this more completely, can you provide the following information?
1. The report in question
2. Sample data producing the results.
Once I have the above information, I can provide a more thorough answer.
In the meantime, please let me know if you need any additional information. Thank you and I look forward to your reply.
Regards,
Eric R | Senior Technical Support Engineer
Progress Telerik
Rank 1
Hi Eric,
Unfortunately I'm not able to attach any files other than images into the forum.
Here's some sample code for a console app to programmatically generate a pdf with this line chart:
static void Main(string[] args)
{
//create line chart
var lineChart = new Graph();
lineChart.Size = new SizeU(Unit.Inch(8), Unit.Inch(3.75));
lineChart.Name = "Line Chart";
var data = new[] { new { Name = "Name", Date = new DateTime(2019, 1, 31), Value = 0m },
new { Name = "Name", Date = new DateTime(2019, 2, 1), Value = .005m },
new { Name = "Name", Date = new DateTime(2019, 3, 1), Value = -.008m },
new { Name = "Name", Date = new DateTime(2019, 4, 1), Value = .001m },
new { Name = "Name", Date = new DateTime(2019, 5, 1), Value = .0095m },
new { Name = "Name", Date = new DateTime(2019, 6, 1), Value = .0239m },
new { Name = "Name", Date = new DateTime(2019, 6, 2), Value = .0216m } };
lineChart.DataSource = data;
var dateCategoryGroup = new GraphGroup();
dateCategoryGroup.Name = "categoryGroup1";
dateCategoryGroup.Groupings.Add(new Grouping($"=Fields.Date"));
dateCategoryGroup.Sortings.Add(new Sorting($"=Fields.Date", SortDirection.Asc));
lineChart.CategoryGroups.Add(dateCategoryGroup);
var seriesGroup = new GraphGroup();
seriesGroup.Name = "SeriesGroup1";
seriesGroup.Groupings.Add(new Grouping($"=Fields.Name"));
lineChart.SeriesGroups.Add(seriesGroup);
var xAxis = new GraphAxis();
xAxis.Name = "XAxis";
xAxis.LabelFormat = "{0:M/d/yy}";
xAxis.LabelAngle = -45;
var xAxisScale = new DateTimeScale();
xAxisScale.BaseUnit = DateTimeScaleUnits.Days;
xAxisScale.LabelUnit = DateTimeScaleUnits.Months;
xAxisScale.MajorUnit = DateTimeScaleUnits.Months;
xAxisScale.Minimum = new DateTime(2019, 1, 1);
xAxisScale.Maximum = new DateTime(2019, 6, 30);
xAxis.Scale = xAxisScale;
var yAxis = new GraphAxis();
yAxis.Name = "YAxis";
yAxis.LabelFormat = "{0:P2}";
var yAxisScale = new NumericalScale();
yAxisScale.CrossAxisPositions.Add(new NumericalScaleCrossAxisPosition() { Position = GraphScaleCrossAxisPosition.AtMinimum });
yAxis.Scale = yAxisScale;
var cartesianCoordinateSystem1 = new CartesianCoordinateSystem();
cartesianCoordinateSystem1.Name = "CartesianCoordinateSystem1";
cartesianCoordinateSystem1.XAxis = xAxis;
cartesianCoordinateSystem1.YAxis = yAxis;
lineChart.CoordinateSystems.Add(cartesianCoordinateSystem1);
var lineSeries1 = new LineSeries();
lineSeries1.LineType = LineSeries.LineTypes.Smooth;
lineSeries1.CategoryGroup = dateCategoryGroup;
lineSeries1.CoordinateSystem = cartesianCoordinateSystem1;
lineSeries1.LineStyle.LineWidth = Unit.Inch(0.025);
lineSeries1.SeriesGroup = seriesGroup;
lineSeries1.LegendItem.Style.Visible = false;
lineSeries1.Y = $"=IsNull(Sum(Fields.Value), 0)";
lineSeries1.X = $"=Fields.Date";
lineChart.Series.Add(lineSeries1);
//create report
var report = new Report();
report.PageSettings.Landscape = true;
var section = new DetailSection();
section.Items.Add(lineChart);
report.Items.Add(section);
//export
var reportProcessor = new Telerik.Reporting.Processing.ReportProcessor();
var instanceReportSource = new Telerik.Reporting.InstanceReportSource();
instanceReportSource.ReportDocument = report;
Telerik.Reporting.Processing.RenderingResult result = reportProcessor.RenderReport("PDF", instanceReportSource, null);
using (var fs = new System.IO.FileStream("test.pdf", System.IO.FileMode.Create))
{
fs.Write(result.DocumentBytes, 0, result.DocumentBytes.Length);
}
}
Hi Ryan,
Thank you for providing a working code sample. In this case, it is better to use a categorical X-Axis which will result in a better flowing line as shown in the below output.
For additional reference, I have attached the sample that produces the above output. To run the sample, ensure the Telerik NuGet Feed is configured in Visual Studio.
Please let me know if you need any additional information. Thank you for using the Telerik Reporting forums.
Regards,
Eric R | Senior Technical Support Engineer
Progress Telerik
Rank 1
Hi Eric,
Thanks for the reply. Unfortunately this solution places the points at equal distances from each other regardless of the dates (ie. the distance on the x-axis between may 1 to june 1 is just as wide as june 1 to june 2). We need the days to be represented accurately (or at least a close approximation) along the x-axis. We are able to achieve this in kendo angular using a scatterline with the x-axis base unit set to months. Is there an equivalent in Telerik Reporting? Please let me know if there any other way to achieve both of these requirements. Thank you for your help thus far.
Hi Ryan,
Unfortunately, since the first and last 2 data points of the series does not fit within the scale of the other points, a smooth line will not render properly. For example, the original sample provided can be turned into a scatter graph by removing the line and adding the data point style. This will render as shown in the below screenshot.
In this case, a better graph choice would be the line chart using a categorical scale which will accommodate the uneven distribution or use the straight line type with the existing implementation. Although in Telerik Reporting, Scatter Charts are better suited for comparing a distribution of values and clusters of data and this comparison is not usually related to time. For additional details, see the Design Considerations for Scatter Charts.
Lastly, the Chart Type documentation provides a wealth of options for displaying data.
Please let me now if you need any additional information. Thank you.
Regards,
Eric R | Senior Technical Support Engineer
Progress Telerik
Rank 1
Hi Eric,
Thanks for the quick response. Is there any potential for a fix for this in the future?
Hi Ryan,
From my understanding, I am not sure a fix is necessary because it appears to be working as expected. To elaborate, the Bezier Algorithm used for the Smooth Line calculation is based on the W3C SVG Working Group Standard for displaying interpolating splines. Additionally, per the design considerations, the choice of chart type for the data series is important as well. For example, it is recommended to use a line chart for time based data instead of a scatter chart as they represent different data comparisons.
However, we do have a public feedback item for Providing More Control Over the Numerical Scale Axis Labels. This might be helpful for changing where the points are placed at render time. Something like this could accommodate the uneven distribution in the series. If you feel this is related I encourage casting your vote and following the item for future status updates.
As always, we value your feedback and welcome you to create any additional feedback requests. Thank you for being a valued Telerik Reporting developer.
Regards,
Eric R | Senior Technical Support Engineer
Progress Telerik
Rank 1
Hi Eric,
I agree then that it wouldn't be a fix to the Bezier algorithm, but instead it would be different algorithm altogether. I've provided a sample of how kendo angular handles the same data on a scatterline chart.
https://stackblitz.com/edit/angular-skztwj
Anyway, thank you so much for your time. I really do appreciate you looking into all this for me.
Rank 1
Hi Eric,
Would it be possible to use a similar algorithm to the angular scatterline above instead?
Hi Ryan,
Unfortunately, changing the algorithm in this case wouldn't provide a resolution as they use the same standard. However, after reviewing the provided stackbliz, I can see that Providing More Control Over the Numerical Scale Axis Labels feature would resolve this issue. As a token of gratitude for your feedback, I increased the priority of the issue by casting a vote on your behalf and encourage following the item to receive future updates.
As a workaround, an alternative might be to use the PDF Export component in Kendo Angular. This might work until the feature request is implemented.
In the meantime, please let me know if you need any additional information. Thank you.
Regards,
Eric R | Senior Technical Support Engineer
Progress Telerik