ameng
Posts: 5
Joined: Thu Aug 11, 2022 9:45 am

Retrieving coordinates from dynamic chart (iOS)

Dear developers,

Thank you for the amazing work you have done with the Highcharts library.

I'm trying to use the demo you have posted on dynamic charts for iOS : https://www.highcharts.com/demo/ios/dyn ... ick-to-add

I would like to custom a little bit the code to :
1 - allow only one click event. if another click is made, then the previous one is replace by the new one.
2 - store the [x,y] coordinates that have been click in a swift variable to be able to use it for another chart.

Are these things possible ?

Thank you very much in advance for your help.

Best regards
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Retrieving coordinates from dynamic chart (iOS)

Hello ameng!
Welcome to our forum and thanks for contacting us with your question!

I have forwarded your question to our iOS developer and I will be back with an answer asap.

Best regards!
Hubert Kozik
Highcharts Developer
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Retrieving coordinates from dynamic chart (iOS)

Hello ameng!
Welcome to our forum and thanks for contacting us with your question!

1) I am not quite sure, what you want to achieve. Do you want to have only one point? Could you explain it more precisely?

2) Here is a demo for you with storing coordinates:

Code: Select all

let options = HIOptions()
​
let chart = HIChart()
chart.type = "column"
options.chart = chart
​
let title = HITitle()
title.text = "Demo chart"
options.title = title
​
let plotOptions = HIPlotOptions()
plotOptions.series = HISeries()
​
plotOptions.series.point = HIPoint()
plotOptions.series.point.events = HIEvents()
​
let clickFunction = HIFunction(closure: { [weak self] context in
guard let self = self, let context = context else { return }
​
// getting x, y values
let x = context.getProperty("this.x") ?? "",
y = context.getProperty("this.y") ?? ""
​
let alertMessage = "x: \(x), y: \(y)"
​
let alertController = UIAlertController(title: nil,
message: alertMessage,
preferredStyle: .alert)
​
let okAction = UIAlertAction(title: "OK", style: .default, handler: nil)
alertController.addAction(okAction)
​
self.present(alertController, animated: true, completion: nil)
}, properties: ["this.x", "this.y"])
​
plotOptions.series.point.events.click = clickFunction
​
options.plotOptions = plotOptions
​
let series = HIColumn()
series.data = [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
options.series = [series]
Best regards!
Hubert Kozik
Highcharts Developer
ameng
Posts: 5
Joined: Thu Aug 11, 2022 9:45 am

Re: Retrieving coordinates from dynamic chart (iOS)

dear hubert.k,

Thank you very much for your help !

I've tried to adapt your code to mine but I still have difficulties to make it work the way I need to. This is entirely my fault, here's is some context to better explain what i'm trying to do :

I have defined an empty scatter chart. I would like to click somewhere on the scatter chart and 1) display a point where I clicked, 2) retrieve the x,y coordinates in a static variable I've defined elsewhere :

Code: Select all

static var ScatterPointsAdded:[[Int]] = [[]]
When the point as been placed in the scatter chart, I would like to store the [x,y] in my variable ScatterPointsAdded

Here's is my code for the moment that doesn't work.

Code: Select all


class AddPointViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let chartView = HIChartView(frame: view.bounds)

        let options = HIOptions()

        let chart = HIChart()
        chart.type = "scatter"
        chart.margin = [50, 50, 50, 50]
                
        chart.events = HIEvents()
        chart.events.click = HIFunction(jsFunction: "function (e) { var x = Math.round(e.xAxis[0].value), y = Math.round(e.yAxis[0].value), series = this.series[0]; series.addPoint([x, y]);}")
        
        let ImageURL = createLocalUrl(forImageNamed: "Image")
        chart.plotBackgroundImage = ImageURL?.absoluteString
                
        options.chart = chart

        let title = HITitle()
        title.text = "Live random data"
        options.title = title

        let subtitle = HISubtitle()
        subtitle.text = "Click the plot area to add a point. Click a point to remove it."
        options.subtitle = subtitle

        let xAxis = HIXAxis()
        xAxis.title = HITitle()
        xAxis.title.text = ""
        xAxis.gridLineWidth = 0
        xAxis.minPadding = 0.2
        xAxis.maxPadding = 0.2
        xAxis.min = 0
        xAxis.max = 60
        // xAxis.maxZoom = 60
                
        let yAxis = HIYAxis()
        yAxis.title = HITitle()
        yAxis.title.text = ""
        yAxis.gridLineWidth = 0
        yAxis.minPadding = 0.2
        yAxis.maxPadding = 0.2
        yAxis.min = 0
        yAxis.max = 100
        // yAxis.maxZoom = 60
                
        let plotLines = HIPlotLines()
        plotLines.value = 0
        plotLines.width = 0
        plotLines.color = HIColor(hexValue: "808080")
        xAxis.plotLines = [plotLines]
        yAxis.plotLines = [plotLines]
                
        options.xAxis = [xAxis]
        options.yAxis = [yAxis]

        let legend = HILegend()
        legend.enabled = false
        options.legend = legend

        let exporting = HIExporting()
        exporting.enabled = false
        options.exporting = exporting

        let plotOptions = HIPlotOptions()
        plotOptions.scatter = HIScatter()
        plotOptions.scatter.lineWidth = 0
        plotOptions.scatter.point = HIPoint()
        plotOptions.scatter.point.events = HIEvents()
        
        // original function
        //plotOptions.scatter.point.events.click = HIFunction(jsFunction: "function () { if (this.series.data.length > 1000) { this.remove(); } }")
                
        // new function
        plotOptions.series.point.events.click = HIFunction(closure: { [weak self] context in guard let self = self, let context = context else { return }; let x = context.getProperty("this.x") ?? ""; let y = context.getProperty("this.y") ?? ""; let alertMessage = "x: \(x), y: \(y)"; let alertController = UIAlertController(title: nil,message: alertMessage,preferredStyle: .alert); let okAction = UIAlertAction(title: "OK", style: .default, handler: nil); alertController.addAction(okAction); self.present(alertController, animated: true, completion: nil) }, properties: ["this.x", "this.y"])
                
        options.plotOptions = plotOptions
        
        let scatter = HIScatter()
        // scatter.data = [[20, 20], [80, 80]]
        
        // store x,y
        ScatterPointsAdded.append([x,y])
        
        options.series = [scatter]

        chartView.options = options
        
        self.FieldChartView.addSubview(chartView)
     
    }

Could you help me a little bit more ?

Best regards
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Retrieving coordinates from dynamic chart (iOS)

ameng,
Thank you very much for your clarification!

Now, when we understand correctly, what we want to achieve, you should delete plotOptions.series.point.events.click and make a click event on the chart, like in the demo below:

Code: Select all

let chart = HIChart()
chart.type = "scatter"
chart.margin = [50, 50, 50, 50]
        
chart.events = HIEvents()

let addPointFunction = "function (event) { var x = Math.round(event.xAxis[0].value), y = Math.round(event.yAxis[0].value), series = this.series[0]; series.addPoint([x, y]);}"

chart.events.click = HIFunction(
  closure: { [weak self] context in
    guard let self = self,
          let context = context,
          let doubleX = context.getProperty("event.xAxis[0].value") as? Double,
          let doubleY = context.getProperty("event.xAxis[0].value") as? Double else { return }

    let x = Int(doubleX)
    let y = Int(doubleY)

    let alertMessage = "x: \(x), y: \(y)"
    let alertController = UIAlertController(title: nil,message: alertMessage,preferredStyle: .alert)
    let okAction = UIAlertAction(title: "OK", style: .default, handler: nil)
    alertController.addAction(okAction)
    self.present(alertController, animated: true, completion: nil)
    
    Self.ScatterPointsAdded.append([x, y])
    print(Self.ScatterPointsAdded)
  },
  jsFunction: addPointFunction,
  properties: ["event.xAxis[0].value", "event.yAxis[0].value"]
)

let ImageURL = createLocalUrl(forImageNamed: "Image")
chart.plotBackgroundImage = ImageURL?.absoluteString
        
options.chart = chart
Feel free to ask any further questions.
Regards!
Hubert Kozik
Highcharts Developer
ameng
Posts: 5
Joined: Thu Aug 11, 2022 9:45 am

Re: Retrieving coordinates from dynamic chart (iOS)

dear hubert.k,

thank you very much for your help ! Everything works perfectly now !

I just corrected a small thing in your code :

from :

Code: Select all

let doubleY = context.getProperty("event.xAxis[0].value") as? Double else { return }
to :

Code: Select all

let doubleY = context.getProperty("event.yAxis[0].value") as? Double else { return }
and I also modified the javascript code to make it accept only one entry :

from :

Code: Select all

let addPointFunction = "function (event) { var x = Math.round(event.xAxis[0].value), y = Math.round(event.yAxis[0].value), series = this.series[0]; series.addPoint([x,y]);}"
to :

Code: Select all

let addPointFunction = "function (event) { var x = Math.round(event.xAxis[0].value), y = Math.round(event.yAxis[0].value), series = this.series[0]; series.removePoint(0); series.addPoint([x,y]);}"

Thank you again for your help !

Best regards
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Retrieving coordinates from dynamic chart (iOS)

ameng, thank you for sharing your code! It can be handy for users who will have a similar issue. In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”