sandeepd
Posts: 17
Joined: Mon Oct 18, 2021 1:23 pm

Spline not displaying entirely

Hello,

Created a chart [used in Apple App development] with 6 column series and couple of spline series and added to chart series. When the chart is shown one of spline series does not have the line connected and some part of the spline series has the line. Upon selecting the chart the line is drawn for the remaining portion of the spline series. Appreciate if this can be solved.

Code: Select all


chart.zoomType = "xy"
chart.type = "column"
chart.panning = HIPanning()
chart.panning.enabled = true
chart.panning.type = "x"
chart.pinchType = "x"
chart.events = HIEvents()
        
let plotOptions = HIPlotOptions()
plotOptions.column = HIColumn()
plotOptions.column.pointWidth = 15
plotOptions.column.groupPadding = 0.5
plotOptions.column.pointPadding = 0.2
plotOptions.column.stacking = "normal"

let usageColumn = HIColumn()
usageColumn.name = "kWh"
usageColumn.id = "Usage1"
usageColumn.data = usageValue
usageColumn.yAxis = 0
usageColumn.color = HIColor(hexValue: "0078CF")

let weekendColumn = HIColumn()
weekendColumn.name = "WeekendKwh"
weekendColumn.id = "Weekend"
weekendColumn.data = weekendusgValue
weekendColumn.yAxis = 0
weekendColumn.color = HIColor(hexValue:"0078CF")

let lowTempline = HISpline()
lowTempline.yAxis = 1
lowTempline.name = "Low Temperature"
lowTempline.id = "LowTemp1"
lowTempline.data = lowTempValue
let lowDataLabel = HIDataLabels()
lowDataLabel.enabled = false
lowDataLabel.verticalAlign = "top"
lowDataLabel.overflow = "none"
lowDataLabel.inside = false
lowTempline.dataLabels = [lowDataLabel]
lowTempline.color = HIColor.init(hexValue:"54B948")
lowTempline.tooltip = HITooltip()
lowTempline.tooltip.valueSuffix = "°F"

let highTempLine = HISpline()
highTempLine.yAxis = 1
highTempLine.name = "High Temperature"
highTempLine.id = "HighTemp1"
highTempLine.data = highTempValue
highTempLine.dataLabels = [lowDataLabel]
highTempLine.color = HIColor.init(hexValue:"EC1C24")
highTempLine.tooltip = HITooltip()
highTempLine.tooltip.valueSuffix = "°F"

options.series = [usageColumn, usageColumn1, weekendColumn, usageColumn2, usageColumn3, lowTempline, highTempLine]

chartView.options = options
chartView.theme = "grid-light";

jakub.s
Posts: 1229
Joined: Fri Dec 16, 2022 11:45 am

Re: Spline not displaying entirely

Hi,

Thanks for the question.

I've contacted our mobile developers with your questions. I'll let you know as soon as I get an answer.

In the meantime, do not hesitate to ask me any question about Highcharts with JavaScript:)

Best regards,
Jakub
Jakub
Highcharts Developer
jakub.s
Posts: 1229
Joined: Fri Dec 16, 2022 11:45 am

Re: Spline not displaying entirely

Hi,

Unfortunately, this code you've sent does not seem to work.

Could you please provide us with a working example of your problem?

Only then will I be able to help.

Best regards,
Jakub
Jakub
Highcharts Developer
sandeepd
Posts: 17
Joined: Mon Oct 18, 2021 1:23 pm

Re: Spline not displaying entirely

Below is the code used in SWIFT for apple app development to display the chart having bar chart and spline series. I couldn't understand what is not working from your explanation hence i shared the entire code for chart which is being used.

Code: Select all

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

chart.zoomType = "xy"
chart.type = "column"
chart.panning = HIPanning()
chart.panning.enabled = true
chart.panning.type = "x"
chart.pinchType = "x"
chart.events = HIEvents()
chart.events.load = HIFunction(jsFunction: "function() { var proceed = this.pointer.pinch; this.pointer.pinch = function(e) { if (e.touches.length === 1 && e.type === 'touchmove') { this.chart.pan(e, this.chart.options.panning); } else { proceed.call(this, e); if (e.type === 'touchstart') { this.chart.mouseDownX = this.pinchDown[0].chartX; this.chart.mouseDownY = this.pinchDown[0].chartY; } } } }")

chart.scrollablePlotArea = HIScrollablePlotArea()
chart.scrollablePlotArea.minWidth = NSNumber(value: (50 * 25))
chart.scrollablePlotArea.scrollPositionX = 0
options.chart = chart

let xAxis = HIXAxis()
xAxis.categories = dateRange
xAxis.min = 0
xAxis.events = HIEvents()
xAxis.events.afterSetExtremes = HIFunction(closure: { context in
            guard let context = context,
                let currentMin = context.getProperty("event.min") as? Double else { return }
            print("Min: \(currentMin)")
            if currentMin == 0 { /* fetching new data */ }
        }, properties: ["event.min", "event.max", "event.dataMin", "event.dataMax"])
        xAxis.crosshair = HICrosshair()
        options.xAxis = [xAxis]
let yAxis = HIYAxis()
yAxis.min = NSNumber.init(value: minVal)
yAxis.title = HITitle()
if actchartOption.contains(chartOptnamount) {
    yAxis.title.text = chartOptnamount
} else if actchartOption.contains(chartOptnusage) {
    yAxis.title.text = chartOptnusage
}
yAxis.stackLabels = HIStackLabels()
yAxis.stackLabels.enabled = true
yAxis.stackLabels.style = HICSSObject()
yAxis.stackLabels.style.fontWeight = "bold"
yAxis.stackLabels.style.color = "black"

let yAxis1 = HIYAxis()
yAxis1.min = NSNumber.init(value: minVal)
yAxis1.labels = HILabels()
yAxis1.labels.enabled = true
yAxis1.labels.format = "{value}°F"
yAxis1.labels.style = HICSSObject()
yAxis1.labels.style.color = "#a7a7a7"
yAxis1.title = HITitle()
yAxis1.title.text = ""
yAxis1.opposite = true

options.yAxis = [yAxis, yAxis1]


let legend = HILegend()
legend.enabled = false
legend.align = "right"
legend.x = -30
legend.verticalAlign = "bottom"
legend.y = 25
legend.floating = true
legend.backgroundColor = HIColor(name: "white")
legend.borderColor = HIColor(hexValue: "CCC")
legend.borderWidth = 1
legend.shadow = HICSSObject()
legend.shadow.opacity = 0
options.legend = legend


let tooltip = HITooltip()
tooltip.headerFormat = "<b>Date: </b>{point.x}<br/>"
//tooltip.pointFormat = "{series.name}: {point.y}<br/>Total: {point.stackTotal}"
tooltip.followTouchMove = false
options.tooltip = tooltip

let plotOptions = HIPlotOptions()
plotOptions.column = HIColumn()
plotOptions.column.pointWidth = 15
plotOptions.column.groupPadding = 0.5
plotOptions.column.pointPadding = 0.2
plotOptions.column.stacking = "normal"
options.plotOptions = plotOptions

let usageColumn = HIColumn()
usageColumn.name = "kWh"
usageColumn.id = "Usage1"
usageColumn.data = usageValue
usageColumn.yAxis = 0
usageColumn.color = HIColor(hexValue: "0078CF")

let weekendColumn = HIColumn()
weekendColumn.name = "WeekendKwh"
weekendColumn.id = "Weekend"
weekendColumn.data = weekendusgValue
weekendColumn.yAxis = 0
weekendColumn.color = HIColor(hexValue:"0078CF")

let lowTempline = HISpline()
lowTempline.yAxis = 1
lowTempline.name = "Low Temperature"
lowTempline.id = "LowTemp1"
lowTempline.data = lowTempValue
let lowDataLabel = HIDataLabels()
lowDataLabel.enabled = false
lowDataLabel.verticalAlign = "top"
lowDataLabel.overflow = "none"
lowDataLabel.inside = false
lowTempline.dataLabels = [lowDataLabel]
lowTempline.color = HIColor.init(hexValue:"54B948")
lowTempline.tooltip = HITooltip()
lowTempline.tooltip.valueSuffix = "°F"

let highTempLine = HISpline()
highTempLine.yAxis = 1
highTempLine.name = "High Temperature"
highTempLine.id = "HighTemp1"
highTempLine.data = highTempValue
highTempLine.dataLabels = [lowDataLabel]
highTempLine.color = HIColor.init(hexValue:"EC1C24")
highTempLine.tooltip = HITooltip()
highTempLine.tooltip.valueSuffix = "°F"

options.series = [usageColumn, usageColumn1, weekendColumn, usageColumn2, usageColumn3, lowTempline, highTempLine]

chartView.options = options
chartView.theme = "grid-light";
jakub.s
Posts: 1229
Joined: Fri Dec 16, 2022 11:45 am

Re: Spline not displaying entirely

Hi,

I've forwarded your question again to our mobile developers, but this code doesn't seem to work either.

Here's an image:
Screenshot 2023-03-30 at 14.36.07 (1).png
Screenshot 2023-03-30 at 14.36.07 (1).png (167.47 KiB) Viewed 279 times

Please try to send the code so that after copying & pasting it everything works for them.

Best regards,
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Usage”