I'm trying to display a graph in my app using CareKit-UI. But the default stroke width is huge and I'd like to change it. I tried to use OCKDimensionStyler and overriding the lineWidth1 property, but it failed at updating the graph's main line.
Chart view declaration:
let chartView = OCKCartesianChartView(type: .line)
chartView.headerView.titleLabel.text = "Doxylamine"
chartView.graphView.dataSeries = [
OCKDataSeries(values: [0, 1, 1, 2, 3, 3, 2], title: "Doxylamine")
]
This property isn't editable using an OCKStyler, but by setting the size property of OCKDataSeries.
Here's an updated version of the code:
let chartView = OCKCartesianChartView(type: .line)
chartView.headerView.titleLabel.text = "Doxylamine"
var series = OCKDataSeries(values: [0, 1, 1, 2, 3, 3, 2], title: "Doxylamine")
series.size = 2
chartView.graphView.dataSeries = [series]
This allows you to have multiple series on the same graph, with different stroke width for each series.
Related
I integrated SwiftChart library through Cocoapods, and successfully I can able to use swiftChart properties for the line chart. But I want to customize the X-Axis labels as I have some dates(2018/06/12, 2018/06/13, etc..) to display on X-Axis. Could you please guide me on this.
I have integrated the library for my requirement
https://github.com/gpbl/SwiftChart.
You only should read the documentation, I found this code and it may be what you need:
// Use `xLabels` to add more labels, even if empty
chart.xLabels = [0, 3, 6, 9, 12, 15, 18, 21, 24]
// Format the labels with a unit
chart.xLabelsFormatter = { String(Int(round($1))) + "h" }
The before code, it's for adding 'h', on each value, you can make a function to solve it with your requirements.
EDIT
You can make a parallel array, with your required dates i.e ["2018/06/12", "2018/06/13", "2018/06/13","2018/06/13","2018/06/13"] and the array for xLabels i.e [3, 5, 12, 5, 34].. both with the same number of items, and you can replace value for the one this array of dates on the same index..
You have the index on the sugar syntax $0 within the chart.xLabelsFormatter = { }
open var xLabelsFormatter = { (labelIndex: Int, labelValue: Double) -> String in
String(Int(labelValue))
}
Finally, I solved my problem by creating the separate array which contains the same count of actual array objects and used that array to display on x-axis label.
let mainArray = [0, 3, 6, 9, 12,]
let displayArray = ["01/03/18", "012/03/18", "15/03/18", "17/03/18", "20/03/18"]
self.chartView.xLabels = mainArray
self.chartView.xLabelsFormatter = { (labelIndex: Int, labelValue: Double) -> String in
return displayArray[labelIndex]
} self.chartView.add(series)
I am trying to draw Multiple line chart using iOS-Charts danielgindi/Charts library by as show in picture.
Expected Output:
Data1 = [Jun: 34, Jul: 42, Aug: 32, Sep: 30, Oct: 38]
Data2 = [Oct: 38, Nov: 40, Dec: 32, Jan: 40]
let dataSet1 = LineChartDataSet(values: Data1, label: nil)
dataSet1.lineDashLengths =[0]
dataSet1.drawCirclesEnabled = false
let dataSet2 = LineChartDataSet(values: Data2, label: nil)
dataSet2.lineDashLengths =[10]
dataSet2.drawCirclesEnabled = true
let data = LineChartData(dataSets:[dataSet1, dataSet2])
lineChartView?.data = data
I want to draw the first set with solid line and second set with Dotted line.
I am using iOS Charts library. (MultiLineChartView)
The problem which I m facing is the dotted line also start at the beginning of x-Axis. (As shown below)
Could anyone help me on this please?
You must be having minimum and maximum for the x-Axis so you just have to set the starting x-axis for your second set to be the ending x-axis of the first data set. A very good example is included in the examples as CombinedChartViewController. Please try to run the demo and play with the x-Axis of any type of chart,
ChartDataEntry(x: 0.5, y: 30)
I am trying to use heatmap with high charts library in the iOS application. I am able to display the heatmap and data but I want to display border between the series data. I am not able to see the borderWidth or borderColor property in it.
However when I check their documentation for map using html and css, both the properties are present and working in it.
This is my heatmap source code for instantiate the heatmap and adding dummy data in it.
var heatmap = HIHeatmap()
heatmap.dataLabels = HIDataLabels()
heatmap.dataLabels.enabled = NSNumber(booleanLiteral: true)
heatmap.dataLabels.color = HIColor(hexValue: "000000")
heatmap.enableMouseTracking = NSNumber(booleanLiteral: false)
heatmap.data = [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [0, 5, 20],[0,6,34],[0,7,34234]]
When the highstock chart data set has multiple points on the same axis ex:
data: [[0,0], [0, 100], [1, 100], [1,200], [4, 100], [4, 200]]
the point doesn't always choose the highest number by default. It looks like it randomly selects one of the numbers on the same axis.
Here's my fiddler example: http://jsfiddle.net/ceo1y97m/
As you can see when you hover over the different points, it's not always displaying the highest point's Y value. How do I get this to show only the highest point's value?
Edit: Here is the reason that I have multiple x values that are the same:
Let's say the line represents the amount of money you deposit into an account over time. In the line's legend I want to display the amount you've deposited over the period that you're viewing. This would be the furthest point right's Y value minus the furthest point left's Y value. If I don't include the duplicate Y values, this calculation is incorrect.
See updated fiddler to show this error on the legend value (zoom in and out to change the legend values): https://jsfiddle.net/LS384/822/
The two data sets look identical, but the legend values are different, because both points on the same axis aren't displayed.
I'm not sure that this is how the step chart was intended to be used, you should have just 1 value per axis point.
What you could do is filter your data to just keep the highest value for each point
data: [[0,0], [0, 100], [1, 100], [1,200], [4, 100], [4, 200]]
for (var i in data) {
if (filteredData[data[i][0]] == undefined) {
filteredData[data[i][0]] = data[i]
} else {
if (filteredData[data[i][0]][1] < data[i][1]) {
filteredData[data[i][0]] = data[i];
}
}
}
here is your edited filter with the chart looking the same and you desired behaviour http://jsfiddle.net/ceo1y97m/4/
Edit:
I made a workaround, i hid the unfiltered data, used the filtered data for display and gave it the same color as the unfiltered one, and in the function that calculates the difference i use the unfiltered data(ch.series[0].data])
Here is the fiddle with your expected behaviour https://jsfiddle.net/LS384/826/
I would process the data, so you have one point per x value with additional information - multiple values. I treat { x, y } as the information about how the point should be visualised plus add the array with all additional values which allow to make the proper calculations.
This:
[
[0, 0],
[0, 100],
[1, 100],
[1, 200],
[1, 300],
becomes this:
[{
x: 0,
y: 100,
values: [0, 100]
}, {
x: 1,
y: 300,
values: [100, 200, 300]
}]
With points defined as the above, you can access the values via point.options.values and calculate the difference.
example: http://jsfiddle.net/jqdh79vv/
I'm trying to create a custom Polygon style for my layer style.
I receive some information about position, orientation and age for a number of objects and I want to represent those as zoom independent (like using Icons or RegularShapes) isosceles triangles, pointing at an angle and color-coded according to age.
I have a good idea of the color-coding and rotation part, but I'm stumped at creating an isosceles triangle using the style objects provided by OpenLayers.
This is what I have so far:
style = [new ol.style.Style({
geometry: function(feature) {
return new ol.geom.Polygon([[
[0, 0],
[2, 0],
[1, 3]
]]);
},
fill: new ol.style.Fill({color: '#000'}) //black right now
})]