I am trying to make the X direction grid line and tick labels fixed at mid of the visible range, whether the chart is zoomed or paned.
I had try to create custom TickProvider for my xAxis:
class CustomTickProvider: SCIDateTimeTickProvider {
private var tickCount: Int
init(tickCount: Int) {
self.tickCount = tickCount
}
override func getMajorTicks(fromAxis axis: SCIAxisCoreProtocol!) -> SCIArrayController! {
let visibleRange = axis.visibleRange
let min = visibleRange?.min.doubleData
let max = visibleRange?.max.doubleData
let array: SCIArrayController = SCIArrayController.init(type: SCIDataType.double)
let step = (max! - min!) / Double(self.tickCount - 1)
var current = min!
while current <= max! {
array.append(SCIGeneric(current))
current += step
}
return array
}
}
xAxis.tickProvider = CustomTickProvider.init(tickCount: 3)
When I set xAxis.autoTicks = true, the grid line and tick labels will be relocated,they can't stay at the same position either.
When I set xAxis.autoTicks = false, no grid line and tick labels will be
drawn.
How can I get the effect of fixed grid line and tick labels?
Maybe not the cleanest way to do it, but it worked for me in a comparable situation:
Edit the MajorDelta/MinorDelta after the visibleRange changed.
Related
When creating a line chart from more than one data sets, the line chart only shows one of the data sets and when zooming or panning the chart it crashes with Fatal error: Can't form Range with upperBound < lowerBound.
If I create the line chart from one data set it works as expected.
This problem only occurs when the two datasets have completely different ranges of X values.
The code below should draw a chart with x ranging from 0 to 19 (i.e. 2 datasets). But it only draws the second dataset. The chart crashes if you pan or zoom it.
If I edit the code, replacing for x in (10..<20) with for x in (0..<10), both datasets are correctly drawn and the chart does not crash.
To summarise: when adding two dataSets that have entries with different ranges of X coordinates the chart draws incorrectly and will crash.
Is there an iOS_charts API call needed to prevent this? How can I draw two datasets that do not have overlapping X-coordinates?
I've been able to produce the same crash when running code using this demo code if I modify it to create multiple datasets that have non-overlapping x-coordinates.
class ElevationChartViewController: UIViewController {
#IBOutlet var chartView: LineChartView!
override func viewDidLoad() {
super.viewDidLoad()
chartView.backgroundColor = .white
chartView.legend.enabled = false
chartView.maxVisibleCount = 20000
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
let dataSets = createChartDataSets()
chartView.data = LineChartData(dataSets: dataSets)
}
}
func createChartDataSets() -> [LineChartDataSet] {
var dataSets = [LineChartDataSet]()
var entriesOne = [ChartDataEntry]()
var entriesTwo = [ChartDataEntry]()
var y = 0.0
for x in (0..<10) {
entriesOne.append( ChartDataEntry(x: Double(x), y: y))
y = y + 10
if y > 60 {y = 0.0}
}
dataSets.append(LineChartDataSet(entriesOne))
for x in (10..<20) {
entriesTwo.append( ChartDataEntry(x: Double(x), y: y))
y = y + 10
if y > 50 {y = 0.0}
}
dataSets.append(LineChartDataSet(entriesTwo))
return dataSets
}
Swift version: 5.4
Xcode 12.4
Observed running on a real iPhone 12 sw version 14.4
Charts v4.0.1
I have been facing a similar issue and this solution worked for me so far. Not sure about potential side effects that could arise from this. I have not tested with panning or zooming.
Subclass LineChartDataSet and override entryIndex(x xValue:closestToY yValue:rounding) copy and paste the super implementation, but remove the guard statement at the top of the function
var closest = partitioningIndex { $0.x >= xValue }
guard closest < endIndex else { return -1 }
and replace with
var closest = partitioningIndex { $0.x >= xValue }
if closest >= endIndex {
closest = endIndex - 1
}
I have built a small application to measure Heart Rate (HR) and currently trying to implement a chart using iOS Charts. It is working as intended (getting HR from watch and displaying it), but I have a small problem with the design of the chart.
On the image below you can see that I have overlapping numbers above the data line (70, and the later 90). I do not know how to remove them.
Chart Image
Here is my setup for the chart and its' update counter function:
//chart set up
self.chtChart.delegate = self as? ChartViewDelegate
let set_a: LineChartDataSet = LineChartDataSet(entries:[ChartDataEntry(x: Double(0), y: self.valueHR)], label: "HR")
set_a.drawCirclesEnabled = false
set_a.setColor(UIColor.systemPink)
self.chtChart.xAxis.drawGridLinesEnabled = false
self.chtChart.rightAxis.drawLabelsEnabled = false
self.chtChart.xAxis.drawLabelsEnabled = false
self.chtChart.data = LineChartData(dataSets: [set_a])
// update counter
var i = 1
#objc func updateCounter() {
self.chtChart.data?.addEntry(ChartDataEntry(x: Double(i), y: valueHR), dataSetIndex: 0)
self.chtChart.setVisibleXRange(minXRange: Double(0), maxXRange: Double(1000))
self.chtChart.notifyDataSetChanged()
self.chtChart.moveViewToX(Double(i))
i = i + 1
}
I know that there is a duplicate question, but the solution with the formatter did not help me: nothing was changed after the implementation of the solution.
formatter solution
I wonder how this to be done . Please do not close this question I need suggestion or any hint to implement it.
Source https://www.youtube.com/watch?v=4uHyHRKmxZk
I have created A node which is SCNCylinder and drawn from target to the centre of the screen from updateAtTime method
Firstly I thought it was drawn with TextNode. SO I tried following
Inside that class I have method help to draw a node at each Unit I pass to UnitLength
func drawOtherBaseUnit(height:Float,intoThe unitType:UnitLength,toTheNode zAxisNode:SCNNode) {
print("---------------------------------------------------------------------")
let distanceInTarget = Converter.convert(value: Double(height), to: unitType).output + 1
print("DISTANCE",distanceInTarget)
print("---------------------------------------------------------------------")
var text = ""
switch unitType {
case .inches:
text = "INCH"
case .centimeters:
text = "CM"
default:
return
}
if !distanceInTarget.isNaN {
var distance = Int(distanceInTarget)
var i = 0
while distance > 0 {
print("distance ",distance)
let node = UnitNode(withPosition: SCNVector3Make(0, 0, 0), radius: CGFloat(Converter.convert(value: 0.1, from: unitType, to: UnitLength.meters).output),text:"\(text) \(i)",forType:unitType)
let valueIncreaseOnAsPerTarget = Int(distanceInTarget) - distance
let valueToIncreaseMeter = Converter.convert(value: Double(valueIncreaseOnAsPerTarget), from: unitType, to: UnitLength.meters).output
node.position.y = -Float(valueToIncreaseMeter)
node.position.x = 0
zAxisNode.addChildNode(node)
distance -= 1
i += 1
}
}
}
The UnitNode class is draw SCNText and some other nodes.
This is working fine. I can see node each provided unit.
But it if I use drawOtherBaseUnit for Inch as well as CM UI is Lagging it is not smooth.
Is it correct way to implement desired output ?
So I'm trying to make a grid/table show up in my app, and to do this I created an array of UILabels with:
var rows = 2
var columns = 2
var grid = [[UILabel]](count: rows, repeatedValue: [UILabel](count: columns, repeatedValue: UILabel()))
then I created each UILabel with:
for i in 0 ..< grid.count
{
for j in 0 ..< grid[0].count
{
grid[i][j].frame = CGRectMake(x + CGFloat(j*Int(gridSpace)), y + CGFloat(i*Int(gridSpace)), gridSpace, gridSpace)
grid[i][j].backgroundColor = UIColor.redColor()
grid[i][j].hidden = false
grid[i][j].textColor = UIColor.whiteColor()
grid[i][j].textAlignment = NSTextAlignment.Center
grid[i][j].text = "label: [\(i)][\(j)]"
self.view.addSubview(grid[i][j])
print("grid[\(i)][\(j)]X = \(grid[i][j].frame.origin.x) grid[\(i)][\(j)]Y = \(grid[i][j].frame.origin.y)")
}
}
What happens is actually pretty interesting. The code compiles and everything, but only one of the labels shows up. The dimensions and everything about the label are perfect, but only one of them shows up.
The label that shows up is always the grid[rows-1][columns-1] label. But when I print the x and y coordinates of the rest of the labels that are supposed to be in the grid array, all of the coordinates are exactly where they are supposed to be on the viewcontroller it's just that the labels don't show up. when I changed the for loop to
for i in 0 ..< grid.count-1
{
for j in 0 ..< grid[0].count-1
{
still only the last label (the grid[rows-1][columns-1] label) shows up yet the coordinates are exactly where they should be. Another weird thing is that if I change the line
grid[i][j].text = "test label: [\(i)][\(j)]"
to
if(j != grid[0].count-1)
{
grid[i][j].text = "test label: [\(i)][\(j)]"
}
then the label that shows up still has the coordinates of the grid[rows-1][columns-1] but has the labeltext of grid[rows-1][columns-2]
Can anyone fix my problem for me or explain whats going on?
It's because of the way that you have initialized your grid with repeated values. If the repeated value is of reference type, the array will actually create only one item and point all indexes to that item, so in your for loops you're changing the frame for the one and only UILabel over and over again. thats why you only see the last one on your screen.
To create the array you want replace this:
var grid = [[UILabel]](count: rows, repeatedValue: [UILabel](count: columns, repeatedValue: UILabel()))
with
var grid = [[UILabel]]()
for row in 0..<rows {
grid.append([UILabel]())
for column in 0..<columns{
grid[row].append(UILabel())
}
}
or
var grid = [[UILabel]]((0..<rows).map { _ in
[UILabel]((0..<columns).map { _ in
UILabel()
})
})
Hi i need a graph as attached for ios. I am using ios-Chart library(swift alternative of MPAndroidChart) for swift .
I have managed to get these points on the graph using the scatter graph. But i couldn't figure out how will i connect the two vertical points. Any help or early response will be appreciate able.
my current code is :
func drawChart(dataPoints:[String] , value1 :[Double] , value2:[Double])
{
var dataEntries1:[ChartDataEntry] = []
for i in 0..<dataPoints.count {
let dataEntry = ChartDataEntry(value:value1[i] , xIndex : i)
dataEntries1.append(dataEntry)
}
var dataEntries2:[ChartDataEntry] = []
for i in 0..<dataPoints.count {
let dataEntry = ChartDataEntry(value:value2[i] , xIndex : i)
dataEntries2.append(dataEntry)
}
let dataSet1 = ScatterChartDataSet(yVals: dataEntries1, label: "Value1" )
dataSet1 .setColor(UIColor.blueColor())
let dataSet2 = ScatterChartDataSet(yVals: dataEntries2 ,label: "Value2")
dataSet2.setColor(UIColor.greenColor())
var bloodPressureDataSets = [ScatterChartDataSet]()
bloodPressureDataSets.append(dataSet1)
bloodPressureDataSets.append(dataSet2)
let barChartData = ScatterChartData(xVals: dataPoints, dataSets: bloodPressureDataSets)
bpChart.xAxis.labelPosition = .Bottom
bpChart.rightAxis.enabled=false
//barChart.legend.enabled=false
bpChart.descriptionText=""
bpChart.data = barChartData
}
Currently i can see this type of graph using the above code.
I want to join these two vertical points like the graph below,
take a look at scatter chart renderer, drawDataSet func. You can connect the dots there
UPDATE towards your comments:
first, go to ScatterChartRenderer and locate to
internal func drawDataSet(context context: CGContext, dataSet: ScatterChartDataSet)
This is where we calculate the position and draw the shape here
There is a main loop:
for (var j = 0, count = Int(min(ceil(CGFloat(entries.count) * _animator.phaseX), CGFloat(entries.count))); j < count; j++)
{
let e = entries[j]
point.x = CGFloat(e.xIndex)
point.y = CGFloat(e.value) * phaseY
point = CGPointApplyAffineTransform(point, valueToPixelMatrix);
...
}
Here's the iteration of the data entries your provide in the dataSet, we just get the xIndex and y value here and convert it to the coordinate on the screen.
So what you can do is to sub class this renderer, override this function to get what you want.
e.g. You want to connect the data entries(the dot) for the same xIndex, you should first iterate each data set to collect all the entries on same xIndex, use CGPointApplyAffineTransform(point, valueToPixelMatrix) to convert and use CoreGraphics APIs to draw the line. You don't need to worry about the math, the library already gives you the API to convert between data value and the screen coordinate value. You just focus on how to draw the chart.