Pre loader

Two fingers RolloverModifiers and custom text formatting inside the RolloverModifier's tooltip.

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

Hello,

I’m currently evaluating SciChart to see if it supports our needs for an application. We’re trying to have a chart that closely mimics the iOS Stock application (attachment: StockApp.PNG) but for sensor values. Our effort so far can be seen in attachment: SciChart.jpg.

  1. Inside the tooltip provided by the RolloverModifier, we only want to display the value of the Y axis – and get rid of the X axis (datetime). Is there a way to hide the X axis value and only display the Y axis value inside the tooltip? Refer to SciChart.jpg. For example, when RolloverModifier is visible, the tooltip for Turbidity line should only read “Turbidity: 2.50 NTU”, where 2.50 is the Y-axis value and NTU is the unit of measure. Notice we do not want to see “X: 28/01/18 12:24PM” at all in the tooltip.

  2. Similar to the iOS Stock app, we require a second RolloverModifier when a second finger rests on the chart. The idea is to provide a quick popover to display the difference in Y-axis value between the two RolloverModifier values. I tried adding a second instance of RolloverModifier to the SCIChartSurface however the vertical trace line would just overlap the first finger’s trace line.

There are the two major requirements I see right now in determining whether to invest in SciChart. So please let me know if they are possible. Below is the code.

    override func viewDidLoad() {
        super.viewDidLoad()

        layout()

        configXaxis(surface: sciChartSurface)
        configYaxis(surface: sciChartSurface)        
        loadDataSeriesFromCsv(csv: rlCSVToDownload!)
    }

   private func layout() {
        let margins = view.layoutMarginsGuide

        sciChartSurface = SCIChartSurface()
        sciChartSurface?.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(sciChartSurface!)

        sciChartSurface?.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        sciChartSurface?.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
        sciChartSurface?.bottomAnchor.constraint(equalTo: margins.bottomAnchor).isActive = true
        sciChartSurface?.topAnchor.constraint(equalTo: margins.topAnchor).isActive = true
    }

    private func configYaxis(surface: SCIChartSurface!) {
        let axis = SCINumericAxis(), numericFormat = "%.02f"
        axis.textFormatting = numericFormat
        axis.cursorTextFormatting = numericFormat
        surface.yAxes.add(axis)
    }

    private func configXaxis(surface: SCIChartSurface!) {
        let axis = SCIDateTimeAxis(), datetimeFormat = "dd/MM/YY H:mm a", subDayFormat = "H:mm a"
        axis.textFormatting = datetimeFormat
        axis.subDayTextFormatting = subDayFormat
        axis.cursorTextFormatting = datetimeFormat

        surface.xAxes.add(axis)
    }

    private func addModifiers() {
        let xAxisDragmodifier = SCIXAxisDragModifier()
        xAxisDragmodifier.dragMode = .pan
        xAxisDragmodifier.clipModeX = .none

        let yAxisDragmodifier = SCIYAxisDragModifier()
        yAxisDragmodifier.dragMode = .pan

        let extendZoomModifier = SCIZoomExtentsModifier()
        let pinchZoomModifier = SCIPinchZoomModifier()

        let rolloverModifier = SCIRolloverModifier()

        let legend = SCILegendModifier()

        let groupModifier = SCIChartModifierCollection(childModifiers: [xAxisDragmodifier, yAxisDragmodifier, pinchZoomModifier, extendZoomModifier, legend, rolloverModifier])

        sciChartSurface?.chartModifiers = groupModifier
    }

   private func loadDataSeriesFromCsv(csv: CSV) {
        rlCSVConnection?.download(csv: csv, onProgress: nil, onComplete: {
            [weak self] (csv) -> (Void) in

            self?.turbDataSeries = SCIXyDataSeries(xType: SCIDataType.dateTime, yType: SCIDataType.double)
            self?.turbDataSeries.seriesName = "Turbidity"

            self?.cl2DataSeries = SCIXyDataSeries(xType: SCIDataType.dateTime, yType: SCIDataType.double)
            self?.cl2DataSeries.seriesName = "Chlorine"

            //... Populate data into DataSeries ...

            self?.turbRenderableSeries = SCIFastLineRenderableSeries()
            self?.turbRenderableSeries.isDigitalLine = true
            self?.turbRenderableSeries.dataSeries = self?.turbDataSeries
            self?.turbRenderableSeries.style.strokeStyle = SCISolidPenStyle(color: UIColor.orange, withThickness: 1)

            self?.cl2RenderableSeries = SCIFastLineRenderableSeries()
            self?.cl2RenderableSeries.isDigitalLine = true
            self?.cl2RenderableSeries.dataSeries = self?.cl2DataSeries
            self?.cl2RenderableSeries.style.strokeStyle = SCISolidPenStyle(color: UIColor.green, withThickness: 1)

            self?.sciChartSurface?.renderableSeries.add(self?.turbRenderableSeries)
            self?.sciChartSurface?.renderableSeries.add(self?.cl2RenderableSeries)

            self?.addModifiers()
        }, onFailure: nil)
    }

Thanks.

Version
Latest
Images
  • You must to post comments
Showing 0 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies