CODEWITHSUNDEEP
iosios-charts
neena
neena

Reputation: 365

scatter graph + line graph in ios-Charts

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. Current Graph

I want to join these two vertical points like the graph below,

enter image description here

Upvotes: 3

Views: 2835

Answers (1)

Wingzero
Wingzero

Reputation: 9754

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.

Upvotes: 1

Related Questions