How to have the lines X axis and Y axis with crosshair in swift


#1

Hi All

Using Shinobi Graph with swift.

I need crosshair on my graph . I got the display with the values x and y values of the crosshair with setting the following
lineSeries.crosshairEnabled = true

However, the lines do not appear for me.

I have version Shinobi 2.9.2

Thank you for looking at it.


#2

Hi corinne,

Are you using the SChartCrosshair (the default crosshair), SChartSeriesCrosshair or a custom crosshair?

If all you’re doing is setting lineSeries.crosshairEnabled = true then you’re using the default crosshair, which should show the lines - I’ve just tested it on the GettingStarted sample from version 2.9.2.

If you’re using a different crosshair, or altering the default crosshair, please could you show us the rest of your crosshair code? Note that the SChartSeriesCrosshair doesn’t display crosshair lines.

Alison


#3

Hi Alison

Thank you for your reply.

I am using the default crosshair with lineSeries.crosshairEnabled = true
Below is the code

func sChart(_ chart: ShinobiChart, seriesAt index: Int) -> SChartSeries {

    var lineSeries = SChartLineSeries()
    lineSeries.style().lineWidth = 2
    if index == 0 {
        lineSeries.title = "BLE1 Ampers"
    } else if index == 1 {
        lineSeries.title = "BLE2 Ampers"
    }
    else if index == 2{
        lineSeries.title = "BLE3 Ampers"
    }
    else {
        lineSeries.title = "BLE4 Ampers"
    }
    
    lineSeries.crosshairEnabled = true

    
    return lineSeries

}

#4

Hi Alison

Using Shinobi example below in the sample charts from Shinobi.
I added the following " lineSeries.crosshairEnabled = true "
to have a crosshair. I do get the crosshair values but not the X _Y lines.
Thank you for looking into it

//
// LineChartViewController.swift
// Samples
//
// Created by Andrew Polkinghorn on 07/12/2016.
// Copyright © 2016 Scott Logic. All rights reserved.
//

import Foundation

import ShinobiCharts

class LineChartViewController: UIViewController {

let chart = ShinobiChart(frame: .zero)

override var description: String {
    return "Line Chart"
}

override func viewDidLoad() {
    super.viewDidLoad()
    
    setupChart()
}

private func setupChart() {        
    chart.backgroundColor = .clear
    chart.clipsToBounds = false
    chart.datasource = self
    
    // Create Axes
    let xAxis = SChartNumberAxis()
    enableInteraction(to: xAxis)
    addRangePadding(to: xAxis)
    chart.xAxis = xAxis
    
    let yAxis = SChartNumberAxis()
    enableInteraction(to: yAxis)
    addRangePadding(to: yAxis)
    chart.yAxis = yAxis
    
    // Display legend
    chart.legend.isHidden = false
    chart.legend.placement = .insidePlotArea
    
    view.addSubview(chart)
    
    ViewConstrainer.layout(chart, in: view)
}

private func addRangePadding(to axis: SChartAxis){
    axis.rangePaddingHigh = 0.1
    axis.rangePaddingLow = 0.05
}

private func enableInteraction(to axis: SChartAxis) {
    axis.enableGesturePanning = true
    axis.enableGestureZooming = true
    axis.enableMomentumPanning = true
    axis.enableMomentumZooming = true
}

}

extension LineChartViewController: SChartDatasource {

func numberOfSeries(in chart: ShinobiChart) -> Int {
    return 2
}

func sChart(_ chart: ShinobiChart, seriesAt index: Int) -> SChartSeries {
    let lineSeries = SChartLineSeries()
    
    if index == 0 {
        lineSeries.title = "y = cos(x)"
        lineSeries.style().lineColor = .shinobiRed
    } else {
        lineSeries.title = "y = sin(x)"
        lineSeries.style().lineColor = .shinobiGreen
    }
    
    lineSeries.style().lineWidth = 8
    lineSeries.crosshairEnabled = true
    
    return lineSeries
}

func sChart(_ chart: ShinobiChart, numberOfDataPointsForSeriesAt seriesIndex: Int) -> Int {
    return 120
}

func sChart(_ chart: ShinobiChart, dataPointAt dataIndex: Int, forSeriesAt seriesIndex: Int) -> SChartData {
    let datapoint = SChartDataPoint()
    
    // Both functions share the same x-values
    let xValue = Double(dataIndex) / 10.0
    datapoint.xValue = xValue
    
    // Compute the y-value for each series
    if seriesIndex == 0 {
        datapoint.yValue = cos(xValue)
    } else {
        datapoint.yValue = sin(xValue)
    }
    
    return datapoint
}

}


#5

Hello Corinne,

I’ve just ran the line series sample, with the extra line of code added to enable the crosshair. I can see both the tool tip and the crosshair lines.

My simulator is version 10.0, my xCode version is 8.3.3 and I used shinobi charts version 2.9.6. What versions are you using? Are you trying this on an emulator or real device?

Thanks
Kai.


#6

working was using shinobi charts version 2.9.3. instead of 2.9.6

Thanks


#7

Great, thanks for letting us know. I am glad that you’ve got it working.
Thanks
Kai