Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

XAxis label issue with multiple/grouped bar chart #2481

Closed
HPRaval opened this issue May 26, 2017 · 9 comments
Closed

XAxis label issue with multiple/grouped bar chart #2481

HPRaval opened this issue May 26, 2017 · 9 comments

Comments

@HPRaval
Copy link

HPRaval commented May 26, 2017

I want to create multiple/grouped bar chart dynamically. In my case data comes from server, so number of bars are not fixed. To calculate group space, i have created this function

func calcGroupSpace(n:Int)->Double{ let y = 0.03 * Double(n) let x : Double = 1 / (y+1) return x }

My xValues are, which is also from server, here i have make array for better understanding.

let xVal = ["Apples", "Oranges", "Pears", "Grapes", "Bananas"]

I have created value formatter class.

`class BarChartFormatter: NSObject, IAxisValueFormatter {

var labels: [String] = []

func stringForValue(_ value: Double, axis: AxisBase?) -> String {
    let index = Int(value) % labels.count
    if index>=0 && index<labels.count{
        return labels[index]
    }
    return ""
}

init(labels: [String]) {
    super.init()
    self.labels = labels
}

}
`

And inside my chart, here is code for x-axis and group space
` let chartFormatter = BarChartFormatter(labels: xAxis)

    let xaxis = barChart.xAxis
    //xaxis.valueFormatter = axisFormatDelegate
    xaxis.drawGridLinesEnabled = true
    xaxis.labelPosition = .bottom
    xaxis.centerAxisLabelsEnabled = true
    xaxis.valueFormatter = chartFormatter
    xaxis.granularityEnabled = true
    xaxis.granularity = 1
    xaxis.labelCount = xAxis.count
    
    let groupSpace = chartCommanStyle.calcGroupSpace(n: keys.count)
    let barSpace = 0.03
    let barWidth = groupSpace
    
    
    let groupCount = xAxis.count+1
    let startYear = 0
    
    
    data.barWidth = barWidth;
    barChart.xAxis.axisMinimum = Double(startYear)
    let gg = data.groupWidth(groupSpace: groupSpace, barSpace: barSpace)
    
    barChart.xAxis.axisMaximum = Double(startYear) + gg * Double(groupCount)
    
    data.groupBars(fromX: Double(startYear), groupSpace: groupSpace, barSpace: barSpace)
    
    barChart.data = data
    
    barChart.setVisibleXRangeMaximum(15)
    barChart.animate(yAxisDuration: 1.0, easingOption: .easeInOutBounce)`

The problem is, my x-axis labels are displayed in wrong order. It should be as given, but it prints something like this

screen shot 2017-05-26 at 5 53 42 pm

Please help me to solve this.

@HPRaval
Copy link
Author

HPRaval commented May 29, 2017

I have solved this by changing group space count function. Earlier i was counting it as

(groupSpace * barSpace) * n + groupSpace = 1

But this was wrong, i have change it to

(bar width * barSpace) * n + groupSpace = 1

so my new function for n number of columns is

func calcGroupSpace(n:Int)->Double{ let groupSpace = 1 - (0.23 * Double(n)) return groupSpace }

Hope this may help others..

@sagarsukode
Copy link

sagarsukode commented Mar 17, 2018

My question is related to above one only.
(Above answer is not helpful for me thats why I am posting my own issue.)
My code is:

let months = ["Jan", "Feb", "Mar", "Apr", "May"]
let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0]
let unitsBought = [10.0, 14.0, 60.0, 13.0, 2.0]

//legend
        let legend = barChartView.legend
        legend.enabled = true
        legend.horizontalAlignment = .right
        legend.verticalAlignment = .top
        legend.orientation = .vertical
        legend.drawInside = true
        legend.yOffset = 10.0;
        legend.xOffset = 10.0;
        legend.yEntrySpace = 0.0;
        
        
        let yaxis = barChartView.leftAxis
        yaxis.spaceTop = 0.35
        yaxis.axisMinimum = 0
        yaxis.drawGridLinesEnabled = false
        
        barChartView.rightAxis.enabled = true
        
        
        barChartView.delegate = self
        barChartView.noDataText = "You need to provide data for the chart."
        barChartView.chartDescription?.textColor = UIColor.clear
        
        let xaxis = barChartView.xAxis
        //xaxis.valueFormatter = axisFormatDelegate
        xaxis.forceLabelsEnabled = true
        xaxis.drawGridLinesEnabled = false
        xaxis.labelPosition = .bottom
        xaxis.centerAxisLabelsEnabled = true
        xaxis.valueFormatter = IndexAxisValueFormatter(values:self.months)
        xaxis.granularityEnabled = true
        xaxis.granularity = 1


var dataEntries: [BarChartDataEntry] = []
        var dataEntries1: [BarChartDataEntry] = []
    
        for i in 0..<self.months.count {
            
            let dataEntry = BarChartDataEntry(x: Double(i) , y: Double(self.unitsSold[i]))
            dataEntries.append(dataEntry)
            
            let dataEntry1 = BarChartDataEntry(x: Double(i) , y: Double(self.unitsBought[i]))
            dataEntries1.append(dataEntry1)
            
        }
        
        let chartDataSet = BarChartDataSet(values: dataEntries, label: "unitsSold")
        let chartDataSet1 = BarChartDataSet(values: dataEntries1, label: "unitsBought")
        
        let dataSets: [BarChartDataSet] = [chartDataSet,chartDataSet1]
        chartDataSet.colors = [UIColor(red: 0/255, green: 255/255, blue: 0/255, alpha: 0.5)]
        chartDataSet1.colors = [UIColor(red: 255/255, green: 0/255, blue: 0/255, alpha: 0.8)]

        //chartDataSet.colors = ChartColorTemplates.colorful()
        //let chartData = BarChartData(dataSet: chartDataSet)
        
        let chartData = BarChartData(dataSets: dataSets)
        
        let groupSpace = 0.5
        let barSpace = 0.03
        let barWidth = groupSpace
        
        
        let groupCount = self.months.count
        let startYear = 0
        
        
        chartData.barWidth = barWidth;
        barChartView.xAxis.axisMinimum = Double(startYear)
        let gg = chartData.groupWidth(groupSpace: groupSpace, barSpace: barSpace)
        
        barChartView.xAxis.axisMaximum = Double(startYear) + gg * Double(groupCount)
        
        chartData.groupBars(fromX: Double(startYear), groupSpace: groupSpace, barSpace: barSpace)
        
        barChartView.data = chartData
        
        barChartView.setVisibleXRangeMaximum(15)
        barChartView.animate(yAxisDuration: 1.0, easingOption: .easeInOutBounce)

Check this ScreenShot:

screen shot 2018-03-17 at 3 10 09 pm

Issues: Why all xaxis labels are not showing? And if showing, it is not in proper manner? I am using Swift 4 & Xcode 9.2

UPDATE(08th of May - 2018): I have solved this issue, please check this link: https://github.com/sagarsukode/Charts

simulator screen shot - iphone x - 2018-05-08 at 16 32 30

@atalayasa
Copy link

@sagarsukode did you find any solution for the problem ?

@mazenhalawi
Copy link

I had the same issue like the above, i fixed it by duplicating the months in an array so i guess in your case you will have something like:
let xAxisLabels = ["Feb", "Feb", "Mar", "Mar", "Apr", "Apr"...]

in the IndexAxisValueFormatter(values: your_array_here) use the xAxisLabels array;
however, for the labelCount property you need to mention the number of groups so from the above picture i would put 5. dont use the xAxisLabels count.

hope that helps!

@sagarsukode
Copy link

sagarsukode commented May 8, 2018

@atalayasa & @mazenhalawi : Hello, I have solved this issue, please check this link: https://github.com/sagarsukode/Charts

@arungre
Copy link

arungre commented May 17, 2018

@sagarsukode Thank you verify much sagarsukode. This really helps me to fix xaxis label issue.

@ganjmeng
Copy link

Thank you so much.

@oenama
Copy link

oenama commented Aug 7, 2018

@sagarsukode THANK YOU!

@marceloreis13
Copy link

Thanks!!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants