SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
Hi,
When using splinerenderable series, there visual issues (as if the data points are unsorted) with the spline line at certain zoom levels.
If you zoom in past a certain point, the spline line corrects itself, showing that the data points are sorted in order.
See the attached screenshot and project replicating the issue.
This issue may be related to other issues currently active:
SplineLineRenderableSeries doesn’t render curved graph line properly in Swift , it renders stepped line for the data series .For reference please check the Screenshot attached ,ECG line(Green) rendered as stepped line (Marked by rectangle). Let me know anything I need to update in my code
Please find below the code for initialisation go the graph and updating the graph same. I am updating graph realtime with same DataSeries.
Graph initialisation code
func init_ECG_Chart()
{
//Remove Theme From Chart By Apply & Remove & Change Border color
SCIThemeManager.applyTheme(to: self.ecg_Chart_Surface, withThemeKey: SCIChart_Bright_SparkStyleKey)
SCIThemeManager.removeTheme(byThemeKey: SCIChart_Bright_SparkStyleKey)
self.ecg_Chart_Surface.isOpaque = false
self.ecg_Chart_Surface.backgroundColor = .clear
self.ecg_Chart_Surface.renderableSeriesAreaBorderStyle = SCISolidPenStyle(color: .clear, thickness: 0)
//Line
let lineSeries = SCISplineLineRenderableSeries()
lineSeries.strokeStyle = SCISolidPenStyle(color: ecgSelectedColor, thickness: 2.0)
lineSeries.dataSeries = ecgLineDataSeries
// lineSeries.resamplingMode = SCIResamplingMode_None //Resampling off
// lineSeries.resamplingMode = SCIResamplingMode_Auto //Resampling off
let xAxis = SCINumericAxis()
xAxis.axisAlignment = .bottom
xAxis.drawLabels = false
xAxis.drawMajorGridLines = false
xAxis.drawMinorGridLines = false
xAxis.drawMajorTicks = false
xAxis.drawMinorTicks = false
let yAxis = SCINumericAxis()
yAxis.axisAlignment = .left
yAxis.drawLabels = false
yAxis.drawMajorGridLines = false
yAxis.drawMinorGridLines = false
yAxis.drawMajorTicks = false
yAxis.drawMinorTicks = false
yAxis.autoRange = .never //Stop auto ranging axis
yAxis.visibleRange = SCIDoubleRange(min: -32, max: 96)
// yAxis.visibleRangeLimit = SCIDoubleRange(min: -32, max: 96)
yAxis.growBy = SCIDoubleRange(min: 0.2, max: 0.2)
SCIUpdateSuspender.usingWith(self.ecg_Chart_Surface) {
self.ecg_Chart_Surface.xAxes.add(items: xAxis)
self.ecg_Chart_Surface.yAxes.add(items: yAxis)
self.ecg_Chart_Surface.renderableSeries.add(items: lineSeries)
//self.ecg_Chart_Surface.chartModifiers.add(items: SCIZoomExtentsModifier(),SCIPinchZoomModifier())
}
} //Init ECG
Graph updation code
func update_ECG_Chart(xValues:SCIDoubleValues,yValues:SCIDoubleValues)
{
SCIUpdateSuspender.usingWith(self.ecg_Chart_Surface) {
self.ecgLineDataSeries.append(x: xValues, y: yValues)
// self.ecg_Chart_Surface.zoomExtents()
self.ecg_Chart_Surface.zoomExtentsX()
}
} //Update ECG
SciChart 3.1.0.5175 running on iOS 13.6
Please see this short video which demonstrates the issue: https://youtu.be/HjtWZDZeyXM
I have a chart showing a single Spline data series. The data series never drops below zero, yet the chart shows multiple points where the line drops below zero as you zoom in and out. This behavior changes as the zoom level changes.
Is this expected behavior for the spline chart? Is there a way to change the behavior so the chart does not show these sub-zero points?
private func drawChart()
{
createChartSurface()
let series = self.getPositionSeries( name: name, color: color, results: resultsSession.rearResults )
self.sciChartSurface?.renderableSeries.add(series)
}
private func createChartSurface()
{
// If we created a chart surface previously then we need to remove it from the superview
sciChartSurface?.removeFromSuperview()
// Create a SCIChartSurface. This is a UIView so can be added directly to the UI
sciChartSurface = SCIChartSurface()
sciChartSurface?.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(sciChartSurface!)
//sciChartSurface?.autoresizingMask = [.flexibleHeight, .flexibleWidth] // chart bottom falls off the view without this
sciChartSurface?.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
sciChartSurface?.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true
sciChartSurface?.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
sciChartSurface?.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
// Create an XAxis and YAxis. This step is mandatory before creating series
let xaxis = SCINumericAxis()
xaxis.axisTitle = "Seconds"
sciChartSurface?.xAxes.add(xaxis)
let yaxis = SCINumericAxis()
yaxis.axisTitle = "Position (mm)"
yaxis.axisId = "p" // position
yaxis.axisAlignment = .right
sciChartSurface?.yAxes.add(yaxis)
let yaxis = SCINumericAxis()
yaxis.axisTitle = "Speed mm/s"
yaxis.axisId = "s" // speed
yaxis.axisAlignment = .left
sciChartSurface?.yAxes.add(yaxis)
addModifiers()
}
private func getPositionSeries( name: String, color: UIColor, results: ResultData ) -> SCISplineLineRenderableSeries
{
let positionData = SCIXyDataSeries(xType: .double, yType: .double)
positionData.seriesName = name
let start = resultsSession.indexStart + 1
let last = resultsSession.indexEnd
for index in start ... last {
let t1 = resultsSession.sensorData[index-1].time
let t2 = resultsSession.sensorData[index].time
if ((t2-t1) == 1) {
let x = Double(t2) / resultsSession.sampleRate
let y = results.axleData[index].position
positionData.append(x: x, y: y)
} else {
// There was a gap in the data. Fill in the gap with a horizontal line.
let y = results.axleData[index-1].position
for tx in (t1 + 1) ... t2 {
let x = Double(tx) / resultsSession.sampleRate
positionData.append(x:x, y:y)
}
}
}
let positionSeries = SCISplineLineRenderableSeries() // SCIFastLineRenderableSeries()
positionSeries.dataSeries = positionData
positionSeries.yAxisId = "p"
positionSeries.strokeStyle = SCISolidPenStyle(color: color, thickness: 1.0)
return positionSeries
}
I found the example for spline drawing, but it’s still missing the gradient brush that mountain series have, how can I add it? thanks
In our view model, the data range is expanded to include data outside of the X-Axis range. This is done to preserve the spline curve which is defined by previous points– doing this prevents the spline curve from changing drastically by including X number of points outside the range.
When the Draw function is called, the point context that was bound in is filtered to the X Axis range which leads to the spline curve changing as you pan (especially noticeable if it affects a peak).
How can I change this behavior to preserve the spline line?
Updated — Setting ResampleMode = None does not give me all the points.