Multiple Line chart with 2 dataSets - ios

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)

Related

highlightValue not working in chart with CombinedChartView :: Display marker programmatically is not working :: ChartIssue :: iOS Swift :: DanielGindi

Here is what i am doing!
chart.highlightValue(x: timeStampValue, dataSetIndex: totalCount)
==> In the above line,
timeStampValue is x axis value which i have set while filling up the array.
totalCount is total count of array of data which i am displaying in chart.
What i need to achieve is
When chart screen comes up, i need to display marker by default and for that, i am using "highlightValue" method of chart which is not working.
Please let me know the solution to show marker by default programatically.
NOTE: I am using marker whose UI is custom which is working fine when i tap manually at point in chart:
let marker = CustomMarkerView.viewFromXib()!
marker.chartView = chart
chart.marker = marker
chart.drawMarkers = true
Library used : https://github.com/danielgindi/Charts
Chart Data set :
let data = CombinedChartData()
data.lineData = LineChartData(dataSets:[viewModel.lineChartDataSet, viewModel.emptylineChartDataSet])
data.lineData.highlightEnabled = true
viewModel.lineChartDataSet.highlightColor = AssetsColor.highlightedColor.color
viewModel.lineChartDataSet.drawHorizontalHighlightIndicatorEnabled = false
viewModel.lineChartDataSet.highlightLineDashPhase = 2
viewModel.lineChartDataSet.highlightLineDashLengths = [5, 2.5]
you are using the wrong value for dataSetIndex param
based on your code, the datasets only contains 2 data
data.lineData = LineChartData(dataSets:[viewModel.lineChartDataSet, viewModel.emptylineChartDataSet])
dataSetIndex is not data count, in linechart dataset represent a line that has many data (x,y), so dataSetIndex is more like which line
so your code should be something like this
chart.highlightValue(x: timeStampValue, dataSetIndex: 0)
chart.highlightValue(x: timeStampValue, dataSetIndex: 0, dataIndex: 0)
When i added 1 more parameter which is dataIndex as 0 and it worked.
Here, dataSetIndex is set to 0 because it is CombinedChartView where i have merged 2 data set.

How to change the stroke width in a CareKit graph?

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.

Why only first plot is not labeled with a shape, unlike the rest of plots in the graph?

I am trying to plot points on lineChartView class. I then plotted data on it, but I see a very funny thing. The second plot is labeled, but not the first one.
I am setting up LineChartView instance and named it lineChart:
var lineChart: LineChartView = {
var l = LineChartView()
l.translatesAutoresizingMaskIntoConstraints = false
l.backgroundColor = .white
return l
}()
lineChartDataPoints holds ChartDataEntry classes, which holds x and y values:
var lineChartDataPoints: [ChartDataEntry] = []
I loop over xData and append ChartDataEntry class to lineChartDataPoints. xData and yData variable hold x and y values: (Which is generated in other function and not really a point of this question)
for i in 0..<xData.count {
let data = ChartDataEntry(x: Double(i + 1), y: Double(yData[i])!)
lineChartDataPoints.append(data)
}
Then I add lineChartDataPoints to LineChartDataSet:
let lineDataSet = LineChartDataSet(values: lineChartDataPoints, label: "Values")
Then lineDataSet is added to lineData after setting parameters.
lineDataSet.colors = [UIColor.red]
lineDataSet.lineWidth = 5
lineDataSet.circleColors = [UIColor.blue]
lineDataSet.circleRadius = 5
lineData.addDataSet(lineDataSet)
And this is obviously not because there is only one point. Because I tried this:
print("data \(lineChartDataPoints)")
// data [ChartDataEntry, x: 1.0, y 1.0, ChartDataEntry, x: 6.0, y 1.0]
There definitely are two points supplied for the graph to display, but I am pretty stumped on why first point won't be labeled with blue dot like second point.
Before installing the new Charts framework (Version 3.2) for Swift 5, I did not have this issue. There were some tweaks to be made in Charts framework. Installing newest patch (3.3) have solved this problem. So update to the latest version of this framework to avoid this problem.

How could we plot graphical representation using High Charts where one x-axis value have multiple y-axis value

How could we plot graphical representation using High Charts where one x-axis value have multiple y-axis value
and for each x-axis value number of y-axis value differs.
I have date on x-axis and on y-axis the readings.
Now, i have data for each date, but the number of reading may differ for different dates. Like for today i have 5 readings and yesterday it was 10 readings.
So i have the data Date vise. and i want to plot it on graph with positive and negative values. I do some RnD for high charts for this, but highcharts dont show the reading receptive with this scenario, or may be i didnt get it. Can anybody help me in this.
Data I have:
1) Date: 1/8/2017
Values:[12,56,-14,35,8]
2) Date: 2/8/2017
Values:[3,9,-4]
3) Date: 3/8/2017
Values:[8,-6,45]
Thank you for the help
You can use the scatter series: https://www.highcharts.com/docs/chart-and-series-types/scatter-chart
Live demo adjusted to your problem: http://jsfiddle.net/kkulig/c6w79bd0/
If you have data composed similarly to this:
var data = [{
date: Date.UTC(2017, 0, 1),
values: [4, 5, 6, -2]
}, {
date: Date.UTC(2017, 0, 2),
values: [3, -7]
}, {
date: Date.UTC(2017, 0, 3),
values: [0, 11]
}];
You can prepare it this way:
var series = {
data: []
};
data.forEach(function(day) {
day.values.forEach(function (value){
series.data.push([day.date, value]);
});
});

Line chart with fix X axis label like healthkit graph in iOS

hello I want to create line chart similar to healthkit. For example i have on X axis (Jul 14, 15, 16, 17), Y axis (0, 50, 100) and data set in (x,y) format is ((jul 15, 30),(jul 17, 80))
I try following libraries
https://github.com/Boris-Em/BEMSimpleLineGraph/tree/master/Sample%20Project/SimpleLineChart
https://github.com/core-plot/core-plot
but all populate x axis based on data set. i.e all library only take parameter for data set based on that x axis and y axis labels are populated. Can you please suggest any other library through which I can achieve similar as explain above line chart. Thanks in advance.
Finally i solved my problem using
https://github.com/Boris-Em/BEMSimpleLineGraph/tree/master/Sample%20Project/SimpleLineChart
when there is no value i put (jul 15, BEMNullGraphValue).
Even this you could do it in your existing graph
Consider below example.
- {[0,5],[1,5],[3,5],[4,5]}
See there is no value for 2, so line chart will draw 0-5 to 1-5 then gap then 3-5 to 4-5.
I hope now you could figure out.
Still if you wish then get below graph library.
Do it with https://github.com/danielgindi/Charts
There are many properties like clip, scale, min, max etc for line chart.
Using though properties you could achieve.
https://github.com/danielgindi/Charts/issues/533
Edited answer
After doing some work around, i found the way.
Download sample code
let months = ["July 14", "15", "16", "17", "18", "19", "20"]
let unitsSold = [0.0, 0.0, 0.0, 100.0, 25.0, 50.0, 75.0]
for i in 0..<dataPoints.count {
if !values[i].isZero {
let dataEntry = ChartDataEntry(value: Double(values[i]), xIndex: i)
dataEntries.append(dataEntry)
}
}
Refer attached screen shot
In PNChart create one array of indexes which you want to skip the value. Put condition drawdot funtion on start of for loop of data array if array contain index value then continue.

Resources