ChartModel greater than the ChartView iOS 9.3 iPhone 4s

[RomuloVHSYS]

I'm testing my application in multiple sizes of screens and iOS versions.

On iPhone 4s, looks like the ChartModel is greater than the ChartView, and chart view is clipping the bottom of the chart.

The same code works well on other newer devices. I'm not sure if it's related to the screen size or iOS version of iPhone 4s, but probably is the iOS, because the superview of the chart has a fixed height, and the screen width for 4s and SE is the same

Examples:

iPhone 4s:

iPhoneSE:

[AAChartModel]

The local Highcharts javascript files version in AAChartKit-Swift is 5.0.5, maybe the problem was fixed in the latest version Highcharts. So you can test the problem with the latest version (v6.1.4) Highcharts.

[AAChartModel]

To get the latest version Highcharts ,Just do as I said in README

the online version always be the latest version

[RomuloVHSYS]

Following these steps to use the online version don't solve my problem, and brings another: The charts only render if exist connection to internet.

So, the problem is directly on Highcharts? there's nothing that i can do to solve this?

[AAChartModel]

you can adjust the content height through changing the property of AAChartView named contentHeight

    /// Content height of AAChartView
    public var contentHeight: CGFloat? {
        willSet {
            if optionsJson != nil {
                let jsStr = "setTheChartViewContentHeight('\(newValue!)')"
                evaluateJavaScriptWithFunctionNameString(jsStr)
            }
        }
    }

the default value of AAChartView content height is equal to the AAChartView.frame.size.height do as follow

aaChartView.contentHeight = aaChartView.frame.size.height - 20

Maybe this problem will be solved

[AAChartModel]

I think the different scrollView content layout policy of different versions iOS caused this weird problem. as you can see ,the content view WKWebView(or UIWebView below iOS 9) of AAChartView extern from the UIScrollView. so if there is a difference of layout policy, there is the problem.

I hope this can help !

[RomuloVHSYS]

Setting contentHeight does not change anything

[AAChartModel]

are you sure about this? Even if it can not resolve this problem, it can change the content height of AAChartView at least!!! you can test it in AAChartKit-Swift demo.

[RomuloVHSYS]

Maybe it can change the contentHeight to a greater value(but my chartView isn't scrollable), but not to a smaller value, because even if i set aaChartView.contentHeight = 10 or any other small value, on screen i have the same result to the image above.

[AAChartModel]

how about the test result in AAChartView-Swift demo???

[AAChartModel]

If I set aaChartView.contentHeight = 100

 aaChartView = AAChartView()
        let chartViewWidth = view.frame.size.width
        let chartViewHeight = view.frame.size.height - 220
        aaChartView?.frame = CGRect(x: 0,
                                    y: 60,
                                    width: chartViewWidth,
                                    height: chartViewHeight)
        ///AAChartViewd的内容高度(内容高度默认和 AAChartView 等高)
        aaChartView?.contentHeight = 100
        view.addSubview(aaChartView!)
        aaChartView?.scrollEnabled = false//禁止图表内容滚动
        aaChartView?.isClearBackgroundColor = true

        aaChartModel = AAChartModel()
            .chartType(chartType!)//图形类型
            .colorsTheme(["#1e90ff","#ef476f","#ffd066","#04d69f","#25547c",])//主题颜色数组
            .axisColor("#ffffff")
            .title("")//图形标题
            .subtitle("")//图形副标题
            .dataLabelEnabled(false)//是否显示数字
            .tooltipValueSuffix("℃")//浮动提示框单位后缀
            .animationType(.bounce)//图形渲染动画类型为"bounce"
            .backgroundColor("#00000000")//图表背景色为透明色,或者设置为 "rgba(0,0,0,0)".  "#00000000"和"rgba(0,0,0,0)"效果相同
            .series([
                AASeriesElement()
                    .name("Tokyo")
                    .data([7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6])
                    .toDic()!,
                AASeriesElement()
                    .name("New York")
                    .data([0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5])
                    .toDic()!,
                AASeriesElement()
                    .name("Berlin")
                    .data([0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0])
                    .toDic()!,
                AASeriesElement()
                    .name("London")
                    .data([3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8])
                    .toDic()!,
                ])

        configureTheStyleForDifferentTypeChart()

I got this

[AAChartModel]

If you cannot get the right result , Please update the demo of AAChartView-Swift to be the latest version and test it again.

[RomuloVHSYS]

Doesn't work on iOS 9.3, only on more recently iOS. I'm already using the latest version. I thinking.. is it possible that the cause is some interpretation of JS to the safari version of iOS 9?

[AAChartModel]

Can this problem be repeated on the simulator? Since I don't have a real machine, I have to test it in the simulator to see if I can reproduce this problem,

[RomuloVHSYS]

Unfortunately, no. This bug occurs only on a physic device.

Thats makes me thinking even more, that this are an JS bug related to the safari version of the device, because this on simulator it's a different version that device safari.

[AAChartModel]

there is a property named marginBottom that can be used to change the bottom margin of chart. It is possible to resolve this problem if you add it in AAOptionsConstructor.js as follow:

change

   var aaChart = {
                type: aaChartModel.chartType,//图表类型
                inverted: aaChartModel.inverted,//设置是否反转坐标轴，使X轴垂直，Y轴水平。 如果值为 true，则 x 轴默认是 倒置 的。 如果图表中出现条形图系列，则会自动反转
                backgroundColor: aaChartModel.backgroundColor,//图表背景色
                animation: true,
                pinchType: aaChartModel.zoomType,//设置手势缩放方向
                panning: true,//设置手势缩放后是否可平移
                polar: aaChartModel.polar,//是否辐射化图形
                marginLeft: aaChartModel.marginLeft,
                marginRight: aaChartModel.marginRight,
        };

to be

   var aaChart = {
                type: aaChartModel.chartType,//图表类型
                inverted: aaChartModel.inverted,//设置是否反转坐标轴，使X轴垂直，Y轴水平。 如果值为 true，则 x 轴默认是 倒置 的。 如果图表中出现条形图系列，则会自动反转
                backgroundColor: aaChartModel.backgroundColor,//图表背景色
                animation: true,
                pinchType: aaChartModel.zoomType,//设置手势缩放方向
                panning: true,//设置手势缩放后是否可平移
                polar: aaChartModel.polar,//是否辐射化图形
                marginLeft: aaChartModel.marginLeft,
                marginRight: aaChartModel.marginRight,
                marginBottom: 30, //❤️change the chart bottom margin❤️
        };

This means that you only need to add the

marginBottom: 30, //❤️change the chart bottom margin❤️

into the AAOptionsConstructor.js

Here is the marginBottom document link address ,https://api.highcharts.com/highcharts/chart.marginBottom

or you can test the marginBottom online.If it is useful, tell me and I will add the marginBottom into the AAChartModel.Swift to make it easier to use.

[RomuloVHSYS]

Your suggestion doesn't work, but help me to find a solution.

Workin on others attributes of the highcharts docs, and testing multiple of then, i'd realize that none of then are giving any result. So, i'v starting to learning how you construct your AAChartModel, and i add a method on AAChartModel to change the marginBottom like the others attributes, like this:

private var marginBottom: Float?

and:

@discardableResult
    public func marginBottom(_ prop: Float) -> AAChartModel {
        marginBottom = prop
        return self
    }

and on AAOptionsConstructor.js:

var aaChart = {
                type: aaChartModel.chartType,//图表类型
                inverted: aaChartModel.inverted,//设置是否反转坐标轴，使X轴垂直，Y轴水平。 如果值为 true，则 x 轴默认是 倒置 的。 如果图表中出现条形图系列，则会自动反转
                backgroundColor: aaChartModel.backgroundColor,//图表背景色
                animation: true,
                pinchType: aaChartModel.zoomType,//设置手势缩放方向
                panning: true,//设置手势缩放后是否可平移
                polar: aaChartModel.polar,//是否辐射化图形
                marginLeft: aaChartModel.marginLeft,
                marginRight: aaChartModel.marginRight,
                marginBottom: aaChartModel.marginBottom
        };

And BOOOM, that works! I don't know why passing these parameters hardcoded doesn't work for me, but these changes above works well, and working together with an #available(iOS 9.0, *) the problem is finally solved.

Here's how i construct my AAChartModel:

let chartModelFinancial = AAChartModel()
            .chartType(.column)
            .animationType(.easeOutCirc)
            .dataLabelEnabled(false)
            .tooltipEnabled(true)
            .tooltipValueSuffix(" BRL")
            .categories(self.sixMonthSequence)
            .colorsTheme(["#00FFEB","#F65977"])
            .series([
                AASeriesElement()
                    .name("Receitas")
                    .data(incomeDataToChart())
                    .toDic()!,

                AASeriesElement()
                    .name("Despesas")
                    .data(expenseDataToChart())
                    .toDic()!,
                ])
            .yAxisGridLineWidth(0.0)
            .xAxisGridLineWidth(0.0)
            .backgroundColor("rgba(0,0,0,0)")
            .axisColor("#ffffff")
            .legendEnabled(false)
            .marginBottom({ () -> Float in
                                if #available(iOS 10.0, *){
                                    return 0.0
                                }else{
                                    return 100.0
                                }
                            }()
                        )

[RomuloVHSYS]

Thanks a lot for you attention and for help me.

If you want to mark this issue to helpful, add these changes that i make and mark the the commit on you make these changes, maybe this issue can be useful for future problems for others developers.